Feature: @webdoc/default-template service worker

[ShukantPal]

Synopsis

This PR adds a service worker to the sites generated by the default template to

• cache all core assets (CSS & JavaScript)
• add support for a offline storage setting (in the new settings page)

It also adds an IndexedDB layer that holds the manifest data. The manifest is used to get all the pages in the site to be cached.

Service Worker

The protocol/ folder in the site source contains the interface b/w the main & service-worker threads.

• webdocService lets the main application initialize and pass messages to the service worker.
• webdocDB is a wrapper around IndexedDB for data persistence. The "settings" store holds the application settings and the manifest url & hash.

The service worker accepts 2 types of messages:

• "lifecycle:init" − This is to be sent whenever the manifest changes (or the site is loaded for the first time). The manifest hash is to be fetched on each page load to check for changes.
• "trigger:settings" − This lets the service worker know if a setting changed (like offline storage).

Caching

There are 2 types of caches:

• The main cache is permanent and holds the core assets like react, react-dom scripts & icons that are versioned or won't change.
• The ephemeral cache. This cache evicts items when the manifest hash changes, which is detected by attaching a "x-manifest-hash" header to cached responses and comparing it to the hash in the settings from IndexedDB (the exact settings object is found by the request origin).

The "offline storage" setting lets the user cache the whole website immediately (well all the pages in the manifest registry, which doesn't include things like README and settings pages). It's an opt-in setting; however, the service worker will cache each HTML page when the user visits them into the ephemeral cache anyway.

IndexedDB

There are 2 object stores in the current database model:

• "settings" − This holds the application settings (identified by the application name or the site origin). It holds the manifest hash and the manifest URL.
• "hyperlinks" − This holds all the documentation hyperlinks in the website. Offline storage uses it to identify which pages need to be cached.

UI

Toolbar in explorer & settings page

This toolbar has the new settings page link [button]

The settings page lets you toggle offline storage:

Toasts for offline / stale pages

These toasts let the user know if

• the page was served from their offline cache (i.e. verifying the manifest hash failed)
• the page is stale (the fetched hash was different from what was in IndexedDB).