Vue3 + Vite 中使用 vite-plugin-pwa 搭建 PWA 项目

 由于项目需要离线访问，并在桌面创建快捷方式启动。本文将介绍 Vue3 + Vite 使用 vite-plugin-pwa 搭建 一个 PWA 项目。

第一步：创建Vue3项目

按照Vue官网提示，默认安装 （注意：在相应位置输入你的项目名称）

npm init vue@latest

✔ Project name: … <your-project-name>    <---这里输入你的项目名称
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes <---这里选Yes，稍后测试用
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

> cd <your-project-name>   <---这里输入你的项目名称
> npm install
> npm run dev

你的vue默认页面应该可以运行了， 快去试试吧

第二步：前端Vue的配置及创建相应的页面

1. 安装 vue-axios， 稍后测试用

npm i vue-axios

第三步：基本的vite config 配置。 注意，每次修改配置需要重新启动项目。

import { fileURLToPath, URL } from 'node:url'
import { VitePWA } from 'vite-plugin-pwa'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      manifest: {
        name: 'My Awesome App',
        short_name: 'MyApp',
        description: 'My Awesome App description',
        theme_color: '#ffffff',
        icons: [		//添加图标， 注意路径和图像像素正确
          {
            src: 'icon-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: 'icon-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ]
      },
      registerType: 'autoUpdate',
      workbox: {
        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],		//缓存相关静态资源
        runtimeCaching: [{		//由于要测试第三方API， 这里配置缓存访问第三方API的资源
          handler: 'CacheFirst',
          urlPattern: /^https:\/\/jsonplaceholder/,		//注意，要修改成要测试的API。请使用正则表达式匹配
          method: 'GET',
          options: {
            cacheName: 'test-external-api',		//创建缓存名称
            expiration: {
              maxEntries: 10,
              maxAgeSeconds: 60 * 60 * 24 * 365 // <== 365 days
            },
            cacheableResponse: {
              statuses: [0, 200]
            }
          }
        }]
      },
      devOptions: {
        enabled: true
      }
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

第四步：打包项目， 并进行启动测试。

注意测试环境。 这里在Laravel Valet 测试失败。VScode + Live Server 测试成功。 详情如下。

1. 打包项目

npm run build

2. 访问前端页面。

3. 用户安装后可在桌面找到对应图标。

4. 用户可通过图标启动APP，启动后的APP对浏览器上部的相关操作做了隐藏， APP看起来像一个本地程序。同时， 用户可在APP中进行卸载。

第四步：项目在线测试。

1. 通过 Chrome 访问页面。

2. 可以看到 Service Worker 已经成功注册。

a. Service Work 信息。

b. 存储信息， 这里可以对站点信息进行清除。

3. 静态资源已经成功缓存。

4. 打开网络选项卡， 刷新页面。 可见Service Worker 响应相关资源。

第五步：项目离线测试。

1. 网络选项卡， 选择离线。

2. 访问 About 页面进行测试。

3. 可以成功访问 About 页面。

4. 查看网络选项卡， 可见 Service Worker 对 About 页面请求的响应。

第六步：请求API测试。

1. About 页面， 添加 API 请求测试。

<script setup>
import axios from "axios";

console.log('about page')
axios
    .get('https://jsonplaceholder.typicode.com/posts/1')		//请修改成可用的测试API，对应vite.config.js
    .then((response) => {
      console.log(response)
    })

</script>

2. 首次访问 About 页。 （保持离线状态）

a. About 页可正常显示。

b. 查看网络选项卡， 这里显示API请求失败。因为没有对这个API请求的缓存， 并且网络处于离线状态。

c. 恢复到正常网络。

d. 刷新 About 页， 可以看到 API 请求， 并且被成功缓存。

e. 查看 console 选项卡， 可以看到测试输出。

f. 选择网络选项卡， 我们再切换到离线状态。

g. 刷新 About 页。依旧可以看到 API 请求测试的输出。

h. 切换到网络选项卡， 可见 Service Worker 响应了 API 请求。 （由于处于离线状态 Service worker， 读取缓存， 响应了 API 请求。）