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

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

www.pwabuilder.com

PWABuilder

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 這個網址。簡單來說要做五件事情。

1. 把目錄裡面的 manifest.json 上傳到網站根目錄。
2. 把 pwabuilder-sw/pwabuilder-sw.js 上傳到網站根目錄
3. 把準備好的 logo 改名 app-icon-512×512.png（預設 manifest.json 會吃 favicon.ico 可以從檔案中修改）
4. 在網頁 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>
   
   

    

以上，恭喜完成一個 PWA 基本配置，更進階的使用可以參考 manifest.json 中的配置:

developer.mozilla.org

Web App Manifest | MDN

Web App manifest 是一個 JSON 格式的文件，它提供了應用程式相關的資訊（像是名稱、作者、圖示、描述）。 manifest 的功用是將 Web ...

值得一提的有幾個設定：

—-

安卓手機上使用 PWA 方法，請參考這裡。

iOS 上就是開 safari 然後把網站加入主畫面就行啦，參考這裡。

同場加映：

ithelp.ithome.com.tw

Progressive Web App 加入主畫面 : PWA 究竟加入和安裝了什麼 (2) - iT ...

加入主畫面 (Add to Home screen) 加入主畫面 (Add to Home screen) 常見的縮寫為 A2HS，可以看成是讓使用者將 Web App 進行 "安裝&quo...

firt.dev

iOS PWA Compatibility－firt.dev

What's supported on Safari on iOS and iPadOS for Progressive Web Apps

ithelp.ithome.com.tw

Day 02 - 30 天 Progressive Web App 學習筆記 - 為什麼需要 PWA? - iT ...

為什麼需要 PWA? 很多人認為網頁沒辦法跟原生的 APP 相提並論，因為網站沒辦法像原生 APP 一樣快速、可靠、高互動等等 PWA ...

docs.microsoft.com

將您的網站轉換成高品質PWA

使用 PWA Builder 從現有網站建立高品質的PWA

blog.setsal.dev

[分享] 用 PWA 寫一個手機 APP 運作畫面惡作劇你的朋友！(Fake-Phone-Screen)

個人小專案開發歷程 ＆ PWA 簡單發展介紹