@docusaurus/plugin-pwa 2.0.0-beta.1ec2c95e3 → 2.0.0-beta.21

package/src/{sw.js → sw.ts}

@@ -6,11 +6,11 @@
  */
 /* eslint-disable no-restricted-globals */
 
-import {PrecacheController} from 'workbox-precaching';
+import {PrecacheController, type PrecacheEntry} from 'workbox-precaching';
 
 function parseSwParams() {
   const params = JSON.parse(
-    new URLSearchParams(self.location.search).get('params'),
+    new URLSearchParams(self.location.search).get('params')!,
   );
   if (params.debug) {
     console.log('[Docusaurus-PWA][SW]: Service Worker params:', params);
@@ -18,11 +18,11 @@ function parseSwParams() {
   return params;
 }
 
-// doc advise against dynamic imports in SW
+// Doc advises against dynamic imports in SW
 // https://developers.google.com/web/tools/workbox/guides/using-bundlers#code_splitting_and_dynamic_imports
 // https://twitter.com/sebastienlorber/status/1280155204575518720
-// but I think it's working fine as it's inlined by webpack, need to double check?
-async function runSWCustomCode(params) {
+// but looks it's working fine as it's inlined by webpack, need to double check
+async function runSWCustomCode(params: {offlineMode: boolean; debug: boolean}) {
   if (process.env.PWA_SW_CUSTOM) {
     const customSW = await import(process.env.PWA_SW_CUSTOM);
     if (typeof customSW.default === 'function') {
@@ -38,49 +38,43 @@ async function runSWCustomCode(params) {
 /**
  * Gets different possible variations for a request URL. Similar to
  * https://git.io/JvixK
- *
- * @param {string} url
  */
-function getPossibleURLs(url) {
-  const possibleURLs = [];
+function getPossibleURLs(url: string) {
   const urlObject = new URL(url, self.location.href);
 
   if (urlObject.origin !== self.location.origin) {
-    return possibleURLs;
+    return [];
   }
 
   // Ignore search params and hash
   urlObject.search = '';
   urlObject.hash = '';
 
-  // /blog.html
-  possibleURLs.push(urlObject.href);
-
-  // /blog/ => /blog/index.html
-  if (urlObject.pathname.endsWith('/')) {
-    possibleURLs.push(`${urlObject.href}index.html`);
-  } else {
+  return [
+    // /blog.html
+    urlObject.href,
+    // /blog/ => /blog/index.html
     // /blog => /blog/index.html
-    possibleURLs.push(`${urlObject.href}/index.html`);
-  }
-
-  return possibleURLs;
+    `${urlObject.href}${urlObject.pathname.endsWith('/') ? '' : '/'}index.html`,
+  ];
 }
 
 (async () => {
   const params = parseSwParams();
 
-  const precacheManifest = self.__WB_MANIFEST;
+  // eslint-disable-next-line no-underscore-dangle
+  const precacheManifest = (
+    self as typeof globalThis & {__WB_MANIFEST: (string | PrecacheEntry)[]}
+  ).__WB_MANIFEST;
   const controller = new PrecacheController({
-    fallbackToNetwork: true, // safer to turn this true?
+    // Safer to turn this true?
+    fallbackToNetwork: true,
   });
 
   if (params.offlineMode) {
     controller.addToCacheList(precacheManifest);
     if (params.debug) {
-      console.log('[Docusaurus-PWA][SW]: addToCacheList', {
-        precacheManifest,
-      });
+      console.log('[Docusaurus-PWA][SW]: addToCacheList', {precacheManifest});
     }
   }
 
@@ -88,31 +82,30 @@ function getPossibleURLs(url) {
 
   self.addEventListener('install', (event) => {
     if (params.debug) {
-      console.log('[Docusaurus-PWA][SW]: install event', {
-        event,
-      });
+      console.log('[Docusaurus-PWA][SW]: install event', {event});
     }
-    event.waitUntil(controller.install(event));
+    (event as ExtendableEvent).waitUntil(
+      controller.install(event as ExtendableEvent),
+    );
   });
 
   self.addEventListener('activate', (event) => {
     if (params.debug) {
-      console.log('[Docusaurus-PWA][SW]: activate event', {
-        event,
-      });
+      console.log('[Docusaurus-PWA][SW]: activate event', {event});
     }
-    event.waitUntil(controller.activate(event));
+    (event as ExtendableEvent).waitUntil(
+      controller.activate(event as ExtendableEvent),
+    );
   });
 
   self.addEventListener('fetch', async (event) => {
     if (params.offlineMode) {
-      const requestURL = event.request.url;
+      const requestURL = (event as FetchEvent).request.url;
       const possibleURLs = getPossibleURLs(requestURL);
-      for (let i = 0; i < possibleURLs.length; i += 1) {
-        const possibleURL = possibleURLs[i];
+      for (const possibleURL of possibleURLs) {
         const cacheKey = controller.getCacheKeyForURL(possibleURL);
         if (cacheKey) {
-          const cachedResponse = caches.match(cacheKey);
+          const cachedResponse = caches.match(cacheKey) as Promise<Response>;
           if (params.debug) {
             console.log('[Docusaurus-PWA][SW]: serving cached asset', {
               requestURL,
@@ -122,7 +115,7 @@ function getPossibleURLs(url) {
               cachedResponse,
             });
           }
-          event.respondWith(cachedResponse);
+          (event as FetchEvent).respondWith(cachedResponse);
           break;
         }
       }
@@ -131,15 +124,14 @@ function getPossibleURLs(url) {
 
   self.addEventListener('message', async (event) => {
     if (params.debug) {
-      console.log('[Docusaurus-PWA][SW]: message event', {
-        event,
-      });
+      console.log('[Docusaurus-PWA][SW]: message event', {event});
     }
 
-    const type = event.data && event.data.type;
+    const type = (event as MessageEvent).data?.type;
 
     if (type === 'SKIP_WAITING') {
-      self.skipWaiting();
+      // lib def bug, see https://github.com/microsoft/TypeScript/issues/14877
+      (self as typeof globalThis & ServiceWorkerGlobalScope).skipWaiting();
     }
   });
 })();

package/src/theme/PwaReloadPopup/index.tsx

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {useState} from 'react';
+import clsx from 'clsx';
+import Translate, {translate} from '@docusaurus/Translate';
+import type {Props} from '@theme/PwaReloadPopup';
+
+import styles from './styles.module.css';
+
+export default function PwaReloadPopup({onReload}: Props): JSX.Element | false {
+  const [isVisible, setIsVisible] = useState(true);
+
+  return (
+    isVisible && (
+      <div className={clsx('alert', 'alert--secondary', styles.popup)}>
+        <p>
+          <Translate
+            id="theme.PwaReloadPopup.info"
+            description="The text for PWA reload popup">
+            New version available
+          </Translate>
+        </p>
+        <div className={styles.buttonContainer}>
+          <button
+            className="button button--link"
+            type="button"
+            onClick={() => {
+              setIsVisible(false);
+              onReload();
+            }}>
+            <Translate
+              id="theme.PwaReloadPopup.refreshButtonText"
+              description="The text for PWA reload button">
+              Refresh
+            </Translate>
+          </button>
+
+          <button
+            aria-label={translate({
+              id: 'theme.PwaReloadPopup.closeButtonAriaLabel',
+              message: 'Close',
+              description:
+                'The ARIA label for close button of PWA reload popup',
+            })}
+            className="close"
+            type="button"
+            onClick={() => setIsVisible(false)}>
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+      </div>
+    )
+  );
+}

package/src/types.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/// <reference types="@docusaurus/module-type-aliases" />