[DRAFT - DO NOT MERGE] Add PWA functionality including offline mode #1170
Conversation
|
Preview build will be at |
Does that mean everyone pays the cost of every language now? Before interactivity or after/in the background? |
Edit: This has now been resolved by using a mixture of precaching for our fallback language (English) and runtime caching for all other languages. |
Cache at runtime instead.
| //const url = `https://review-python-simulator.usermbit.org/${branch}/simulator.html`; | ||
| // TODO: Revert. | ||
| const branch = "service-worker"; | ||
| const url = `https://review-python-simulator.usermbit.org/${branch}/simulator.html`; | ||
|
|
There was a problem hiding this comment.
TODO: Revert before merge.
microbit-robert
changed the title
This means we won't show it when initially loading the app
src/index.tsx
Outdated
| // Cache runtime resources on first load. | ||
| // See https://github.com/GoogleChromeLabs/pwa-wp/issues/180. | ||
| onRegisteredSW(_, registration) { |
There was a problem hiding this comment.
The best or most efficient way? It might be the only way.
|
Toast shown when changing language while offline and language assets are not already cached. Text is a working placeholder and needs discussion.
|
| # Optionally disable the PWA config (service worker and web manifest) | ||
| # DISABLE_PWA: '1' |
There was a problem hiding this comment.
Let's confirm what the default behaviour should be.
| @@ -60,6 +67,7 @@ const allFlags: FlagMetadata[] = [ | |||
| { name: "noLang", defaultOnStages: [] }, | |||
| { name: "translate", defaultOnStages: [] }, | |||
| { name: "noWelcome", defaultOnStages: ["local", "REVIEW"] }, | |||
| { name: "pwa", defaultOnStages: ["REVIEW"] }, | |||
There was a problem hiding this comment.
This needs more thought/discussion. If you install the PWA, close it, then reopen it, you'll lose the flag and the ability to add the flag. In the meantime, this change will make the review branch a bit more useful for testing.
Note: You don't need to install the app to test its offline capabilities.
| return html.replace( | ||
| `<link rel="manifest" href="${ | ||
| process.env.BASE_URL ?? "/" | ||
| }manifest.webmanifest">`, | ||
| "" | ||
| ); |
There was a problem hiding this comment.
Hmmm. This works, but feels fragile.
Notable behaviours: