PWA functionality including offline mode (featured flagged) (#1170)

Notable behaviours: - Fallback to English when changing language offline (when the selected language assets aren’t cached). - Shows image placeholders for uncached images when offline. - The app will automatically trigger a page reload when it detects the service worker has been updated. The service worker is updated when any of the build assets are updated. There are two levels of feature gating: - It's only enabled for microbit-foundation builds to avoid others shipping it accidentally. You can change FEATURE_PWA in the build to change this. We're open to a better system of build-time feature flags if there's interest (at least allowing existing env vars to override would make sense). - There's a client side feature flag. You have to set this via `localStorage.setItem("flags", "pwa")` for now if you want to test an actual PWA install. We'll default that flag on to release to the beta after building more confidence internally. Known issues: - The app name is too long for the iOS home screen and is truncated by eliding the space between micro:bit and Python then a .... It works fine when you open it. We'll discuss whether it's reasonable to address this or live with it. It doesn't seem to be related to the colon in micro:bit and the user can customise the app name.
microbit-foundation · May 30, 2024 · 340e5bb · 340e5bb
1 parent b727b8a
commit 340e5bb
Show file tree

Hide file tree

Showing 45 changed files with 2,934 additions and 174 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' }}
+ # This feature is also controlled by a client-side feature flag that is disabled by default for the moment
+ FEATURE_PWA: ${{ github.repository_owner == 'microbit-foundation' }}
 
  steps:
  # Note: This workflow disables deployment steps and micro:bit branding installation on forks.

diff --git a/index.html b/index.html
@@ -3,9 +3,14 @@
  <head>
  <meta charset="utf-8" />
  <link rel="icon" href="%BASE_URL%favicon.ico" />
+ <link rel="apple-touch-icon" href="%BASE_URL%logo512.png" sizes="512x512" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#6c4bc1" />
  <title>micro:bit Python Editor</title>
+ <meta
+ name="description"
+ content="A Python Editor for the BBC micro:bit, built by the Micro:bit Educational Foundation and the global Python Community."
+ />
  <meta property="og:title" content="micro:bit Python Editor" />
  <meta
  property="og:description"

diff --git a/lang/ui.ca.json b/lang/ui.ca.json
@@ -510,6 +510,10 @@
  "defaultMessage": "Has d'<link>actualitzar el teu microprogramari</link> abans de poder connectar amb aquesta micro:bit.",
  "description": "Text in the no micro:bit found dialog"
  },
+ "offline-image-alt": {
+ "defaultMessage": "Image unavailable offline",
+ "description": "Alt text for an image placeholder when the user is offline"
+ },
  "open-action": {
  "defaultMessage": "Obert",
  "description": "Open button text"

diff --git a/lang/ui.de.json b/lang/ui.de.json
@@ -510,6 +510,10 @@
  "defaultMessage": "Du musst <link>die Firmware aktualisieren</link>, bevor eine Verbindung zu diesem micro:bit hergestellt werden kann.",
  "description": "Text in the no micro:bit found dialog"
  },
+ "offline-image-alt": {
+ "defaultMessage": "Image unavailable offline",
+ "description": "Alt text for an image placeholder when the user is offline"
+ },
  "open-action": {
  "defaultMessage": "Öffnen",
  "description": "Open button text"

diff --git a/lang/ui.en.json b/lang/ui.en.json
@@ -511,6 +511,10 @@
  "defaultMessage": "You must <link>update your firmware before</link> you can connect to this micro:bit.",
  "description": "Text in the no micro:bit found dialog"
  },
+ "offline-image-alt": {
+ "defaultMessage": "Image unavailable offline",
+ "description": "Alt text for an image placeholder when the user is offline"
+ },
  "open-action": {
  "defaultMessage": "Open",
  "description": "Open button text"

diff --git a/lang/ui.es-es.json b/lang/ui.es-es.json
@@ -510,6 +510,10 @@
  "defaultMessage": "Debes <link>actualizar el firmware</link> para poder conectar a este micro:bit.",
  "description": "Text in the no micro:bit found dialog"
  },
+ "offline-image-alt": {
+ "defaultMessage": "Image unavailable offline",
+ "description": "Alt text for an image placeholder when the user is offline"
+ },
  "open-action": {
  "defaultMessage": "Abrir",
  "description": "Open button text"

diff --git a/lang/ui.fr.json b/lang/ui.fr.json
@@ -510,6 +510,10 @@
  "defaultMessage": "Vous devez <link>mettre à jour le micrologiciel</link> avant de pouvoir vous connecter à ce micro:bit.",
  "description": "Text in the no micro:bit found dialog"
  },
+ "offline-image-alt": {
+ "defaultMessage": "Image unavailable offline",
+ "description": "Alt text for an image placeholder when the user is offline"
+ },
  "open-action": {
  "defaultMessage": "Ouvrir",
  "description": "Open button text"

diff --git a/lang/ui.ja.json b/lang/ui.ja.json
@@ -510,6 +510,10 @@
  "defaultMessage": "このmicro:bitに接続するには、<link>ファームウェアを更新</link>する必要があります。",
  "description": "Text in the no micro:bit found dialog"
  },
+ "offline-image-alt": {
+ "defaultMessage": "Image unavailable offline",
+ "description": "Alt text for an image placeholder when the user is offline"
+ },
  "open-action": {
  "defaultMessage": "開く",
  "description": "Open button text"

diff --git a/lang/ui.ko.json b/lang/ui.ko.json
@@ -510,6 +510,10 @@
  "defaultMessage": "이 micro:bit에 연결하기 전에 <link>펌웨어를 업데이트</link>해야 합니다.",
  "description": "Text in the no micro:bit found dialog"
  },
+ "offline-image-alt": {
+ "defaultMessage": "Image unavailable offline",
+ "description": "Alt text for an image placeholder when the user is offline"
+ },
  "open-action": {
  "defaultMessage": "열기",
  "description": "Open button text"

diff --git a/lang/ui.nl.json b/lang/ui.nl.json
@@ -510,6 +510,10 @@
  "defaultMessage": "Je moet <link>firmware updaten voordat</link> je verbinding kan maken met deze micro:bit.",
  "description": "Text in the no micro:bit found dialog"
  },
+ "offline-image-alt": {
+ "defaultMessage": "Image unavailable offline",
+ "description": "Alt text for an image placeholder when the user is offline"
+ },
  "open-action": {
  "defaultMessage": "Open",
  "description": "Open button text"

diff --git a/lang/ui.zh-cn.json b/lang/ui.zh-cn.json
@@ -510,6 +510,10 @@
  "defaultMessage": "您必须 <link>update your firmware before</link> 才能连接到此 micro:bit。",
  "description": "Text in the no micro:bit found dialog"
  },
+ "offline-image-alt": {
+ "defaultMessage": "Image unavailable offline",
+ "description": "Alt text for an image placeholder when the user is offline"
+ },
  "open-action": {
  "defaultMessage": "打开",
  "description": "Open button text"

diff --git a/lang/ui.zh-tw.json b/lang/ui.zh-tw.json
@@ -510,6 +510,10 @@
  "defaultMessage": "您必須<link>更新您的韌體</link>，然後才能連線至此 micro:bit。",
  "description": "Text in the no micro:bit found dialog"
  },
+ "offline-image-alt": {
+ "defaultMessage": "Image unavailable offline",
+ "description": "Alt text for an image placeholder when the user is offline"
+ },
  "open-action": {
  "defaultMessage": "開啟",
  "description": "Open button text"