PWA functionality including offline mode (featured flagged)

[microbit-robert]

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.

[github-actions[bot]]

Preview build will be at https://review-python-editor-v3.microbit.org/pwa/

[microbit-matt-hillsdon]

all available languages are precached

Does that mean everyone pays the cost of every language now? Before interactivity or after/in the background?

[microbit-robert]

all available languages are precached

Does that mean everyone pays the cost of every language now? Before interactivity or after/in the background?

For this version, yes. We need to be more specific in what we precache. Maybe nothing language specific and save that for runtime. It does feel like the plugin might not suit our needs. We'll either end up creating just the service worker from scratch, or ditch the plugin and do everything from scratch.

Edit: This has now been resolved by using a mixture of precaching for our fallback language (English) and runtime caching for all other languages.

[microbit-robert]

Toast shown when changing language while offline and language assets are not already cached. Text is a working placeholder and needs discussion.

[microbit-matt-hillsdon]

This feels a bit odd when in PWA mode as there's no obvious affordance to reload the page. Ideally we'd find a more neutral phrasing.

Perhaps it's best not to change the user's language in this circumstance? That removes the English bias and prevents the weird app state of having chosen but not used a language. So maybe:

Language not available offline

Make sure you are online then try again.

[microbit-matt-hillsdon]

I'll merge this tomorrow when I'm more available for any fallout.

[microbit-matt-hillsdon]

This isn't working in practice as we used scoped service workers but the scope is /v/beta/ but typically access is at /v/beta for staging/production. Ideally we wouldn't redirect to the less pretty URLs.

We could register against a slashless scope by adding a header. It's a prefix match so that's a bit awkward, e.g. /v/3 would also match /v/31 and /v/beta would match /v/betamax. The former seems worth some consideration. Alternatively we just have one and accept the extra reload when switching between versions.

[microbit-matt-hillsdon]

We could register against a slashless scope by adding a header. It's a prefix match so that's a bit awkward

We did this and it now seems to be working. Still behind the flag you need to set in localStorage.