Add: PWA settings which should work + minor configs

layouts/default.vue

@@ -4,6 +4,7 @@
     <v-main class="mt-4 pt-4">
       <slot />
     </v-main>
+    {{ $pwa }}
     <Footer />
   </v-app>
 </template>

nuxt.config.ts

@@ -1,27 +1,27 @@
 // import colors from 'vuetify/es5/util/colors'
 import vuetify from 'vite-plugin-vuetify'
 
+// PWA Config
+const description: string = '🚀 Mobile Games without Installation are Mini Games on popular apps and chats like Facebook Gaming, iMessage, Messenger, Snapchat, Telegram, or WeChat.';
+const title: string = 'Doyban | The World of Digital Gameplay.';
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  // app config
+  // Global SEO and Meta config (https://nuxt.com/docs/getting-started/seo-meta)
   app: {
-    // global transition
-    pageTransition: { name: 'page', mode: 'out-in' },
-  },
-
-  // Build Configuration (https://nuxt.com/docs/api/configuration/nuxt-config#build)
-  build: { transpile: ["vuetify"] },
-
-  // Global CSS (https://go.nuxtjs.dev/config-css)
-  css: [
-    'vuetify/styles',
-    '~/assets/main.scss'
-  ],
-
-  // Global page headers (https://go.nuxtjs.dev/config-head)
-  head: {
-    titleTemplate: '%s - Doyban | The World of Digital Gameplay.',
-    title: 'Doyban',
+    head: {
+      titleTemplate: '%s - ' + title,
+    },
+    htmlAttrs: {
+      lang: 'en',
+      amp: true,
+    },
+    link: [
+      { href: '/favicon.ico', rel: 'icon', sizes: 'any', type: 'image/x-icon' },
+      { href: '/favicon.ico', rel: 'shortcut icon', sizes: 'any', type: 'image/ico' },
+      { href: '/favicon.svg', rel: 'icon', type: 'image/svg+xml', },
+      { href: '/apple-touch-icon-180x180.png', rel: 'apple-touch-icon' },
+    ],
     meta: [
       // Basic HTML meta tags.
       { charset: 'utf-8' },
@@ -30,8 +30,7 @@ export default defineNuxtConfig({
       {
         hid: 'description',
         name: 'description',
-        content:
-          '🚀 Mobile Games without Installation are Mini Games on popular apps and chats like Facebook Gaming, iMessage, Messenger, Snapchat, Telegram, or WeChat.',
+        content: description,
       },
       { hid: 'language', name: 'language', content: 'en_US' },
       { hid: 'robots', name: 'robots', content: 'index,follow' },
@@ -62,8 +61,7 @@ export default defineNuxtConfig({
       {
         hid: 'og:description',
         property: 'og:description',
-        content:
-          '🚀 Mobile Games without Installation are Mini Games on popular apps and chats like Facebook Gaming, iMessage, Messenger, Snapchat, Telegram, or WeChat.',
+        content: description,
       },
       { hid: 'og:image', property: 'og:image', content: '/logo.webp' },
       {
@@ -256,7 +254,7 @@ export default defineNuxtConfig({
       {
         hid: 'og:title',
         property: 'og:title',
-        content: 'Doyban | The World of Digital Gameplay.',
+        content: title,
       },
       { hid: 'og:type', property: 'og:type', content: 'website' },
       { hid: 'og:url', property: 'og:url', content: 'https://doyban.com' },
@@ -275,8 +273,7 @@ export default defineNuxtConfig({
       {
         hid: 'twitter:description',
         property: 'twitter:description',
-        content:
-          '🚀 Mobile Games without Installation are Mini Games on popular apps and chats like Facebook Gaming, iMessage, Messenger, Snapchat, Telegram, or WeChat.',
+        content: description,
       },
       {
         hid: 'twitter:image',
@@ -296,17 +293,32 @@ export default defineNuxtConfig({
       {
         hid: 'twitter:title',
         property: 'twitter:title',
-        content: 'Doyban | The World of Digital Gameplay.',
+        content: title,
       },
     ],
-    link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-      { rel: 'shortcut icon', type: 'image/ico', href: '/favicon.ico' },
-    ],
-    htmlAttrs: {
-      lang: 'en',
-      amp: true,
-    },
+
+    // global transition
+    pageTransition: { name: 'page', mode: 'out-in' },
+  },
+
+  // Build Configuration (https://nuxt.com/docs/api/configuration/nuxt-config#build)
+  build: { transpile: ["vuetify"] },
+
+  client: {
+    installPrompt: true,
+  },
+
+  // Global CSS (https://go.nuxtjs.dev/config-css)
+  css: [
+    'vuetify/styles',
+    '~/assets/main.scss'
+  ],
+
+  devOptions: {
+    enabled: true,
+    suppressWarnings: true,
+    navigateFallbackAllowlist: [/^\/$/],
+    type: 'module',
   },
 
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
@@ -347,8 +359,6 @@ export default defineNuxtConfig({
       text: null,
       useStylesheet: false,
     }],
-    // // https://go.nuxtjs.dev/pwa
-    // '@nuxtjs/pwa',
     // // https://github.com/dword-design/nuxt-mail
     [
       'nuxt-mail',
@@ -362,6 +372,8 @@ export default defineNuxtConfig({
         },
       },
     ],
+    // https://github.com/vite-pwa/nuxt
+    '@vite-pwa/nuxt'
   ],
 
   // recaptcha: {
@@ -373,6 +385,61 @@ export default defineNuxtConfig({
   // The path to the fallback HTML file. It should be set as the error page, so that also unknown routes are rendered via Nuxt. If set to true, the filename will be 404.html. If working with statically generated pages then it is recommended to use a 404.html for error pages. Multiple services (e.g. Netlify) detect a 404.html automatically, so that's the recommended way to do so in order not to configure error handling on the server.
   generate: { fallback: true },
 
+  nitro: {
+    esbuild: {
+      options: {
+        target: 'esnext',
+      },
+    },
+    prerender: {
+      crawlLinks: true,
+      routes: ['/sitemap.xml', '/robots.txt']
+    }
+  },
+
+  pwa: {
+    manifest: {
+      background_color: '#fafafa',
+      description: description,
+      display: 'standalone',
+      icons: [
+        {
+          src: 'pwa-64x64.png',
+          sizes: '64x64',
+          type: 'image/png'
+        },
+        {
+          src: 'pwa-192x192.png',
+          sizes: '192x192',
+          type: 'image/png'
+        },
+        {
+          src: 'pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'any'
+        },
+        {
+          src: 'maskable-icon-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'maskable'
+        }
+      ],
+      name: title,
+      scope: '.',
+      start_url: './',
+      short_name: title,
+      theme_color: '#4A148C',
+    },
+    strategies: 'injectManifest',
+  },
+
+  workbox: {
+    navigateFallback: '/',
+    globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
+  },
+
   // Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)
   // TODO: Use variables for SCSS.
   // vuetify: {

package.json

@@ -6,15 +6,16 @@
     "build": "nuxi build",
     "dev": "nuxi dev",
     "generate": "nuxi generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare",
+    "preview": "nuxi preview",
+    "postinstall": "nuxi prepare",
     "start": "nuxi preview",
     "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
     "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
     "lint": "yarn lint:js && yarn lint:style",
     "test": "jest",
     "serve": "firebase serve --only functions,hosting",
-    "deploy": "firebase deploy"
+    "deploy": "firebase deploy",
+    "generate-pwa-assets": "pwa-assets-generator --preset minimal public/logo.svg"
   },
   "lint-staged": {
     "*.{js,vue}": "eslint",
@@ -27,20 +28,18 @@
     }
   },
   "dependencies": {
-    "@mdi/font": "^7.2.96",
-    "@nuxtjs/google-fonts": "^3.0.0",
-    "@nuxtjs/pwa": "^3.0.2",
-    "nuxt-mail": "^3.1.27",
-    "sass": "^1.61.0",
-    "sweetalert2": "^10.10.0",
-    "vuetify": "^3.1.4"
+    "vite-plugin-vuetify": "^1.0.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@mdi/font": "^7.2.96",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
+    "@nuxtjs/google-fonts": "^3.0.0",
     "@nuxtjs/stylelint-module": "^5.0.1",
     "@nuxtjs/vuetify": "^1.11.2",
+    "@vite-pwa/assets-generator": "^0.0.10",
+    "@vite-pwa/nuxt": "^0.1.1",
     "@vue/test-utils": "^1.1.0",
     "consola": "^3.0.1",
     "eslint": "^8.49.0",
@@ -50,13 +49,19 @@
     "jest": "^26.5.0",
     "lint-staged": "^10.4.0",
     "nuxt": "^3.7.2",
+    "nuxt-mail": "^3.1.27",
     "nuxt-simple-robots": "^3.1.5",
     "nuxt-simple-sitemap": "^3.3.4",
     "prettier": "^3.0.3",
+    "sass": "^1.61.0",
     "stylelint": "^15.10.3",
     "stylelint-config-standard-scss": "^11.0.0",
+    "sweetalert2": "^10.10.0",
     "ts-jest": "^26.4.1",
-    "vite-plugin-vuetify": "^1.0.2",
-    "vue-jest": "^3.0.4"
+    "vue-jest": "^3.0.4",
+    "vuetify": "^3.1.4",
+    "workbox-core": "^7.0.0",
+    "workbox-precaching": "^7.0.0",
+    "workbox-routing": "^7.0.0"
   }
 }