使用 vue 创建你的第一个 PWA 应用-Windows系列-PHP中文网

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

爱谁谁

发布： 2025-08-30 08:21:12

原创

225人浏览过

由于工作需要，我需要跨平台和离线缓存功能，因此深入研究了之前关注的 pwa 技术。恰逢微软、英特尔与谷歌共同举办的“第二届中国 pwa 开发者日”，我有幸参加了这次盛会，期间我们看到了许多新的工具和技术。

Progressive Web Application，即“渐进式网页应用”，理论上可以通过 Web 实现 APP 提供的所有服务。对于我来说，更直观的感受是，以前需要转换文件格式（如字体、图片、电子书等）时，必须下载各种转换软件，而现在只需打开一个转换网站即可。Web 确实非常方便，相信每个人的 Web 收藏夹里都有成百上千的书签，每个网站就是一个服务。然而，相较于桌面 APP，普通网站缺乏独立入口和离线使用能力，PWA 技术的出现恰好填补了这一差距，甚至在某些方面超过了 APP，因为 Web 可以非常方便地进行更新。

众所周知，Web 技术发展迅速，已能调用和控制多种硬件设备。记得以前某些操作不支持时，我们通过 CefSharp 或 Electron 来实现，而现在的 Web 已不再是 IE6 的时代。当前的 Web 不仅可以控制 USB、蓝牙，还可以调用显卡资源，实现 VR 和 XR。

我们首先使用

npm init vue@latest

登录后复制

创建一个 VUE 项目，可以根据个人喜好选择初始配置。这里使用的工具是 Vite，Vite 号称是下一代的前端工具链，或许未来会有新的工具出现。

我启用了 TypeScript、JSX、Vue Router、Pinna、ESLint、Prettier 等插件。

立即学习“前端免费学习笔记（深入）”；

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

接下来，进入目录并安装依赖：

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)),
    },
  },
});

登录后复制

我们在这里添加了两个任务链接

shortcuts

登录后复制

，在 Windows 平台的显示形式如下（安卓测试未显示）：

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

manifest

登录后复制

配置，请查看 https://www.php.cn/link/6ba927e95e97f5564105147a9d188931

打包并测试：

npm run build
npx http-server dist

登录后复制

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

使用浏览器的开发者工具，我们可以发现，Service Workers 列表中已经成功注册了一个。首次访问后，再次访问的可离线资源也由 Service Worker 来响应。我们这里使用的是插件自动处理的方式，没有编写自定义的

sw.js

登录后复制

文件。如果有需求，也可以按照官方文档的说明自行编写并注册。

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

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

下图是缓存存储的情况：

使用 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。除了可以通过浏览器来管理外，我们也可以将其作为普通软件在系统的应用管理中进行操作。

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

在微信中打开 PWA 也可以缓存并离线使用，但大约 40 分钟后缓存会失效。
触发浏览器的安装提示需要使用本地 localhost 或 127.0.0.1 来测试，或者直接通过 HTTPS 部署，这点与 Web 调用硬件 API 的要求类似。
安卓设备上，建议使用系统自带的浏览器打开以触发安装提示。如果使用 Edge 或 Chrome，需要授权给应用创建桌面快捷方式的权限。
如果有多个项目开发测试，建议在 PWA 测试缓存完成后卸载或清除缓存，否则某天调试新项目时可能会奇怪这个网页怎么冒出来的。
PWA 应用也可以打包为 APP 上架 Store，可以尝试使用 https://www.php.cn/link/e9527aec68523b8ceb74e12b8685b96a 的在线工具。

以上就是使用 vue 创建你的第一个 PWA 应用的详细内容，更多请关注php中文网其它相关文章！