Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
在解決問題之道上不斷前行
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 時就吃到資料囉~