背景
因为工作上的需要，刚好有跨端和离线缓存的需求，就开始深入研究很早之前就关注的 PWA 技术。也刚好赶上微软、英特尔与谷歌携手举办的“第二届中国 PWA 开发者日”。有幸可以参加这次盛会，在会上，我们看到了很多新的工具和技术。
Progressive Web Application，全称“渐进式网页应用”。理论上来说 APP 可以提供的服务，我们通过 Web 也应该是可以获取，对我来说更直观的感受是以前我们需要转换文件格式（字体，图片，电子书等）需要下载各种的格式转换软件，现在只需要打开一个转换网站。Web 可以说很方便了，相信每个人的 Web 收藏夹里肯定会有成百上千的书签，一个网站就是一个服务。但是相对于桌面的 APP 来说，普通的网站没有独立的入口和离线使用的能力，PWA 技术的出现刚好弥补了这些差距，甚至在某些方面做到了比 APP 更好，毕竟 Web 可以很方便的更新。
众所周知，人间一天，前端一年。Web 早已实现对诸多硬件设备的调用和控制，还记得之前某些操作不支持的时候，我们是通过 CefSharp 或是 Electron 来实现，如今的 Web，已不是当年 IE6 的时代。当前的 Web 不仅可以控制 USB，蓝牙，还可以调用显卡资源，实现 VR 和 XR。
- 如果想体验一下 PWA，可以访问 Drawio 绘图应用： https://app.diagrams.net/
- 如果想回顾“第二届中国 PWA 开发者日”，可访问： https://live.csdn.net/room/MicrosoftReactor/VG6bKaiW
- 了解更多 Web 能力可前往：https://developer.mozilla.org/zh-CN/docs/Web/API
创建 VUE 项目
我们先使用 npm init vue@latest 创建一个 VUE 的项目，可以按照自己的喜好选择初始的配置。这里使用的工具目前是 Vite ，Vite 号称是下一代的前端工具链，说不定之后又出来了新的。
这里的插件我启用了 TypeScript、JSX、Vue Router、Pinna、ESLint、Prettier。
接下来就很熟悉了，进入目录安装依赖。
cd pwaone
npm i安装 PWA 支持
本来要用 vue add PWA 但是我们使用的是 Vite 工具，直接使用其 PWA 插件就可以了。
npm i vite-plugin-pwa -D编辑 vite.config.js 配置 vite-plugin-pwa，整体文件修改后如下，如果你没有启用 Jsx 可以去掉相关配置信息。
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import { VitePWA } from "vite-plugin-pwa";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
VitePWA({
manifest: {
name: "PWA 学习",
description: "我的第一个 PWA 项目",
theme_color: "#00bd7e",
icons: [
{
src: "/App_icon192.png",
sizes: "192x192",
type: "image/png",
},
{
src: "/App_icon512.png",
sizes: "512x512",
type: "image/png",
},
{
src: "/App_icon60.png",
sizes: "60x60",
type: "image/png",
},
],
},
shortcuts: [
{
name: "Open About",
short_name: "About",
description: "Open the about page",
url: "/about",
icons: [{ src: "/App_icon192.png", sizes: "192x192" }],
},
{
name: "Report issue",
short_name: "Report",
description: "Open the issue report page",
url: "/report",
icons: [{ src: "/App_icon192.png", sizes: "192x192" }],
},
],
},
registerType: "autoUpdate",
devOptions: {
enabled: true,
},
workbox: {
globPatterns: ["**/*.{js,css,html,ico,png,svg}"],
},
}),
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});
App_icon192.png 这些文件可以自己放不同大小的图片 Logo ，会不同的平台使用，图片我们放在项目中中的
public 目录。
这里我们加入了 2 个任务链接 shortcuts，具体在 Windows 平台的显示形式如下（安卓测试没有显示）：
更多的 manifest 配置，可以查看 https://developer.mozilla.org/zh-CN/docs/Web/Manifest
打包测试
npm run build
npx http-server dist通过打包和启动 http-server 服务器我们就可以在本地访问我们的 PWA 服务了。
通过浏览器的开发者工具，我们可以发现，在 Service Workers 列表中，已经有一个成功注册了。首次访问后，再次访问的可离线的资源也变成由 Service Worker 来响应。我们这里是使用的是插件自行处理的方式，没有写自定义的 sw.js 如果有需求也是可以按照官方文档的说明自己写，然后自行注册的。
下图是缓存存储的情况
在关闭 http-server 的情况下，我们依然可以访问这个站点，直到我们清除网站数据。
安装与卸载
在电脑端的 Edge 和 Chrome 其安装提示都是在地址栏右边显示一个小按钮，在首次打开网站时会多显示几秒几个诸如 “安装” 的提示文字。下图是在 Edge 点击安装按钮后的效果。
安卓系统因使用浏览器的差异，表现也不尽相同，下图使用的是 MIUI 自带的系统浏览器（暗黑模式）。
电脑在安装后可以直接操作系统的软件管理列表中看到它，可查看详情如下：
通过注册表的搜索（大致在 HKEY_CURRENT_USER\SOFTWARE\Classes\Local Settings\Software\Microsoft\Windows\CurrentVersion\AppModel\Repository\Packages\127.0.0.1-FB67779C_1.0.0.0_neutral__70zmge9146cb2 ），我们可以找到类似如下的软件注册信息：
根据注册表信息，打开软件安装目录，我们可以看到如下的目录结构：
也就是说 PWA 的 Windows 安装被打包为了 Windows Store App，除了可以通过浏览器来管理外，我们也可以把它作为普通的软件一样在系统的应用管理里进行操作。
其他相关
经过几番摸索和尝试也发现了一些实际使用中的情况，或许随着时间的推移或因个体差异会有些出入，还请指正，这里就分享出来大家可以做个参考。
- 在微信中打开 PWA 也是可以缓存的，可以离线使用，但是大概40分钟左右就没有了。
- 触发浏览器的安装的提醒需要你使用本地 localhost 或 127.0.0.1 来测试，或者直接 https 部署，这点和 web 调用硬件 API 的要求差不多。
- 安卓的话，安装的触发还是建议使用系统自带的浏览器打开，手机若使用 edge 或者 chrome，需要授权给应用创建桌面快捷方式的权限。
- 如果你有多个项目开发测试，建议你 PWA 测试缓存完毕卸载或是清除缓存，不然某一天你调试新项目会奇怪这个网页到底怎么冒出来的。
- PWA 应用也可以打包为 APP 上架 Store，你可以前往尝试 https://www.pwabuilder.com/ 的在线工具
