Implement @vite-pwa/nuxt

Author: davidmyersdev

.github/workflows/preview.yml

@@ -4,6 +4,7 @@ on:
   workflow_dispatch:
 env:
   NODE_OPTIONS: --max-old-space-size=4096
+  NUXT_PUBLIC_APP_NAME: Octo (Preview)
   NUXT_PUBLIC_CDN_URL: ${{ secrets.VITE_APP_CDN_URL }}
   NUXT_PUBLIC_DISCORD_INVITE_LINK: ${{ secrets.VITE_DISCORD_INVITE_LINK }}
   NUXT_PUBLIC_FATHOM_EVENT_ACCOUNT_REGISTRATION: ${{ secrets.VUE_APP_FATHOM_GOAL_ACCOUNT_REGISTRATION }}
@@ -26,7 +27,6 @@ env:
   NUXT_PUBLIC_FIREBASE_PROJECT_ID: ${{ secrets.VUE_APP_FIREBASE_PROJECT_ID }}
   NUXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.VUE_APP_FIREBASE_STORAGE_BUCKET }}
   NUXT_PUBLIC_STRIPE_MONTHLY_PRICE: ${{ secrets.VUE_APP_STRIPE_MONTHLY_PRICE }}
-  OCTO_NAME: Octo (Preview)
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
 jobs:
   deploy_vercel:

.gitignore

@@ -16,6 +16,7 @@
 .output
 .vercel
 .vscode
+dev-dist
 dist
 node_modules
 test/cypress/downloads

.yarn/cache/@rollup-plugin-replace-npm-4.0.0-4c483d297f-b61701e612.zip

@@ -5,7 +5,7 @@
 
 The ultimate open source tool for personal knowledge management. Sign up at [octo.app](https://octo.app).
 
-[![screenshot](public/img/screenshot.png)](https://octo.app)
+[![screenshot](assets/screenshot.png)](https://octo.app)
 
 ## Features
 

.yarn/cache/pretty-bytes-npm-6.0.0-9b9da4b592-0bb9f95e61.zip

@@ -1,5 +1,6 @@
 <template>
   <div id="app" class="h-full" :class="sizes.concat([!ligatures && 'ligatures-none'])">
+    <VitePwaManifest />
     <AsyncChangeLog v-if="showChangeLog && !flow" />
     <AppLayout>
       <AppPage :pageKey="pageKey" class="bg-opacity-25 flex-grow flex-shrink h-full overflow-x-hidden relative" />
@@ -16,6 +17,7 @@ export default defineComponent({
   inject: ['mq'],
   setup() {
     const { public: { appName, appTitle } } = useConfig()
+
     useRoot()
     useHead({
       title: appTitle,

README.md

@@ -1,5 +1,6 @@
 import { defineNuxtConfig } from 'nuxt/config'
 import { resolve } from 'path'
+import { config as pwaConfig } from './pwa.config'
 
 const fathomScript = process.env.NUXT_PUBLIC_FATHOM_SITE_URL ? {
   'data-auto': false,
@@ -23,7 +24,6 @@ export default defineNuxtConfig({
         lang: 'en',
       },
       link: [
-        { href: '/manifest.webmanifest', rel: 'manifest' },
         { href: '/img/icons/favicon.ico', rel: 'icon' },
         { href: 'https://fonts.googleapis.com', rel: 'preconnect' },
         { crossorigin: '', href: 'https://fonts.gstatic.com', rel: 'preconnect' },
@@ -57,14 +57,39 @@ export default defineNuxtConfig({
   modules: [
     '@nuxtjs/tailwindcss',
     '@pinia/nuxt',
+    '@vite-pwa/nuxt',
     '@vueuse/nuxt',
   ],
+  nitro: {
+    prerender: {
+      routes: [
+        '/',
+        '/home',
+        '/settings',
+      ],
+    },
+  },
   postcss: {
     plugins: {
       tailwindcss: {},
       autoprefixer: {},
     },
   },
+  pwa: {
+    ...pwaConfig,
+    base: '/',
+    client: {
+      registerPlugin: true,
+    },
+    devOptions: {
+      enabled: true,
+      type: 'module',
+    },
+    includeManifestIcons: true,
+    registerWebManifestInRouteRules: true,
+    scope: '/',
+    writePlugin: true,
+  },
   router: {
     options: {
       strict: true,

app.vue

@@ -43,6 +43,7 @@
     "@types/mime-types": "^2.1.1",
     "@types/node": "^18.0.6",
     "@types/remarkable": "^2.0.3",
+    "@vite-pwa/nuxt": "^0.0.4",
     "@vueuse/core": "^9.9.0",
     "@vueuse/head": "^1.0.22",
     "@vueuse/nuxt": "^9.9.0",
@@ -60,7 +61,7 @@
     "typescript": "^4.7.4",
     "vercel": "^28.10.1",
     "vite": "^4.0.2",
-    "vite-plugin-pwa": "^0.13.3",
+    "vite-plugin-pwa": "^0.14.1",
     "vite-svg-loader": "^3.6.0",
     "vue-tsc": "^0.38.9",
     "workbox-build": "^6.3.0",

public/img/screenshot.png renamed to assets/screenshot.png

@@ -79,7 +79,7 @@ export default defineComponent({
     </section>
     <section class="p-4 lg:p-8">
       <div class="container mx-auto max-w-[100ch]">
-        <img src="/img/screenshot.png?v=MjAyMi0xMi0xMVQxMDoxMjoyMS0wNTAwCg==" alt="The Octo editor with an in-progress Markdown document in focus." width="1600" height="900" class="w-full" />
+        <img src="~/assets/screenshot.png" alt="The Octo editor with an in-progress Markdown document in focus." width="1600" height="900" class="w-full" />
       </div>
     </section>
     <section class="p-4 lg:p-8">