使用 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 创建你的第一个 PWA 应用
vue

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

cd pwaonenpm 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 平台的显示形式如下(安卓测试没有显示):

使用 vue 创建你的第一个 PWA 应用
任务栏
使用 vue 创建你的第一个 PWA 应用
开始菜单

更多的 manifest 配置,可以查看 https://developer.mozilla.org/zh-CN/docs/Web/Manifest

打包测试

npm run buildnpx http-server dist

通过打包和启动 http-server 服务器我们就可以在本地访问我们的 PWA 服务了。

通过浏览器的开发者工具,我们可以发现,在 Service Workers 列表中,已经有一个成功注册了。首次访问后,再次访问的可离线的资源也变成由 Service Worker 来响应。我们这里是使用的是插件自行处理的方式,没有写自定义的 sw.js 如果有需求也是可以按照官方文档的说明自己写,然后自行注册的。

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

下图是缓存存储的情况

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

在关闭 http-server 的情况下,我们依然可以访问这个站点,直到我们清除网站数据。

使用 vue 创建你的第一个 PWA 应用
清除缓存

安装与卸载

在电脑端的 Edge 和 Chrome 其安装提示都是在地址栏右边显示一个小按钮,在首次打开网站时会多显示几秒几个诸如 “安装” 的提示文字。下图是在 Edge 点击安装按钮后的效果。

使用 vue 创建你的第一个 PWA 应用
安装提示

安卓系统因使用浏览器的差异,表现也不尽相同,下图使用的是 MIUI 自带的系统浏览器(暗黑模式)。

使用 vue 创建你的第一个 PWA 应用
手机安装提示

电脑在安装后可以直接操作系统的软件管理列表中看到它,可查看详情如下:

使用 vue 创建你的第一个 PWA 应用
软件详情

通过注册表的搜索(大致在 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 ),我们可以找到类似如下的软件注册信息:

使用 vue 创建你的第一个 PWA 应用
软件注册表

根据注册表信息,打开软件安装目录,我们可以看到如下的目录结构:

使用 vue 创建你的第一个 PWA 应用
目录结构

也就是说 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/ 的在线工具