feat: pwa support (#366)

* add PWA support * fix broken URLs for query * remove unused variable * restore authURL
2023-03-23 10:27:12 -08:00 · 2023-03-23 10:27:12 -08:00 · 0f8db862b4
commit 0f8db862b4
parent be6b5c9c56
8 changed files with 1656 additions and 7 deletions
--- a/docs/docs/tips-tricks.md
+++ b/docs/docs/tips-tricks.md
@ -39,7 +39,7 @@ In some cases you may want to skip some items such as consumables, or items that

 Homebox has a built-in QR code generator that can be used to generate QR codes for your items. This is useful for tracking items with a mobile device. You can generate a QR code for any item by clicking the QR code icon in the top right of the item details page. The same can be done for the Labels and Locations page. Currently support is limited to generating one off QR Codes.

-However, the API endpoint is available for generating QR codes on the fly for any item (or any other data) if you provide a valid API key in the query parameters. An example url would look like `/api/v1/qrcode?data=https://homebox.fly.dev/item/{uuid}&access_token={api_key}`. Currently the easiest way to get an API token is to use one from an existing URL of the QR Code in the API key, but this will be improved in the future.
+However, the API endpoint is available for generating QR codes on the fly for any item (or any other data) if you provide a valid API key in the query parameters. An example url would look like `/api/v1/qrcode?data=https://homebox.fly.dev/item/{uuid}`. Currently the easiest way to get an API token is to use one from an existing URL of the QR Code in the API key, but this will be improved in the future.

 :octicons-tag-24: v0.8.0

--- a/frontend/app.vue
+++ b/frontend/app.vue
@ -2,6 +2,10 @@
  <NuxtLayout>
    <Html lang="en" :data-theme="theme || 'homebox'" />
    <Link rel="icon" type="image/svg" href="/favicon.svg"></Link>
+    <Link rel="apple-touch-icon" href="/apple-touch-icon.png" size="180x180" />
+    <Link rel="mask-icon" href="/mask-icon.svg" color="#5b7f67" />
+    <Meta name="theme-color" content="#5b7f67" />
+    <Link rel="manifest" href="/manifest.webmanifest" />
    <NuxtPage />
  </NuxtLayout>
 </template>
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@ -3,7 +3,7 @@ import { defineNuxtConfig } from "nuxt/config";
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
  ssr: false,
-  modules: ["@nuxtjs/tailwindcss", "@pinia/nuxt", "@vueuse/nuxt"],
+  modules: ["@nuxtjs/tailwindcss", "@pinia/nuxt", "@vueuse/nuxt", "@vite-pwa/nuxt"],
  nitro: {
    devProxy: {
      "/api": {
@ -13,4 +13,39 @@ export default defineNuxtConfig({
    },
  },
  css: ["@/assets/css/main.css"],
+  pwa: {
+    injectRegister: "script",
+    injectManifest: {
+      swSrc: "sw.js",
+    },
+    devOptions: {
+      // Enable to troubleshoot during development
+      enabled: true,
+    },
+    manifest: {
+      name: "Homebox",
+      short_name: "Homebox",
+      description: "Home Inventory App",
+      theme_color: "#5b7f67",
+      start_url: "/home",
+      icons: [
+        {
+          src: "pwa-192x192.png",
+          sizes: "192x192",
+          type: "image/png",
+        },
+        {
+          src: "pwa-512x512.png",
+          sizes: "512x512",
+          type: "image/png",
+        },
+        {
+          src: "pwa-512x512.png",
+          sizes: "512x512",
+          type: "image/png",
+          purpose: "any maskable",
+        },
+      ],
+    },
+  },
 });
--- a/frontend/package.json
+++ b/frontend/package.json
@ -20,6 +20,7 @@
    "@types/markdown-it": "^12.2.3",
    "@typescript-eslint/eslint-plugin": "^5.36.2",
    "@typescript-eslint/parser": "^5.36.2",
+    "@vite-pwa/nuxt": "^0.0.7",
    "eslint": "^8.23.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
--- a/frontend/pages/reports/label-generator.vue
+++ b/frontend/pages/reports/label-generator.vue
@ -158,8 +158,6 @@
    location: string;
  };

-  const api = useUserApi();
-
  function fmtAssetID(aid: number | string) {
    aid = aid.toString();

@ -178,7 +176,7 @@

    const data = `${origin}/a/${assetID}`;

-    return `/api/v1/qrcode?data=${encodeURIComponent(data)}&access_token=${api.items.attachmentToken}`;
+    return `/api/v1/qrcode?data=${encodeURIComponent(data)}`;
  }

  function getItem(n: number): LabelData {
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/public/pwa-192x192.png
+++ b/frontend/public/pwa-192x192.png
--- a/frontend/public/pwa-512x512.png
+++ b/frontend/public/pwa-512x512.png