✨ (pwa) vite pwa configuration

2023-07-01 23:58:53 +02:00
parent 0855daf0bd
commit 6871e37214
12 changed files with 2044 additions and 125 deletions
--- a/index.html
+++ b/index.html
@@ -4,8 +4,15 @@
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" href="/favicon.ico" />
    <title>Lite note</title>
+    <meta
+      name="description"
+      content="Lite note for displaying beautiful notes"
+    />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
+    <link rel="mask-icon" href="/masked-icon.svg" color="#FFFFFF" />
+    <meta name="theme-color" content="#2C3A47" />
  </head>
  <body>
    <noscript>
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
    "sass": "^1.63.6",
    "typescript": "~4.5.3",
    "vite": "^4.3.9",
+    "vite-plugin-pwa": "^0.16.4",
    "vitest": "^0.32.2",
    "webpack": "^5.0.0"
  }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/masked-icon.png
+++ b/public/masked-icon.png
--- a/public/pwa-192x192.png
+++ b/public/pwa-192x192.png
--- a/public/pwa-512x512.png
+++ b/public/pwa-512x512.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,3 @@
-import '@/registerServiceWorker'
 import 'notyf/notyf.min.css'

 import { createPinia } from 'pinia'
--- a/src/registerServiceWorker.ts
+++ b/src/registerServiceWorker.ts
@@ -1,36 +0,0 @@
-/* eslint-disable no-console */
-
-import { serviceWorkerBusEvent } from '@/bus/serviceWorkerEventBus'
-import { register } from 'register-service-worker'
-
-if (import.meta.env.NODE_ENV === 'production') {
-  register(`${import.meta.env.BASE_URL}service-worker.js`, {
-    ready() {
-      console.log(
-        'App is being served from cache by a service worker.\n' +
-          'For more details, visit https://goo.gl/AFskqB'
-      )
-    },
-    registered() {
-      console.log('Service worker has been registered.')
-    },
-    cached() {
-      console.log('Content has been cached for offline use.')
-    },
-    updatefound() {
-      console.log('New content is downloading.')
-    },
-    updated() {
-      console.log('New content is available; please refresh.')
-      serviceWorkerBusEvent.emit()
-    },
-    offline() {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      )
-    },
-    error(error) {
-      console.error('Error during service worker registration:', error)
-    }
-  })
-}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,10 +3,49 @@ import path from 'path'
 import { defineConfig } from 'vite'
 import { UserConfigExport } from 'vitest/dist/config'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
+import { VitePWA } from 'vite-plugin-pwa'
+
+const mainColor = '#2C3A47'

 export default defineConfig(({ command }) => {
  const config: UserConfigExport = {
-    plugins: [vue(), VueI18nPlugin({})],
+    plugins: [
+      vue(),
+      VueI18nPlugin({}),
+      VitePWA({
+        registerType: 'autoUpdate',
+        includeAssets: [
+          'favicon.ico',
+          'apple-touch-icon.png',
+          'masked-icon.svg'
+        ],
+        manifest: {
+          name: 'Lite Note',
+          short_name: 'LiteNote',
+          description: 'Lite Note for note taking',
+          background_color: mainColor,
+          theme_color: mainColor,
+          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: 'maskable'
+            }
+          ]
+        }
+      })
+    ],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,79 +0,0 @@
-const mainColor = '#2C3A47'
-
-module.exports = {
-  pwa: {
-    themeColor: mainColor,
-    msTileColor: mainColor,
-    workboxOptions: {
-      skipWaiting: true,
-      clientsClaim: true
-    },
-    name: 'Lite Note',
-    manifestOptions: {
-      background_color: mainColor,
-      theme_color: mainColor,
-      icons: [
-        {
-          src: './img/icons/android-chrome-192x192.png',
-          sizes: '192x192',
-          type: 'image/png'
-        },
-        {
-          src: './img/icons/android-chrome-512x512.png',
-          sizes: '512x512',
-          type: 'image/png'
-        },
-        {
-          src: './img/icons/apple-touch-icon-60x60.png',
-          sizes: '60x60',
-          type: 'image/png'
-        },
-        {
-          src: './img/icons/apple-touch-icon-76x76.png',
-          sizes: '76x76',
-          type: 'image/png'
-        },
-        {
-          src: './img/icons/apple-touch-icon-120x120.png',
-          sizes: '120x120',
-          type: 'image/png'
-        },
-        {
-          src: './img/icons/apple-touch-icon-152x152.png',
-          sizes: '152x152',
-          type: 'image/png'
-        },
-        {
-          src: './img/icons/apple-touch-icon-180x180.png',
-          sizes: '180x180',
-          type: 'image/png'
-        },
-        {
-          src: './img/icons/apple-touch-icon.png',
-          sizes: '180x180',
-          type: 'image/png'
-        },
-        {
-          src: './img/icons/favicon-16x16.png',
-          sizes: '16x16',
-          type: 'image/png'
-        },
-        {
-          src: './img/icons/favicon-32x32.png',
-          sizes: '32x32',
-          type: 'image/png'
-        },
-        {
-          src: './img/icons/msapplication-icon-144x144.png',
-          sizes: '144x144',
-          type: 'image/png'
-        },
-        {
-          src: './img/icons/mstile-150x150.png',
-          sizes: '150x150',
-          type: 'image/png'
-        }
-      ]
-    }
-  }
-}