Feat: Offline support

[grega]

Implements the "web component" portion of the relevant ADR, this relates to / is built upon by: https://github.com/RaspberryPiFoundation/editor-standalone/pull/897

In order to test this / enable the service worker, set:

REACT_APP_ENABLE_SERVICE_WORKER='true'

Figma link for the offline UI: https://www.figma.com/design/SrINjD1MCT6VWYf1Yc9fV1/Code-Editor---Designs?node-id=16829-3067&p=f&t=4MpaVqjPvPKnL3gm-0

To verify:

• Offline indicator UI shows when logged in + offline

---

Screen.Recording.2026-05-20.at.12.19.19.mov

[Copilot]

Pull request overview

This PR introduces opt-in offline support for the editor web component by adding a service worker for asset caching and an in-UI offline indicator/badge driven by connectivity detection.

Changes:

• Add a versioned, caching service worker and wire up optional registration in web-component.html (enabled by default in production builds).
• Introduce offline_enabled web-component attribute + Redux state (offlineEnabled) and render an offline badge when connectivity is lost.
• Add a new useIsOnline hook (with tests) that combines browser online events with service worker messaging + polling.

Reviewed changes

Copilot reviewed 15 out of 16 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
webpack.config.js	Adds enableSW template option and transforms service-worker.js cache names with the package version.
src/web-component.js	Adds offline_enabled to observed/boolean attributes and passes it through to React props.
src/web-component.html	Conditionally registers the service worker and enables offline_enabled in the bundled demo page.
src/redux/EditorSlice.js	Adds offlineEnabled state and setOfflineEnabled action.
src/redux/EditorSlice.test.js	Adds reducer coverage for setOfflineEnabled.
src/hooks/useIsOnline.js	Implements online/offline detection plus SW messaging and offline polling.
src/hooks/useIsOnline.test.js	Adds hook tests covering events, SW messages, and polling behavior.
src/containers/WebComponentLoader.jsx	Plumbs offlineEnabled prop into Redux via setOfflineEnabled.
src/components/SaveButton/SaveButton.jsx	Displays an offline badge (instead of save/login CTA) when offline + offline mode enabled.
src/components/SaveButton/SaveButton.test.js	Adds offline badge rendering tests and mocks useIsOnline.
src/assets/stylesheets/OfflineIndicator.scss	Adds styling for the offline badge + tooltip.
src/assets/stylesheets/InternalStyles.scss	Includes offline indicator stylesheet in internal styles bundle.
src/assets/icons/offline.svg	Adds offline icon asset.
README.md	Documents offline support, SW registration, and the offline_enabled attribute.
public/translations/en.json	Adds new translation strings for the offline badge + tooltip.
public/service-worker.js	Adds a service worker to cache app shell, translations, and Pyodide assets and broadcast connectivity state.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[grega]

All remaining comments in the Cursor message have either been dealt with, or were dupes of CoPilot comments (which have been dealt with / resolved, as appropriate).

[zetter-rpf]

Am I right that this service worker isn't going to be used in production, and just exists to make it easer to test offline mode in the editor web component html page?

If so, I wondered if it's best not to commit the service worker (and pay the cost to maintain it) and instead have a way of triggering the offline mode with a toggle.

[grega]

Am I right that this service worker isn't going to be used in production, and just exists to make it easer to test offline mode in the editor web component html page?

Yep absolutely right on the first bit. This is due to cross-origin issues (editor.raspberrypi.org embedding the web component which is sourced from editor-static.raspberrypi.org with its service worker registered at this editor-static host; the issues would disappear if we served the component on editor.raspberrypi.org, eg. editor.raspberrypi.org/static-assets/web-component.js).

I included a service worker here since this (editor-ui) is a separate component that could be used outside of editor-standalone.

If so, I wondered if it's best not to commit the service worker (and pay the cost to maintain it) and instead have a way of triggering the offline mode with a toggle.

Yep for sure, if we're happy to assume that we only want (/ want to support) offline mode when the editor is integrated with editor-standalone, then not having an additional maintenance burden here makes sense. Perhaps the service worker here could simply be provided as an example in some documentation?

[zetter-rpf]

Great stuff!

I talked this through with @grega and we thought the service worker wasn't that useful as it won't be used in production, agreed it should be removed and possibly replaced with documentation and/or a way to toggle offline mode in the editor from the test page.

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 3 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.

^{Reviewed by Cursor Bugbot for commit 0fa55d9. Configure here.}