Progressive Web Application（PWA）製作

PWA 又稱「漸進式的網頁應用程式」，有很多文章已經有說明，參考這裡，或是參考這個都有說明。

這次介紹一個 PWA 的好用工具：

www.pwabuilder.com

All the tools you need to build and deploy your Progressive Web Apps.

操作方法簡化非常多，開始之前要注意幾件事情：

準備一張 512×512 的 png logo （如果原本 logo 不夠大的話）
要確保有更改網站內網頁的權限
HTTP Server 要注意安全性配置是否會阻擋根目錄的 json 和 js 檔案
網站一定要有合規的 HTTPS 憑證使用

首先進入網站以後輸入網址。
系統便會開始撿測需要的資源，會給一份報告告訴你缺什麼，或是已經有了什麼。如下圖，會發現 PWA 需要的 Manifest.json 和 server-woker.js 都沒有，這時點擊一下右下角的 next 按鈕。

點擊之後，會產生可以下載的 PWA 必要文件檔案。依照提示點擊 Generate 按鈕，下載必要檔案。
下載完成解壓縮後，資料夾中會有如下檔案，點開 next-steps.html 會提示接下來要做的事情。
next-steps.html 會導向 https://github.com/pwa-builder/pwabuilder-web/blob/V2/src/assets/next-steps.md 這個網址。簡單來說要做五件事情。

把目錄裡面的 manifest.json 上傳到網站根目錄。
把 pwabuilder-sw/pwabuilder-sw.js 上傳到網站根目錄
把準備好的 logo 改名 app-icon-512×512.png（預設 manifest.json 會吃 favicon.ico 可以從檔案中修改）

在網頁 header 中添加以下兩串代碼

<link rel="manifest" href="manifest.json" />

<script type="module">
   import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
   const el = document.createElement('pwa-update');
   document.body.appendChild(el);
</script>