Add feature and build flags to enable/disable pwa

microbit-foundation · Apr 29, 2024 · 7a36123 · 7a36123
1 parent c89afcd
commit 7a36123
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 49 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -24,6 +24,8 @@ jobs:
       STAGING_CLOUDFRONT_DISTRIBUTION_ID: E2ELTBTA2OFPY2
       REVIEW_CLOUDFRONT_DISTRIBUTION_ID: E3267W09ZJHQG9
       VITE_FOUNDATION_BUILD: ${{ github.repository_owner == 'microbit-foundation' }}
+      # Optionally disable the PWA config (service worker and web manifest)
+      # DISABLE_PWA: '1'
 
     steps:
       # Note: This workflow disables deployment steps and micro:bit branding installation on forks.

diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
@@ -0,0 +1,15 @@
+{
+  "name": "micro:bit Python Editor",
+  "short_name": "micro:bit Python Editor",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "lang": "en",
+  "scope": "/",
+  "description": "A Python Editor for the BBC micro:bit, built by the Micro:bit Educational Foundation and the global Python Community.",
+  "theme_color": "#6c4bc1",
+  "icons": [
+    { "src": "/logo512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "/logo192.png", "sizes": "192x192", "type": "image/png" }
+  ]
+}
diff --git a/src/flags.ts b/src/flags.ts
@@ -41,7 +41,14 @@ export type Flag =
    * Added to support user-testing and has the nice side-effect of disabling
    * the dialog for local development so is worth keeping for that use alone.
    */
-  | "noWelcome";
+  | "noWelcome"
+  /**
+   * Enables PWA behaviours.
+   *
+   * Registers the service worker and enables offline use.
+   * Injects the webmanifest which allows installation.
+   */
+  | "pwa";
 
 interface FlagMetadata {
   defaultOnStages: Stage[];
@@ -55,6 +62,7 @@ const allFlags: FlagMetadata[] = [
   { name: "dndDebug", defaultOnStages: [] },
   { name: "noLang", defaultOnStages: [] },
   { name: "noWelcome", defaultOnStages: ["local", "REVIEW"] },
+  { name: "pwa", defaultOnStages: [] },
 ];
 
 type Flags = Record<Flag, boolean>;

diff --git a/src/index.tsx b/src/index.tsx
@@ -8,36 +8,47 @@ import { createRoot } from "react-dom/client";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { registerSW } from "virtual:pwa-register";
+import { flags } from "./flags";
 
-registerSW({
-  immediate: true,
-  // Cache runtime resources on first load.
-  // See https://github.com/GoogleChromeLabs/pwa-wp/issues/180.
-  onRegisteredSW(_, registration) {
-    if (registration) {
-      registration.onupdatefound = function () {
-        const installingWorker = registration?.installing;
-        if (installingWorker) {
-          installingWorker.onstatechange = function () {
-            if (
-              installingWorker.state === "activated" &&
-              navigator.serviceWorker.controller
-            ) {
-              const urlsToCache = [
-                location.href,
-                ...performance.getEntriesByType("resource").map((r) => r.name),
-              ];
-              installingWorker.postMessage({
-                type: "CACHE_URLS",
-                payload: { urlsToCache },
-              });
-            }
-          };
-        }
-      };
-    }
-  },
-});
+if (flags.pwa) {
+  registerSW({
+    immediate: true,
+    // Cache runtime resources on first load.
+    // See https://github.com/GoogleChromeLabs/pwa-wp/issues/180.
+    onRegisteredSW(_, registration) {
+      // Inject webmanifest.
+      const link = document.createElement("link");
+      link.rel = "manifest";
+      link.href = "/manifest.webmanifest";
+      document.head.appendChild(link);
+
+      if (registration) {
+        registration.onupdatefound = function () {
+          const installingWorker = registration?.installing;
+          if (installingWorker) {
+            installingWorker.onstatechange = function () {
+              if (
+                installingWorker.state === "activated" &&
+                navigator.serviceWorker.controller
+              ) {
+                const urlsToCache = [
+                  location.href,
+                  ...performance
+                    .getEntriesByType("resource")
+                    .map((r) => r.name),
+                ];
+                installingWorker.postMessage({
+                  type: "CACHE_URLS",
+                  payload: { urlsToCache },
+                });
+              }
+            };
+          }
+        };
+      }
+    },
+  });
+}
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/vite.config.ts b/vite.config.ts
@@ -55,6 +55,7 @@ export default defineConfig(({ mode }) => {
       react(),
       svgr(),
       VitePWA({
+        disable: process.env.DISABLE_PWA === "1",
         registerType: "autoUpdate",
         workbox: {
           // Only precache language assets for the fallback language.
@@ -125,25 +126,10 @@ export default defineConfig(({ mode }) => {
             },
           ],
         },
-        manifest: {
-          name: "micro:bit Python Editor",
-          short_name: "micro:bit Python Editor",
-          description:
-            "A Python Editor for the BBC micro:bit, built by the Micro:bit Educational Foundation and the global Python Community.",
-          theme_color: "#6c4bc1",
-          icons: [
-            {
-              src: `${process.env.BASE_URL ?? "/"}logo512.png`,
-              sizes: "512x512",
-              type: "image/png",
-            },
-            {
-              src: `${process.env.BASE_URL ?? "/"}logo192.png`,
-              sizes: "192x192",
-              type: "image/png",
-            },
-          ],
-        },
+        // See manifest.webmanifest in public/
+        // It has been split out so we can inject it if enabled
+        // via feature flag.
+        manifest: false,
       }),
     ],
     test: unitTest,