为网站开启 PWA

开启 PWA 需要三个部分：一个 JS 文件，一个 HTML 文件，一个 manifest 文件。我的网站使用 Hugo 构建。

JS 文件：

    /**
      References:

      1. https://developers.google.com/web/fundamentals/primers/service-workers
      2. https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook
      3. https://googlechrome.github.io/samples/service-worker/
      4. https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
      5. https://serviceworke.rs/
      6. https://www.youtube.com/watch?v=baSiSIyTGSk
    */

    const RUNTIME = "runtime";

    self.skipWaiting();

    self.addEventListener("fetch", (event) => {
      // Do nothing if not the same origin
      if (!event.request.url.startsWith(self.location.origin)) {
        return;
      }

      // Network first strategy
      event.respondWith(
        (async () => {
          const cache = await caches.open(RUNTIME);

          try {
            const networkResponse = await fetch(event.request);

            // Save/Update cache if network response is ok
            if (networkResponse && networkResponse.status === 200) {
              cache.put(event.request, networkResponse.clone());
            }

            return networkResponse;
          } catch (e) {
            const cachedResponse = await cache.match(event.request);

            return cachedResponse;
          }
        })()
      );
    });

HTML 文件：

    {{ if and .Site.Params.enableServiceWorker (eq hugo.Environment "production") }}
        {{- $sw := resources.Get "js/sw.js" -}}
        {{- $dummy := "" | resources.FromString "dummy.js" -}}
        {{- $url := (slice $sw $dummy | resources.Concat "sw.js").RelPermalink -}}

        <script>
            if ('serviceWorker' in navigator) {
                window.addEventListener('load', function() {
                    navigator.serviceWorker.register('{{ $url }}');
                });
            }
        </script>
    {{ end }}

manifest 文件：

    {
      "name": "一大加贝",
      "icons": [
        {
          "src": "/android-chrome-192x192.png",
          "type": "image/png",
          "sizes": "192x192",
          "purpose": "maskable"
        },
        {
          "src": "/android-chrome-512x512.png",
          "sizes": "512x512",
          "type": "image/png"
        }
      ],
      "start_url": "/?source=pwa",
      "theme_color": "#fff",
      "background_color": "#fff",
      "display": "standalone",
      "orientation": "portrait-primary"
    }

最后把以上三个文件导入网站中即可。

ref: