Skip to content

Conversation

@microbit-robert
Copy link
Collaborator

@microbit-robert microbit-robert commented Apr 17, 2024

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
Copy link

github-actions bot commented Apr 17, 2024

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

@microbit-matt-hillsdon
Copy link
Collaborator

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
Copy link
Collaborator Author

microbit-robert commented Apr 18, 2024

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 microbit-robert changed the title [DRAFT - DO NOT MERGE] PWA attempt using vite pwa plugin [DRAFT - DO NOT MERGE] Add PWA functionality including offline mode Apr 24, 2024
@microbit-robert
Copy link
Collaborator Author

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

image

@microbit-matt-hillsdon microbit-matt-hillsdon marked this pull request as ready for review May 22, 2024 10:32
@microbit-matt-hillsdon
Copy link
Collaborator

microbit-matt-hillsdon commented May 29, 2024

image

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 microbit-matt-hillsdon changed the title [DRAFT - DO NOT MERGE] Add PWA functionality including offline mode PWA functionality including offline mode (featured flagged) May 29, 2024
@microbit-matt-hillsdon microbit-matt-hillsdon self-requested a review May 29, 2024 15:40
@microbit-matt-hillsdon
Copy link
Collaborator

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

@microbit-matt-hillsdon
Copy link
Collaborator

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
Copy link
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants