How I Made PdfWord Work Fully Offline as a PWA

Building PdfWord as a free, no-backend PDF tools site, it became evident that making it work completely offline was not an afterthought but an inherent aspect of its architecture. The tools perform their functions on the user's CPU, not on remote servers, making full offline functionality a natural outcome of the design.

This project consisted of two main components: a manifest.json (defining the app's appearance and behavior) and a service worker (a script intercepting network requests to serve cached files). With no server to connect to, the service worker simply needed to make offline files accessible. The manifest was designed to enhance user experience, including adding app shortcuts and a share target.

During the development process, a significant mistake was made in the precaching strategy. Initially, the service worker attempted to precache all libraries, leading to excessively slow loading times on low-end devices. To remedy this, the strategy was changed to precache only the essential app shell (~120KB), dynamically downloading and caching heavy libraries (like SheetJS) only upon their first use. This approach ensures users only download necessary resources, improving performance and user experience.

The cache strategy implemented two rules: a network-first approach for HTML pages, serving fresh content, and a cache-first approach for static assets (JavaScript and CSS), which are rarely changed. This approach ensures that stale pages are avoided while static assets are served quickly and reliably. Additionally, a version-bump discipline was established – any change in the service worker file necessitates a version update in the source sw.js, which is then copied to the exact staged path for verification and deployment.

This meticulous process prevents the serving of stale files, ensuring the app always serves the latest version.

A key limitation of this approach is that the first visit requires internet access, as the offline files must initially be downloaded. Furthermore, on iOS, the app installation requires users to add the site to their home screen rather than through a traditional store. Despite these limitations, the benefits are significant: users can perform tasks like merging PDFs in airplane mode, with no server involvement.

The demonstration of this concept is straightforward: install PdfWord on your home screen, enable airplane mode, and merge PDFs. This not only showcases the offline capabilities but also highlights the complete elimination of server dependence, making the tool robust and reliable in any network environment.