[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-nuxt-3-的-pwa-設定方式":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":17,"minRead":18},3700,"nuxt-3-的-pwa-設定方式","Nuxt 3 的 PWA 設定方式","Nuxt 3 的 PWA 設定方式 Nuxt 3 內就有基本的 PWA 設定，因為我只需要用到主畫面連結，因此 […]","\u003Ch1>Nuxt 3 的 PWA 設定方式\u003C\u002Fh1>\n\u003Cp>Nuxt 3 內就有基本的 PWA 設定，因為我只需要用到主畫面連結，因此用這做法就足夠了\u003C\u002Fp>\n\u003Cp>首先是設定基本的資訊\u003C\u002Fp>\n\u003Cp>nuxt.config.ts\u003C\u002Fp>\n\u003Cpre>\u003Ccode>import { defineNuxtConfig } from 'nuxt3'\n\nexport default defineNuxtConfig({\n  meta: {\n    title: 'Nuxt3 PWA',\n    charset: 'utf-8',\n    meta: [\n      { name: 'theme-color', content: '#ffdd67' }\n    ],\n    link: [\n      { hid: 'icon', rel: 'icon', type: 'image\u002Fpng', href: '\u002Flogo_x32.png' },\n      { hid: 'apple-touch-icon', rel: 'apple-touch-icon', href: '\u002Flogo_x180.png' },\n      { rel: 'manifest', href: '\u002Fmanifest.json' }\n    ]\n  }\n})\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>再來於 public  裡面加入manifest.json 以及顯示的圖檔\u003C\u002Fp>\n\u003Cp>manifest.json\u003C\u002Fp>\n\u003Cpre>\u003Ccode>"name": "Nuxt3 PWA",\n    "icons": [\n        {\n            "src": "\u002Flogo_x512.png",\n            "types": "img\u002Fpng",\n            "sizes": "512x512",\n            "purpose": "maskable"\n        },\n        {\n            "src": "\u002Flogo_x384.png",\n            "types": "img\u002Fpng",\n            "sizes": "384x384",\n            "purpose": "maskable"\n        },\n        {\n            "src": "\u002Flogo_x192.png",\n            "types": "img\u002Fpng",\n            "sizes": "192x192",\n            "purpose": "maskable"\n        },\n        {\n            "src": "\u002Flogo_x128.png",\n            "types": "img\u002Fpng",\n            "sizes": "128x128",\n            "purpose": "maskable"\n        },\n        {\n            "src": "\u002Flogo_x96.png",\n            "types": "img\u002Fpng",\n            "sizes": "96x96",\n            "purpose": "maskable"\n        },\n        {\n            "src": "\u002Flogo_x72.png",\n            "types": "img\u002Fpng",\n            "sizes": "72x72",\n            "purpose": "maskable"\n        },\n        {\n            "src": "\u002Flogo_x48.png",\n            "types": "img\u002Fpng",\n            "sizes": "48x48",\n            "purpose": "any"\n        },\n        {\n            "src": "\u002Flogo_x180.png",\n            "types": "img\u002Fpng",\n            "sizes": "180x180",\n            "purpose": "any"\n        },\n        {\n            "src": "\u002Flogo_x120.png",\n            "types": "img\u002Fpng",\n            "sizes": "120x120",\n            "purpose": "any"\n        }\n    ],\n    "start_url": "\u002F?source=pwa",\n    "display": "fullscreen",\n    "background_color": "#000000",\n    "theme_color": "#000000"\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>app.vue 最好加個防呆\u003C\u002Fp>\n\u003Cpre>\u003Ccode>if (process.client) {\n  window.addEventListener('load', () => {\n    if (!('serviceWorker' in navigator)) {\n      throw new Error('serviceWorker is not supported in current browser!')\n    }\n\n    navigator.serviceWorker.register('\u002Fsw.js')\n  })\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>大致上使用 PWA 時就吃到資料囉～\u003C\u002Fp>\n","2024-04-01T10:04:39","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2024%2F03%2Ficon-green.svg",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15],{"name":16,"slug":16},"vue","\u002Fblog\u002Fnuxt-3-的-pwa-設定方式",2]