Nuxt 3 的 PWA 設定方式

Nuxt 3 內就有基本的 PWA 設定，因為我只需要用到主畫面連結，因此用這做法就足夠了

首先是設定基本的資訊

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  meta: {
    title: 'Nuxt3 PWA',
    charset: 'utf-8',
    meta: [
      { name: 'theme-color', content: '#ffdd67' }
    ],
    link: [
      { hid: 'icon', rel: 'icon', type: 'image/png', href: '/logo_x32.png' },
      { hid: 'apple-touch-icon', rel: 'apple-touch-icon', href: '/logo_x180.png' },
      { rel: 'manifest', href: '/manifest.json' }
    ]
  }
})

再來於 public 裡面加入manifest.json 以及顯示的圖檔

manifest.json

"name": "Nuxt3 PWA",
    "icons": [
        {
            "src": "/logo_x512.png",
            "types": "img/png",
            "sizes": "512x512",
            "purpose": "maskable"
        },
        {
            "src": "/logo_x384.png",
            "types": "img/png",
            "sizes": "384x384",
            "purpose": "maskable"
        },
        {
            "src": "/logo_x192.png",
            "types": "img/png",
            "sizes": "192x192",
            "purpose": "maskable"
        },
        {
            "src": "/logo_x128.png",
            "types": "img/png",
            "sizes": "128x128",
            "purpose": "maskable"
        },
        {
            "src": "/logo_x96.png",
            "types": "img/png",
            "sizes": "96x96",
            "purpose": "maskable"
        },
        {
            "src": "/logo_x72.png",
            "types": "img/png",
            "sizes": "72x72",
            "purpose": "maskable"
        },
        {
            "src": "/logo_x48.png",
            "types": "img/png",
            "sizes": "48x48",
            "purpose": "any"
        },
        {
            "src": "/logo_x180.png",
            "types": "img/png",
            "sizes": "180x180",
            "purpose": "any"
        },
        {
            "src": "/logo_x120.png",
            "types": "img/png",
            "sizes": "120x120",
            "purpose": "any"
        }
    ],
    "start_url": "/?source=pwa",
    "display": "fullscreen",
    "background_color": "#000000",
    "theme_color": "#000000"

app.vue 最好加個防呆

if (process.client) {
  window.addEventListener('load', () => {
    if (!('serviceWorker' in navigator)) {
      throw new Error('serviceWorker is not supported in current browser!')
    }

    navigator.serviceWorker.register('/sw.js')
  })
}

大致上使用 PWA 時就吃到資料囉～