Add PWA support

2026-06-06 05:38:44 +08:00 · 2023-07-17 21:55:48 +08:00
parent 46acf2980a
commit 219796269e
9 changed files with 67 additions and 3 deletions
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -21,6 +21,7 @@ import * as $15 from "./routes/api/thumbnail/[id].ts";
 import * as $16 from "./routes/api/token.ts";
 import * as $17 from "./routes/api/user.ts";
 import * as $18 from "./routes/index.tsx";
+import * as $19 from "./routes/manifest.json.ts";
 import * as $$0 from "./islands/Container.tsx";
 import * as $$1 from "./islands/Settings.tsx";
 import * as $$2 from "./islands/TaskManager.tsx";
@@ -46,6 +47,7 @@ const manifest = {
        "./routes/api/token.ts": $16,
        "./routes/api/user.ts": $17,
        "./routes/index.tsx": $18,
+        "./routes/manifest.json.ts": $19,
    },
    islands: {
        "./islands/Container.tsx": $$0,
--- a/islands/Container.tsx
+++ b/islands/Container.tsx
@@ -22,6 +22,7 @@ import Login from "../components/Login.tsx";

 export type ContainerProps = {
    i18n: I18NMap;
+    lang: string;
 };

 enum DarkMode {
@@ -117,6 +118,10 @@ export default class Container extends Component<ContainerProps> {
            <div>
                <Head>
                    <title>{t("common.title")}</title>
+                    <link
+                        rel="manifest"
+                        href={`/manifest.json?lang=${this.props.lang}`}
+                    />
                    <GlobalCtx.Provider value={this.context}>
                        <StyleSheet href="https://fonts.googleapis.com/icon?family=Material+Icons" />
                        <StyleSheet href="preact-material-components/style.css" />
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -36,7 +36,7 @@ export default function Index({ data }: PageProps<Props>) {
                    : null}
            </Head>
            <GlobalContext>
-                <Container i18n={i18n} />
+                <Container i18n={i18n} lang={data.lang} />
            </GlobalContext>
        </body>
    );
--- a/routes/manifest.json.ts
+++ b/routes/manifest.json.ts
@@ -0,0 +1,47 @@
+import { Handlers } from "$fresh/server.ts";
+import { get_i18nmap, i18n_handle_request } from "../server/i18ns.ts";
+import t, { i18n_map } from "../server/i18n.ts";
+
+export const handler: Handlers = {
+    GET(req, _ctx) {
+        const i18n = i18n_handle_request(req);
+        if (typeof i18n === "string") {
+            const m = get_i18nmap(i18n);
+            i18n_map.value = m;
+            const base = `/?lang=${i18n}`;
+            const data = {
+                name: t("common.title"),
+                lang: i18n,
+                start_url: base,
+                display: "standalone",
+                icons: [
+                    {
+                        src: "/favicon.ico",
+                        sizes: "64x64",
+                        "type": "image/vnd.microsoft.icon",
+                    },
+                    {
+                        src: "/logo.svg",
+                        sizes: "any",
+                        "type": "image/svg+xml",
+                    },
+                ],
+                scope: base,
+                shortcuts: [
+                    {
+                        name: t("task.add"),
+                        url: `${base}#/task_manager/new`,
+                    },
+                    {
+                        name: t("common.settings"),
+                        url: `${base}#/settings`,
+                    },
+                ],
+            };
+            return new Response(JSON.stringify(data), {
+                headers: { "Content-Type": "application/manifest+json" },
+            });
+        }
+        return i18n;
+    },
+};
--- a/static/favicon.ico
+++ b/static/favicon.ico
--- a/static/logo.svg
+++ b/static/logo.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M34.092 8.845C38.929 20.652 34.092 27 30 30.5c1 3.5-2.986 4.222-4.5 2.5-4.457 1.537-13.512 1.487-20-5C2 24.5 4.73 16.714 14 11.5c8-4.5 16-7 20.092-2.655Z" fill="#FFDB1E"/>
+  <path d="M14 11.5c6.848-4.497 15.025-6.38 18.368-3.47C37.5 12.5 21.5 22.612 15.5 25c-6.5 2.587-3 8.5-6.5 8.5-3 0-2.5-4-5.183-7.75C2.232 23.535 6.16 16.648 14 11.5Z" fill="#fff" stroke="#FFDB1E"/>
+  <path d="M28.535 8.772c4.645 1.25-.365 5.695-4.303 8.536-3.732 2.692-6.606 4.21-7.923 4.83-.366.173-1.617-2.252-1.617-1 0 .417-.7 2.238-.934 2.326-1.365.512-4.223 1.29-5.835 1.29-3.491 0-1.923-4.754 3.014-9.122.892-.789 1.478-.645 2.283-.645-.537-.773-.534-.917.403-1.546C17.79 10.64 23 8.77 25.212 8.42c.366.014.82.35.82.629.41-.14 2.095-.388 2.503-.278Z" fill="#FFE600"/>
+  <path d="M14.297 16.49c.985-.747 1.644-1.01 2.099-2.526.566.121.841-.08 1.29-.701.324.466 1.657.608 2.453.701-.715.451-1.057.852-1.452 2.106-1.464-.611-3.167-.302-4.39.42Z" fill="#fff"/>
+</svg>
--- a/static/sw.ts
+++ b/static/sw.ts
@@ -31,6 +31,8 @@ const CACHES = [
    "/common.css",
    "/scrollBar.css",
    "/preact-material-components/style.css",
+    "/favicon.ico",
+    "/logo.svg",
 ];

 function match_url(u: URL) {
--- a/translation/en/common.jsonc
+++ b/translation/en/common.jsonc
@@ -6,5 +6,6 @@
    "yes": "Yes",
    "no": "No",
    "darkmode": "Dark mode",
-    "submit": "Submit"
+    "submit": "Submit",
+    "settings": "Settings"
 }
--- a/translation/zh-cn/common.jsonc
+++ b/translation/zh-cn/common.jsonc
@@ -6,5 +6,6 @@
    "yes": "是",
    "no": "否",
    "darkmode": "夜间模式",
-    "submit": "提交"
+    "submit": "提交",
+    "settings": "设置"
 }