Possible to have completely offline PWA?

Question

I've been learning about Progressive Web Apps and how they can provide more offline functionality within a native app-like feel. I want to give users the option to download a whole site (all pages/resources/assets) but still have that native-app like feel. Is this possible?

From my current understanding through reading a lot of Mozilla's and Google's documentation, a PWA can be installed on the app launcher/home screen and use service workers to use caching to provide responses on slow connections/no network. I can't seem to wrap my head around the idea of letting a user download all the files for a informational site, but still accessing the site through an installed PWA. Would a service worker check if the files are locally installed using a file system API and return those pages instead? How would it know which directory to check?

Answer 1

To make a PWA available offline, you

1. Create and register a Service Worker
2. In the Service Worker
   1. Download all assets/pages into an offline cache
   2. Handle fetch events (HTTP Requests) by serving them from offline cache instead of the web

The Cache API uses requests as keys. You can use Cache match() to check if the Cache contains an entry for a request.

The Cache store is generally persistent. See the third paragraph on Cache and Storage quotas and eviction criteria for more information.

Making PWAs work offline with Service workers is a guide through the steps.

See also Offline and background operation and Caching.

Answer 2

From my current understanding through reading a lot of Mozilla's and Google's documentation, a PWA can be installed on the app launcher/home screen

No, there's not such a thing like "installation" in the native app sense. PWA are still web apps and as such, they will remain hosted remotely. You won't download more content than the response to the latest HTTP request.

What you get in your desktop is a shortcut. This shortcut opens a tab/window of the browser from which you "installed" the app. The tab settings such as colour, icon, size, headless, etc are in the Manifest, which is key for a full PWA experience.

I can't seem to wrap my head around the idea of letting a user download all the files for an informational site, but still accessing the site through an installed PWA.

Because it never gets downloaded.

Would a service worker check if the files are locally installed using a file system API and return those pages instead? How would it know which directory to check?

Think in ServiceWorkers (SW) as a man-in-the-middle. The SW is a script that gets registered in the browser and bound to a specific domain. It allows you to hook code addressed to handle certain events of the browser and its components (storage, video, camera, location, screen, speakers, etc). It doesn't interact with your client-side apps. From your web app client, everything happens behind the scenes.

Basically, what we do from the SW is a sort of AOP. We listen and handle events like a "request" to a given URL (or pattern) and before to proceed with a real call we first check the cache, which is not other than the browser storage or the IndexDB. No the file system. Or we ask for permissions to access to the camera, micro, etc.

The idea of the offline mode is downloading or fake specific content beforehand or the first time is requested, populate the cache with the latest version and serve the content from the cache or from the storage, whatever we use to store the content.

On the other hand, you have to design the UI accordingly, to provide a "native-wise" user experience.

For example, one practice is implementing templates to replace dynamic content when this last is not accessible. Templates are, basically, static content fulfilled with placeholders, cached after the SW registration and served when the SW handles certain errors or responses. This way the user "feels" like something is happening, the page is "loading", there's a spinning icon saying so instead of an ugly white page with an even uglier 404 Page not found or 504 Gateway error.

I strongly recommend starting with Google's codelab for the basics. Later, study each browser/version in detail to know the grade of compatibility with PWA, since PWA is highly exposed to what we know as browser segmentation.