[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-vueionic的vue使用pwa":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":19,"minRead":20},218,"vueionic的vue使用pwa","[Vue]ionic的vue使用PWA","Ionic的vue使用PWA 其實在Ionic中使用vue的方式在原本的技術文件中就有說明很清楚，可以先參考原 […]","\u003Ch1>Ionic的vue使用PWA\u003C\u002Fh1>\n\u003Cp>其實在Ionic中使用vue的方式在原本的技術文件中就有說明很清楚，可以先參考原本的\u003Ca href=\"https:\u002F\u002Fionicframework.com\u002Fdocs\u002Fvue\u002Fpwa\" title=\"說明\">說明\u003C\u002Fa>。\u003Cbr \u002F>\n簡單翻譯一下\u003C\u002Fp>\n\u003Ch2>首先於指令端加入PWA\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>vue add pwa\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>在main.js中宣告ServiceWorker\u003C\u002Fh2>\n\u003Cp>如果上面步驟成功，會在src中找到registerServiceWorker.js，如果使用TS則會看到registerServiceWorker.ts，這時於main.js中加上宣告。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>import { createApp } from 'vue';\nimport App from '.\u002FApp.vue';\nimport router from '.\u002Frouter';\n\u002F\u002F Added by the CLI\nimport '.\u002FregisterServiceWorker';\n\ncreateApp(App).use(router).mount('#app');\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>registerServiceWorker.js裡面長這樣，文件有說明這是基於 Workbox's webpack 產生的。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>import { register } from 'register-service-worker';\n\nif (process.env.NODE_ENV === 'production') {\n  register(`${process.env.BASE_URL}service-worker.js`, {\n    ready() {\n      console.log(\n        'App is being served from cache by a service worker.\\n' + 'For more details, visit https:\u002F\u002Fgoo.gl\u002FAFskqB'\n      );\n    },\n    registered() {\n      console.log('Service worker has been registered.');\n    },\n    cached() {\n      console.log('Content has been cached for offline use.');\n    },\n    updatefound() {\n      console.log('New content is downloading.');\n    },\n    updated() {\n      console.log('New content is available; please refresh.');\n    },\n    offline() {\n      console.log('No internet connection found. App is running in offline mode.');\n    },\n    error(error) {\n      console.error('Error during service worker registration:', error);\n    },\n  });\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>其實做到這步，PWA的設定大致上完成了，部署後就有PWA效果囉。\u003Cbr \u002F>\n但當然不能這樣水一篇\u003C\u002Fp>\n\u003Ch2>Manifest組態設定\u003C\u002Fh2>\n\u003Cp>文件中有提到可以找到一份Manifest，但我找半天發現寫在模組的基本設定中，總不可能要我改模組內容吧，查了一下，在vue裡如果要設定PWA的Manifest，可以寫在vue的config中，請在vue.config.js中加入\u003C\u002Fp>\n\u003Cpre>\u003Ccode>  pwa:{\n    "name": "一般稱呼",\n    "short_name": "短稱",\n    "theme_color": "#FFFFFF",\n    "lang": "zh-Hant-TW",\n    "description": "這是具有PWA設定的網站",\n    "icons": [\n      {\n        "src": ".\u002Fimg\u002Ficons\u002Fandroid-chrome-512x512.png",\n        "sizes": "512x512",\n        "type": "image\u002Fpng"\n      }\n    ],\n    "start_url": ".",\n    "display": "standalone",\n    "background_color": "#000000"\n  }\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>寫法參考google一下就能找到很多，如果懶得找可以參考\u003Ca href=\"https:\u002F\u002Fwww.letswrite.tw\u002Fpwa-manifest\u002F\" title=\"這篇\">這篇\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch2>觸發安裝PWA\u003C\u002Fh2>\n\u003Cp>如果希望主動觸發安裝效果，可以參考以下做法：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>setup() {\n    const states = reactive({\n      deferredPrompt: null,\n    });\n    onMounted(() => {\n      window.addEventListener("beforeinstallprompt", e => {\n        e.preventDefault();\n        states.deferredPrompt = e;\n      });\n      window.addEventListener("appinstalled", () => {\n        states.deferredPrompt = null;\n      });\n      document.querySelector("#app").addEventListener("click", () => { \n        if (states.deferredPrompt) {\n          states.deferredPrompt.prompt();\n          states.deferredPrompt = null;\n        }\n      });\n    });\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>這是在app的\u003Cstrong>onMounted\u003C\u002Fstrong>完成後，點擊畫面中id為app元素時觸發PWA安裝詢問。\u003Cbr \u002F>\n原理為\u003C\u002Fp>\n\u003Col>\n\u003Cli>監聽 \u003Cem>beforeinstallprompt\u003C\u002Fem> 這個事件\u003C\u002Fli>\n\u003Cli>監聽到後把事件存起來\u003Cbr \u002F>\n3.監聽id為app的元素，當點擊事件發生時告知使用者這個 App 可以被安裝\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2>備註\u003C\u002Fh2>\n\u003Cp>以上應該就能讓PWA正常運作，但記得此方式在IOS\u002FAndroid會有所不同。\u003Cbr \u002F>\nIOS不支援安裝提示，且Chrome不支援PWA安裝，哈哈，只能使用safari > 分享 > 加入主畫面，來使用PWA\u003Cbr \u002F>\nAndroid則都可以用，如果是IOS使用者可以先透過PC的Chrome來測試。\u003Cbr \u002F>\n很多人都說PWA是未來，但搞了這麼多年IOS支援度還是半屌子真令人憂心啊\u003Cbr \u002F>\n如果不清楚PWA可以參考這\u003Ca href=\"https:\u002F\u002Fithelp.ithome.com.tw\u002Fusers\u002F20071512\u002Fironman\u002F1222\" title=\"系列\">系列\u003C\u002Fa>\u003C\u002Fp>\n","2022-12-25T10:00:27","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F09%2Fframework_ionic.jpeg",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15,17],{"name":16,"slug":16},"frontend",{"name":18,"slug":18},"vue","\u002Fblog\u002Fvueionic的vue使用pwa",2]