4

I'm hosting a single-HTML web page (all design elements included in the .html file itself) on my webserver, and I'd like to make it available for my users when they are offline. It should work like this: when the user is online, he visits my web page, Chrome saves the .html file locally; when the user is offline and he tries to visit my web page, Chrome is using the local .html file instead. JavaScript must work on the webpage even in offline mode. The user must never see a You are offline error message when visiting my page, and the saved copy of my page mustn't expire from the browser's cache for at least 2 weeks. Everything must work automatically for the user, no need to change Chrome settings and no need to install Chrome extensions. Is this possible?

The included JavaScript is smart enough to use window.localStorage to save data, and sync it with the server as soon as the user is online again.

pts
  • 80,836
  • 20
  • 110
  • 183

2 Answers2

1

I have never done this myself but you can use the Cache API (part of the service-worker API) to store URL addressable resources (like a html file).

You can set the HTTP headers so it expires after 2 weeks or more. But if someone clears their cache (like sometimes if deleting their browser history) it will disappear.

https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa

Here is a guide ---> https://davidwalsh.name/cache

Charlie Lynch
  • 383
  • 3
  • 6
  • THank you for these pointers. By reading those pages it's still not obvious what I should put to my .html file to make it happen. Those pages seem to describe something more complex. – pts Aug 21 '17 at 13:56
0

This page seems to be doing it: https://chris.bolin.co/offline/. It works in Firefox and Chrome. In Chrome it seems to be using service workers. Firefox 55 can also use service workers.

Service workers can use the cache API to download pages; but the cache API doesn't use the user's cookies in Firefox, so what is getting cached can be different from what the user sees.

In Firefox, offline mode can be enabled (forced) in File / Work Offline.

In Chrome, offline mode can be enabled (forced) for the current tab in the developer tools (Ctrl-Shift-J): in the Network tab, enable Offline.

In Firefox 55, offline caching seems to work by default (no need for manifest.json). Chrome needs service workers to make the page available offline.

Here is how to detect offline mode in JavaScript:

<script>document.write('navigator.onLine=' + navigator.onLine);</script>
pts
  • 80,836
  • 20
  • 110
  • 183