html – Take a multipage website offline

Question:

Assuming I have a website with several pages – for example a blog – I want to put an option so that those who visit it can have access to it without internet.

As not every device has constant access to the internet, and not every place has this possibility, this would allow the user to read a text while in one of these situations.

However, based on this there are some implications:

  • Is there a solution that requires less from the user? Instructing him to open the browser menu and save the page—an option that some mobile browsers don't—wouldn't be a good idea.
  • Is it possible to make this an option for the user? I don't want my site to make someone's internet usage deductible as soon as I open it loading all the articles on the site;
  • Is it possible for the user to select what he wants to save? For example, an article, or even a set of articles, that he was interested in reading;
  • Can images and videos in posts be saved?

Answer:

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

It is an API that allows you to add a manifest file that will control your application's cache. However, it is too extensive to explain in detail here how it works and how to use it.

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

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

As for selective file caching, what you must do is a dynamic manifest, so that certain options your user chooses will modify the manifest so that it caches the desired files. This will however cause it to reload all manifest files, so use with caution.

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

Scroll to Top