MediaWiki PWA Example

head.html

<link rel="manifest" href="manifest.webmanifest">

manifest.webmanifest

{
  "name": "Wiki",
  "short_name": "Wiki",
  "theme_color": "blue",
  "background_color": "white",
  "display": "standalone",
  "scope": "/",
  "start_url": "/wiki/Main_Page",
  "dir": "ltr",
  "lang": "en",
  "icons": [
    {
      "src": "/wiki.png",
      "sizes": "144x144"
   }
 ]
}

sw.js

const staticCacheName = 'Wiki';
const assets = [
  "/w/load.php/..."
];

self.addEventListener("install", (evt) => {
  evt.waitUntil(
    caches.open(staticCacheName).then((cache) => {
      console.log("Caching shell assets...");
      cache.addAll(assets);
    })
  );
});

self.addEventListener("activate", (evt) => {
  evt.waitUntil(
    caches.keys().then((keys) => {
      return Promise.all(
        keys
          .filter((key) => key !== staticCacheName)
          .map((key) => caches.delete(key))
      );
    })
  );
});

self.addEventListener("fetch", (evt) => {
  evt.respondWith(
    caches.match(evt.request).then((cacheRes) => {
      return cacheRes || fetch(evt.request);
    })
  );
});