Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PWA functionality including offline mode (featured flagged) #1170

Merged
merged 39 commits into from
May 30, 2024

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.

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
src/index.tsx Outdated Show resolved Hide resolved
@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

src/flags.ts Outdated Show resolved Hide resolved
vite.config.ts Outdated Show resolved Hide resolved
@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
Copy link
Collaborator

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

@microbit-matt-hillsdon microbit-matt-hillsdon merged commit 340e5bb into main May 30, 2024
1 check passed
@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.

2 participants