service worker: use injectManifest

- a RPC framework is added for further use
- fix an error that the service worker is not
    registered until the settings opened
- added theme-color
- settings: added a item to indicate the offline
    availablity

src/settings/Settings.tsx

@@ -45,6 +45,7 @@ import {
 } from "../platform/i18n.jsx";
 import { type Template } from "@solid-primitives/i18n";
 import BottomSheet from "../material/BottomSheet.jsx";
+import { useServiceWorker } from "../platform/host.js";
 
 type Strings = {
   ["lang.auto"]: Template<{ detected: string }>;
@@ -60,9 +61,7 @@ const Settings: ParentComponent = (props) => {
   );
   const navigate = useNavigate();
   const settings$ = useStore($settings);
-  const {
-    needRefresh: [needRefresh],
-  } = useRegisterSW();
+  const { needRefresh, offlineReady } = useServiceWorker();
   const dateFnLocale = useDateFnLocale();
 
   const [profiles] = useSignedInProfiles();
@@ -236,6 +235,16 @@ const Settings: ParentComponent = (props) => {
             </Show>
           </ListItem>
           <Divider />
+          <ListItem>
+            <ListItemText secondary={
+              offlineReady()
+                ? t("availability.offline")
+                : t("availability.online")
+            }>
+              {t("availability")}
+            </ListItemText>
+          </ListItem>
+          <Divider />
         </li>
       </List>
     </Scaffold>

src/settings/i18n/en.json

@@ -32,5 +32,9 @@
   "motions.gifs": "GIFs",
   "motions.gifs.autoplay": "Auto-play GIFs",
   "motions.vids": "Videos",
-  "motions.vids.autoplay": "Auto-play Videos"
+  "motions.vids.autoplay": "Auto-play Videos",
+
+  "availability": "Availability",
+  "availability.offline": "Offline ready",
+  "availability.online": "Online only"
 }

src/settings/i18n/zh-Hans.json

@@ -32,5 +32,9 @@
   "motions.gifs": "动图",
   "motions.gifs.autoplay": "自动播放动图",
   "motions.vids": "视频",
-  "motions.vids.autoplay": "自动播放视频"
+  "motions.vids.autoplay": "自动播放视频",
+
+  "availability": "离线可用程度",
+  "availability.offline": "可以离线使用",
+  "availability.online": "需要联网使用"
 }