feat: pwa with push notifications (#337)

nuxt.config.ts

@@ -2,10 +2,16 @@ import { fileURLToPath } from 'node:url'
 import Inspect from 'vite-plugin-inspect'
 import { isCI } from 'std-env'
 import { i18n } from './config/i18n'
+import { pwa } from './config/pwa'
 
 const isPreview = process.env.PULL_REQUEST === 'true'
 
 export default defineNuxtConfig({
+  typescript: {
+    tsConfig: {
+      exclude: ['../service-worker'],
+    },
+  },
   modules: [
     '@vueuse/nuxt',
     '@unocss/nuxt',
@@ -14,6 +20,7 @@ export default defineNuxtConfig({
     '@nuxtjs/i18n',
     '~/modules/purge-comments',
     '~/modules/setup-components',
+    '~/modules/pwa/index', // change to '@vite-pwa/nuxt' once released and remove pwa module
   ],
   experimental: {
     reactivityTransform: true,
@@ -66,6 +73,7 @@ export default defineNuxtConfig({
     },
     public: {
       env: isCI ? isPreview ? 'staging' : 'production' : 'local',
+      pwaEnabled: isCI || process.env.VITE_DEV_PWA === 'true',
       translateApi: '',
       // Masto uses Mastodon version checks to see what features are enabled.
       // Mastodon alternatives like GoToSocial will always fail these checks, so
@@ -77,6 +85,13 @@ export default defineNuxtConfig({
       fsBase: 'node_modules/.cache/servers',
     },
   },
+  routeRules: {
+    '/manifest.webmanifest': {
+      headers: {
+        'Content-Type': 'application/manifest+json',
+      },
+    },
+  },
   nitro: {
     publicAssets: [
       ...(!isCI || isPreview ? [{ dir: fileURLToPath(new URL('./public-dev', import.meta.url)) }] : []),
@@ -99,10 +114,14 @@ export default defineNuxtConfig({
         { rel: 'alternate icon', type: 'image/x-icon', href: '/favicon.ico' },
         { rel: 'icon', type: 'image/png', href: '/favicon-16x16.png', sizes: '16x16' },
         { rel: 'icon', type: 'image/png', href: '/favicon-32x32.png', sizes: '32x32' },
+        { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#ffffff' },
+        { rel: 'apple-touch-icon', href: '/apple-touch-icon.png', sizes: '180x180' },
       ],
+      meta: [{ name: 'theme-color', content: '#ffffff' }],
     },
   },
   i18n,
+  pwa,
 })
 
 declare global {