This post introduces a simple yet effective approach to improve offline user experience on the web using Service Workers. Instead of a browser's default offline page, this method displays a custom offline page when the network is unavailable. The provided JavaScript code caches essential offline assets and intercepts navigation requests. If a request fails due to network issues, it serves a pre-cached 'offline.html' page, ensuring a smoother experience for users. This strategy enhances user perception of web applications, especially in areas with unreliable internet connectivity. A key improvement mentioned is the use of Navigation Preload, which optimizes the loading process by not waiting for the Service Worker to boot up for all requests.
My QRCode scanner app in China ran into an issue offline: the camera wouldn't start due to a Google Analytics request hanging in the onload event. This highlighted a broader problem of render-blocking third-party assets. If these assets (like scripts) are critical, a slow or failed connection can prevent the page from rendering for over a minute while the browser waits for a timeout. This results in a blank screen for the user. This post explores the impact of render-blocking third-party resources on performance and how optimizing their integration can drastically improve the user experience, particularly in unreliable network conditions.
This blog post discusses the evolution of Progressive Web Apps (PWAs) since their inception in 2015. While PWAs offer numerous benefits like offline functionality, push notifications, and installability, the author observes that adoption hasn't been universal. Many developers and businesses misunderstand PWAs, sometimes treating them as separate products or focusing on single features like push notifications. The post argues that the focus should shift from "apps" to user experience. It proposes a set of principles for modern web experiences: discoverable, safe, fast, smooth, reliable, and meaningful. These principles aim to guide developers towards building better web experiences that naturally embody the core values of PWAs, benefiting both users and businesses.
I've created a Progressive Web App using FFMPEG.js that applies device frames to Android screen recordings. I've also streamlined the ffmpeg.js build process. This opens up exciting possibilities for building powerful web apps for audio and video manipulation. Many existing web-based video tools are outdated and ad-heavy. I'm interested in creating smaller, focused PWAs, each performing a specific task efficiently. I'm planning to build several apps based on this, such as video trimming, format conversion, watermarking, resizing, and splicing. The codebase from my Device Frames project provides a good starting point. I invite others to collaborate on this effort.
In this follow-up post, I've revised my blog's Service Worker and caching strategy to address previous issues, particularly the Firefox incompatibility due to the use of waitUntil and a misunderstanding of cache.put. The updated strategy now correctly fetches from the network, caches the result, and serves content from the cache, falling back to the network request if not found. The code has also been improved for readability and reliability.
This blog post discusses the implementation of a Service Worker for my blog, with a focus on the caching strategy. I've chosen a "Stale While Revalidate" approach, which prioritizes speed and resilience. The Service Worker intercepts network requests and serves cached content if available, while simultaneously fetching updated content in the background. This ensures the latest version is available after one refresh. The post also details the requirements considered when choosing this strategy, including development simplicity and compatibility with the existing hosting setup (Hugo and NGINX). The provided JavaScript code snippet demonstrates the Service Worker implementation.
This post explores using WebTorrent for serverless data synchronization in web apps, demonstrated by modifying the Voice Memos PWA. The goal was to enable data sharing between devices without a backend server. The solution involves generating magnet URLs that allow peer-to-peer data transfer via WebTorrent. The demo app allows recording audio, saving it locally, and generating a shareable magnet link for access on other devices. This approach offers an interesting alternative to traditional client-server models, especially for scenarios where scalability and serverless operation are desired.
I've spent this week in India doing more research about Web Development in India and how mobile is changing that. Publically at least it is not rosey, app development and app thinking is very high whislt building for the web with mobile in mind is very low.
AppCache, while crucial for offline web apps, has significant issues. One major problem arises when integrating with APIs like registerProtocolHandler or registerContentHandler, which use query parameters. AppCache caches each unique URI, including query strings, separately. This is fine online, but offline, only previously cached URIs with specific query strings will work. Updating the app cache also causes every unique URL stored in the app cache group to be re-downloaded, even if they're not in the current manifest, potentially leading to server overload. This post highlights these issues and calls for better documentation and patterns for offline app development.
