auto save only when its supported

src/actions/actionExport.tsx

@@ -248,21 +248,24 @@ export const actionToggleAutoSave = register({
       commitToHistory: false,
     };
   },
-  PanelComponent: ({ appState, updateData }) => (
+  PanelComponent: ({ appState, updateData }) =>
-    <label style={{ display: "flex" }}>
+    supported ? (
-      <input
+      <label style={{ display: "flex" }}>
-        type="checkbox"
+        <input
-        checked={appState.autoSave}
+          type="checkbox"
-        onChange={(event) => updateData(event.target.checked)}
+          checked={appState.autoSave}
-      />{" "}
+          onChange={(event) => updateData(event.target.checked)}
-      {t("labels.toggleAutoSave")}
+        />{" "}
-      <Tooltip
+        {t("labels.toggleAutoSave")}
-        label={t("labels.toggleAutoSave_details")}
+        <Tooltip
-        position="above"
+          label={t("labels.toggleAutoSave_details")}
-        long={true}
+          position="above"
-      >
+          long={true}
-        <div className="TooltipIcon">{questionCircle}</div>
+        >
-      </Tooltip>
+          <div className="TooltipIcon">{questionCircle}</div>
-    </label>
+        </Tooltip>
-  ),
+      </label>
+    ) : (
+      <></>
+    ),
 });

src/components/App.tsx

@@ -910,7 +910,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       .querySelector(".excalidraw")
       ?.classList.toggle("theme--dark", this.state.theme === "dark");
 
-    if (this.state.autoSave && this.state.fileHandle) {
+    if (this.state.autoSave && this.state.fileHandle && supported) {
       try {
         this.saveLocalSceneDebounced(
           this.scene.getElementsIncludingDeleted(),