使用 vue 创建你的第一个 PWA 应用

本文将介绍使用 VUE3 框架创建 PWA 应用的过程。相关代码 https://github.com/sangyuxiaowu/pwalearn

背景

因为工作上的需要，刚好有跨端和离线缓存的需求，就开始深入研究很早之前就关注的 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。

vue

接下来就很熟悉了，进入目录安装依赖。

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 如果有需求也是可以按照官方文档的说明自己写，然后自行注册的。

Service Workers

下图是缓存存储的情况

缓存

在关闭 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，除了可以通过浏览器来管理外，我们也可以把它作为普通的软件一样在系统的应用管理里进行操作。

其他相关

经过几番摸索和尝试也发现了一些实际使用中的情况，或许随着时间的推移或因个体差异会有些出入，还请指正，这里就分享出来大家可以做个参考。

1.在微信中打开 PWA 也是可以缓存的，可以离线使用，但是大概40分钟左右就没有了。2.触发浏览器的安装的提醒需要你使用本地 localhost 或 127.0.0.1 来测试，或者直接 https 部署，这点和 web 调用硬件 API 的要求差不多。3.安卓的话，安装的触发还是建议使用系统自带的浏览器打开，手机若使用 edge 或者 chrome，需要授权给应用创建桌面快捷方式的权限。4.如果你有多个项目开发测试，建议你 PWA 测试缓存完毕卸载或是清除缓存，不然某一天你调试新项目会奇怪这个网页到底怎么冒出来的。5.PWA 应用也可以打包为 APP 上架 Store，你可以前往尝试 https://www.pwabuilder.com/ 的在线工具