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.
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>