3

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?

Improve this question
3
  • It could be as simple as a big cache that sits between your PWA frontend and the server backend. That cache would live on the frontend device.
    – Robert Harvey
    Commented Feb 3, 2021 at 22:23
  • How reliable is the cache? It seems like it could be unpredictable when cache files will get deleted.
    – frownyface
    Commented Feb 4, 2021 at 1:00
  • If you follow Google's CodeLab for PWA, you will see that there are different caching strategies. Basically, the SW check if the content is already cached (in the browser, not the file system) and download it if not. You have tho to set which URLs must be cached. If you want to download the whole site, you have to make a crawler or hardcode every single URL of the site. Assets included.
    – Laiv
    Commented Feb 4, 2021 at 8:12

2 Answers 2

Reset to default
2

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.

Improve this answer
2
  • This answers the question more correctly, but should really be less link-salad and more content, FWIW. (Not that you should refer to fewer sources; just a little more detail around the links would be better.)
    – svidgen
    Commented Sep 6 at 15:36
  • @svidgen Feel free to edit to add more "details" or examples.
    – Kissaki
    Commented Sep 8 at 9:49
1

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.

Improve this answer
5
  • Thank you for the very informative answer! I think I understood the "installation" part and the caching done by the service worker. Your response helped expand on those ideas a lot for me (SWs, PWA desktop shortcut, and caching), so thank you! What I was trying to ask (but might have not effectively communicated) is letting the user download the html files/site assets, but still letting the user access it through that PWA-like shortcut. It seems that you touched on that in your comment to the question. Would you be able to expand on that? Thank you!
    – frownyface
    Commented Feb 6, 2021 at 2:32
  • Theres's no "files download". It's just http response caching. You will never get the web app downloaded. Content is either cached (browser caché/store) or remote. Remove the word download from the equation because is missleading. I had the same doubts the first time because there's too much marketing and fancy words. It's easier to grasp when you follow the Code Lab,
    – Laiv
    Commented Feb 6, 2021 at 8:20
  • Thank you again for the response! I see what you are saying. I am letting the users downloading a zip file on my site. So, separately from the PWA, users will be able to have the site files locally. So I was wondering if there was a way the PWA could access said files. The goal I was hoping to achieve is for the user to interact with those files through a PWA-like shortcut and maybe even take advantage of the ways a PWA can change the UI a little of the browser (full-screen). Does that provide any clarification or was your answer/comment addressing that already?
    – frownyface
    Commented Feb 7, 2021 at 18:07
  • Yes. It does. Sadly, the downloaded site, once opnened, it does under a different domain/context (localhost) what turns the site into a different application from the browser point of view. You could edit the shortcut to change the routes of the manifest and the entry point, but that's it. And it has to be done by the user, manually because only he knows where the site is.
    – Laiv
    Commented Feb 7, 2021 at 18:14
  • 4
    This answer is misleading. It is possible to have offline PWA. For example, can use service workers to host the content: developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/…
    – ZenoArrow
    Commented Jan 8 at 19:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.