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 的支援相当不错，未来也可以尝试看看。