Ionic的vue使用PWA

其實在Ionic中使用vue的方式在原本的技術文件中就有說明很清楚，可以先參考原本的說明。
簡單翻譯一下

首先於指令端加入PWA

vue add pwa

在main.js中宣告ServiceWorker

如果上面步驟成功，會在src中找到registerServiceWorker.js，如果使用TS則會看到registerServiceWorker.ts，這時於main.js中加上宣告。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
// Added by the CLI
import './registerServiceWorker';

createApp(App).use(router).mount('#app');

registerServiceWorker.js裡面長這樣，文件有說明這是基於 Workbox's webpack 產生的。

import { register } from 'register-service-worker';

if (process.env.NODE_ENV === 'production') {
  register(`${process.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.');
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.');
    },
    error(error) {
      console.error('Error during service worker registration:', error);
    },
  });
}

其實做到這步，PWA的設定大致上完成了，部署後就有PWA效果囉。
但當然不能這樣水一篇

Manifest組態設定

文件中有提到可以找到一份Manifest，但我找半天發現寫在模組的基本設定中，總不可能要我改模組內容吧，查了一下，在vue裡如果要設定PWA的Manifest，可以寫在vue的config中，請在vue.config.js中加入

  pwa:{
    "name": "一般稱呼",
    "short_name": "短稱",
    "theme_color": "#FFFFFF",
    "lang": "zh-Hant-TW",
    "description": "這是具有PWA設定的網站",
    "icons": [
      {
        "src": "./img/icons/android-chrome-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ],
    "start_url": ".",
    "display": "standalone",
    "background_color": "#000000"
  }

寫法參考google一下就能找到很多，如果懶得找可以參考這篇

觸發安裝PWA

如果希望主動觸發安裝效果，可以參考以下做法：

setup() {
    const states = reactive({
      deferredPrompt: null,
    });
    onMounted(() => {
      window.addEventListener("beforeinstallprompt", e => {
        e.preventDefault();
        states.deferredPrompt = e;
      });
      window.addEventListener("appinstalled", () => {
        states.deferredPrompt = null;
      });
      document.querySelector("#app").addEventListener("click", () => { 
        if (states.deferredPrompt) {
          states.deferredPrompt.prompt();
          states.deferredPrompt = null;
        }
      });
    });
}

這是在app的onMounted完成後，點擊畫面中id為app元素時觸發PWA安裝詢問。
原理為

1. 監聽 beforeinstallprompt 這個事件
2. 監聽到後把事件存起來
   3.監聽id為app的元素，當點擊事件發生時告知使用者這個 App 可以被安裝

備註

以上應該就能讓PWA正常運作，但記得此方式在IOS/Android會有所不同。
IOS不支援安裝提示，且Chrome不支援PWA安裝，哈哈，只能使用safari > 分享 > 加入主畫面，來使用PWA
Android則都可以用，如果是IOS使用者可以先透過PC的Chrome來測試。
很多人都說PWA是未來，但搞了這麼多年IOS支援度還是半屌子真令人憂心啊
如果不清楚PWA可以參考這系列