Offline support (ask.chaipat.cc)

The offline support of ask.chaipat.cc is a service worker in sw.js. Deterministic entity/resource lookup and local graph/wiki answers run in the browser, so caching the page, its complete module dependencies and the knowledge graph keeps those paths working without a connection. Logging, votes and mail still need the network.

• The page shell (the start page, every startup module, the styles and the prebuilt graph) is cached when the service worker installs. It registers only once the page is idle, and takes these files from the browser's own cache where it can, so a first visit downloads nothing twice.
• Pages, the graph and the wiki are fetched from the network first, so updates arrive at once, with the cached copy used when offline or slow.
• Scripts and styles are also network first, so a new page never runs with old scripts after a deploy.
• The search index, wiki articles and pictures are cached the first time they are used, so what a visitor has read or searched stays readable offline.
• API requests for logging, votes and mail need the network and are never cached. Typing a question can still use the local answer path while offline once the search index has been cached; opening an external product or repository requires access to that site.

Loading on demand

The start page asks for only what it shows: the page, its modules and the graph. The search index (data/wiki/search.json and the Wikipedia summaries, about 115 KB compressed) is fetched when the visitor heads for the search box or one of the ways in, and at once on a results, wiki or other inner page. The page's head lists every module and data file it will need (modulepreload and preload), so they download together while the HTML is still arriving rather than one import after another.

Adding a startup import requires adding it to the precache list and to the page's preload list, and bumping the service-worker cache version, so an existing installation installs the new dependency and retires its old cache. The graph and index use network-first requests with cached fallback, including when opened through a previously unvisited wiki route.

@prefix id: <https://ask.chaipat.cc/id/> .
@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix cj: <https://ask.chaipat.cc/ns#> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .

id:SiteOffline
    a cj:Component ;
    rdfs:label "Offline support (ask.chaipat.cc)" ;
    cj:shortLabel "Offline support" ;
    cj:componentOf id:ThisSite ;
    cj:sourceFile "sw.js" ;
    cj:uses id:JavaScript ;
    cj:description "A service worker that keeps the page, its scripts, the knowledge graph and every wiki article in a cache, so the site keeps answering without a connection." ;
    cj:implements id:ServiceWorker ;
    cj:article "https://ask.chaipat.cc/wiki/SiteOffline"^^xsd:anyURI ;
    cj:implementationDigest "sha256:eecca37441bf8b8d1c57bd2f3e2e09876549ba6e5cc45b57ee90ee7db4650dfc" .