Make a multipage website offline

In HTML5 there is the api Application Cache , which is exactly manipulate the cache to have an application that works in offline mode. Read it, which can be installed in the user's browser.

This is an API that allows you to add a manifest file that will control the cache of your application. However it is very extensive to explain in detail here how it works and how to use it.

In addition to the official specification I will leave some recommendation links for study :

• link
• link
• link

You can create an IFRAME with the manifest, thus installing your application by putting it on a button, you can also add the manifest only after the person performs an action on the page, such as clicking an install button, adding the manifest and saving in cookie so that when reloaded the manifest is automatically added when already installed.

As for selective file caching, what you should do is a dynamic manifest, so that certain options your user chooses will modify the manifest so that it will cache the files you want. But this will cause you to reload all of the manifest files, so use caution.

There are other, more impractical ways to manipulate the application system, but if you plan to use install and remove videos I recommend using IFRAME with exclusive manifest (in the case of Firefox each will ask permission to install the first time , which is described in the specification but other browsers do not yet respect).

Using the Application Cache introduced in HTML5 would be the first idea to be thought.
In a one or two page site this works well and does not detract from the user experience: there are few files to download, there are not many choices to make and no reason to worry about bandwidth.

However multi-page sites using it causes some problems: high traffic, many pages in the manifest, among others . But we can take advantage of the fact that they are usually generated by some program or script using data from some database: instead of storing with the generated HTML we use and store the data .

HTML5 has introduced various forms of data storage: basically every browser that supports the Application Cache will also support at least WebSQL or IndexedDB ( source ). With this we can store the data of the site - be they text, images or video - when the user requests and work with them regardless of an internet connection.

Using the FALLBACK option of the Application Cache all pages that are not in the manifest will be redirected to what you specify. So just redirect all the pages to one where they will be rendered by an MVC library: Few files in the manifest are enough.

If you are reading this in the future we already see that the Application Cache is being superseded by other technologies, the ServiceWorkers : instead of configuring a page, with a script in it that will generate the others, you use a SharedWorker to do so. This seems simple, but there are big changes: be controlled by JavaScript, without the need to use <iframe> s; the option to disable it if you want; the ability to use the connection when it is available and when not to use another data source.