PWA

我試著為這個網站整合 PWA 功能。

PWA 全名是 Progressive Web App，可以翻成漸進式 Web 應用程式，基本上整合了 Web 和原生應用程式的優點。 PWA 是使用網頁技術（HTML、CSS、JavaScript）建立的網站，可以為使用者提供類似應用程式的體驗。

幾個重要的特色

• 可安裝：使用者可以將 PWA 直接「安裝」到裝置的主螢幕，就像本機應用程式一樣。
• 離線功能：即使沒有有效的網路連接，PWA 也可以使用 Service Worker 和快取等技術來工作。
• 快速可靠：PWA 的目標是提供比傳統網站更快、更可靠、更流暢的使用者體驗。
• 增強功能：可以存取推播通知、相機和地理定位等設備功能（需要用戶許可）。

核心技術

• Service Workers：充當 PWA 和網路之間的「代理」，主要功能是離線快取、後台同步和推播通知。
• Web 應用程式清單：一個 JSON 文件，定義 PWA 安裝後的行為方式（應用程式名稱、圖示、啟動畫面等）。
• HTTPS：出於安全性原因，PWA 需要使用 HTTPS。

整合 PWA

這個網站使用 VuePress 以及 vuepress-theme-hope 的主題建置。 Hope Theme 對於 PWA 的使用，已經預留和 Vite PWA 之間連接的 設定方法，相當友善，只要安裝相關的模組，以及做好適當的設定，就可以把簡單的 PWA 功能整合進來。

在設定 PWA 的過程中，須要準備許多不同版本的 icons，這個部份，我找了一些資源之後，最後是使用 vue-pwa-asset-generator 這個工具。這個工具的使用方式大致如下：

1. 用 npm 安裝 vue-pwa-asset-generator。

   npm install --global vue-pwa-asset-generator

2. 用下列指令產生各種 icons，

   vue-asset-generate -a logo.svg -o img -b 182C61

   其中參數說明如下：
   • -a: input asset, SVG / PNG file (<= 512x512).
   • -o: output folder (created if it does not exist)
   • -b: fallback background color for the ico image.
   • --no-manifest: option to not generate manifest.json file

另外，在尋找資源的過程中，發現 progressier 這個網站，對於 PWA 的支援相當不錯，未來也可以嘗試看看。