Offline application

Web applications can not only cache resource files (HTML, CSS, JS scripts, pictures, etc.) in the browser, but also store the application itself in the browser.

The cached resource files must be used online. The local cache can only be used after the web page is loaded from the server; however, once the application is stored, it can be used offline. In addition, the user routinely clears the browser cache and does not clear the stored applications unless the user explicitly uninstalls or deletes them.

In order to enable offline storage, a manifest file must be created. This file lists all the files that need to be stored.

CACHE MANIFEST myapp.html myapp.js myapp.css images/background.png

The first line of the Manifest file must be CACHE MANIFEST. Then, each line lists a file that needs to be stored, and their locations are relative to the location of the Manifest file. Blank lines will be ignored, and lines beginning with # are comments and will also be ignored.

The suffix of this file is usually .appcache. Its MIME type must be text/cache-manifest. If the server sets it to another type, it will not be cached by the browser.

After writing this file, point the manifest attribute of the <html> element to it. When the browser loads this webpage, it will read the Manifest file and store this webpage and related resources offline.

<!DOCTYPE html>
<html manifest="myapp.appcache">
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

If a web application has multiple web pages that need to be stored offline, then each web page should have the manifest attribute point to this file. Once stored, when the web page is loaded later, it will be loaded from the cache. At this time, only the files listed in the Manifest file will be loaded, other files will not. If the browser is online at this time, the browser will check whether there is a new version of the Manifest file, and if there is a new version, it will re-save and update the resources listed in the file. The most convenient way is to list the version number with comments in the Manifest file.

CACHE MANIFEST # MyApp version 1 MyApp.html MyApp.js

If you need to delete offline storage, just delete the Manifest file and let it return a 404 status code.

The completion of offline storage update will trigger the browser's updateready event, and you can specify a listener function for this event.

window.applicationCache.onupdateready = function () {
  var reload = confirm(
    "The download of the new version is complete. Do you need to reload?"
  );
  if (reload) location.reload();
};

Scripts can register listener functions for online and offline events, and use the navigator.onLine property to determine whether the browser is online for data synchronization.

Every time the browser loads a webpage with the manifest attribute, the browser will trigger a checking event and then load the Manifest file.

  • If the application has been saved and the Manifest file has not changed, the noupdate event will be triggered.
  • If the application has been saved and the Manifest file has changed, the downloading event will be triggered and the browser will download all offline resources again. During the download process, the progress event is triggered, and the end of the download triggers the updateready event.
  • If the application is not stored, the cached event will be triggered when the download is completed.
  • If you are offline and cannot check the Manifest file, the browser will trigger an error event.
  • If the browser is online and the application has been stored, but the Manifest file returns 404, the browser triggers the obsolete event to remove the stored application.

All these events can be cancelled. The listener function can return false to cancel the default actions for these events.

The applicationCache. status property returns the status of offline storage.

  • ApplicationCache.UNCACHED (0) This application does not have a manifest attribute: it is not cached.
  • ApplicationCache.IDLE (1) The manifest has been checked and this application is cached and up to date.
  • ApplicationCache.CHECKING (2) The browser is checking the manifest file.
  • ApplicationCache.DOWNLOADING (3) The browser is downloading and caching files listed in the manifest.
  • ApplicationCache.UPDATEREADY (4) A new version of the application has been downloaded and cached.
  • ApplicationCache.OBSOLETE (5) The manifest no longer exists and the cache will be deleted.