feat: Allow service worker / offline mode to be toggled via web component attri

Author: grega

src/components/SaveButton/SaveButton.jsx

@@ -21,6 +21,7 @@ const SaveButton = ({ className, type, fill = false }) => {
   const webComponent = useSelector((state) => state.editor.webComponent);
   const user = useSelector((state) => state.auth.user);
   const project = useSelector((state) => state.editor.project);
+  const offlineEnabled = useSelector((state) => state.editor.offlineEnabled);
   const isOnline = useIsOnline();
 
   useEffect(() => {
@@ -41,7 +42,7 @@ const SaveButton = ({ className, type, fill = false }) => {
 
   if (loading !== "success" || projectOwner || !buttonType) return null;
 
-  if (!isOnline && !user) {
+  if (offlineEnabled && !isOnline && !user) {
     return (
       <div className={classNames(className, "offline-badge")}>
         <OfflineIcon />

src/containers/WebComponentLoader.jsx

@@ -3,6 +3,7 @@ import { useSelector, useDispatch } from "react-redux";
 import {
   disableTheming,
   setSenseHatAlwaysEnabled,
+  setOfflineEnabled,
   setLoadRemixDisabled,
   setReactAppApiEndpoint,
   setScratchApiEndpoint,
@@ -75,6 +76,7 @@ const WebComponentLoader = (props) => {
     withSidebar = false,
     loadCache = true, // Always use cache unless explicitly disabled
     initialProject = null,
+    offlineEnabled = false,
   } = props;
   const dispatch = useDispatch();
 
@@ -199,6 +201,10 @@ const WebComponentLoader = (props) => {
     dispatch(setReadOnly(readOnly));
   }, [readOnly, dispatch]);
 
+  useEffect(() => {
+    dispatch(setOfflineEnabled(offlineEnabled));
+  }, [offlineEnabled, dispatch]);
+
   useEffect(() => {
     // Create a script element to save the existing Prism object if there is one
     const script = document.createElement("script");

src/redux/EditorSlice.js

@@ -112,6 +112,7 @@ export const editorInitialState = {
   lastSaveAutosave: false,
   lastSavedTime: null,
   senseHatAlwaysEnabled: false,
+  offlineEnabled: false,
   senseHatEnabled: false,
   loadRemixDisabled: false,
   betaModalShowing: false,
@@ -282,6 +283,9 @@ export const EditorSlice = createSlice({
     setSenseHatAlwaysEnabled: (state, action) => {
       state.senseHatAlwaysEnabled = action.payload;
     },
+    setOfflineEnabled: (state, action) => {
+      state.offlineEnabled = action.payload;
+    },
     setSenseHatEnabled: (state, action) => {
       state.senseHatEnabled = action.payload;
     },
@@ -515,6 +519,7 @@ export const {
   setReadOnly,
   setInstructionsEditable,
   setSenseHatAlwaysEnabled,
+  setOfflineEnabled,
   setSenseHatEnabled,
   setLoadRemixDisabled,
   setReactAppApiEndpoint,

src/web-component.js

@@ -79,6 +79,7 @@ class WebComponent extends HTMLElement {
       "with_projectbar",
       "with_sidebar",
       "load_cache",
+      "offline_enabled",
     ];
   }
 
@@ -97,6 +98,7 @@ class WebComponent extends HTMLElement {
       "with_projectbar",
       "with_sidebar",
       "load_cache",
+      "offline_enabled",
     ];
     const jsonAttrs = [
       "instructions",