vue3+vite-plugin-pwa实现PWA demo

一、概念

1. 什么是PWA (官网链接)

PWA（Progressive Web App）是一种能够提供类似于原生应用体验的网页应用。它结合了网页和移动应用的优点，具有离线访问、推送通知、快速加载等特性。

2. 有什么用

PWA 可以提升用户体验，增加用户留存率。它们可以在没有网络连接的情况下工作，并且可以像原生应用一样被添加到主屏幕。

二、实现步骤

1. 先创建一个默认的vue项目

npm create vue@latest

2. 安装 vite-plugin-pwa 依赖

npm install vite-plugin-pwa --save-dev

3. vite.config.ts里配置

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    VitePWA({
      registerType: 'autoUpdate',  // 配置 service worker 的注册方式
      includeAssets: ['favicon.svg', 'robots.txt'],  // 指定需要包含的静态资源
      manifest: {
        name: 'My PWA App',
        short_name: 'My App',
        description: 'A progressive web app built with Vite',
        theme_color: '#ffffff',
        icons: [
          {
            src: 'ball192.png',//像素尺寸一定要对应
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: 'ball512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
      },
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

注意配置的manifest的icons图片像素尺寸一定要对应

4. 打包

npm run build

5. 启动静态资源dist

创建server.js

npm install express -D
node server.js

6. 浏览器安装应用
   

安装后，桌面会多一个应用My PWA App,打开效果如下图

打开f12可以看到资源缓存情况 ServiceWorder

控制台Applycation里可以看到具体信息

Storage Cache Storage里可以看到缓存的数据

Application Storage 里可以清除缓存数据，清楚后再次刷新请求就不是从缓存里取了，而是会重新请求

三、 网络断开时的接口请求情况

当网络断开时，PWA 会使用缓存的数据来响应接口请求。具体流程如下：

1. 首次请求: 当用户首次访问应用时，Service Worker 会缓存接口的响应数据。
2. 离线访问: 当用户在离线状态下访问应用时，Service Worker 会从缓存中读取数据并返回，确保应用能够正常运行。
3. 缓存更新: 当网络恢复时，Service Worker 会自动更新缓存的数据，确保用户始终获得最新的数据。

import { defineConfig } from 'vite';
import VitePWA from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.svg', 'robots.txt'],
      manifest: {
        name: 'My PWA App',
        short_name: 'My App',
        description: 'A progressive web app built with Vite',
        theme_color: '#ffffff',
        icons: [
          {
            src: 'icons/icon-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: 'icons/icon-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
      },
      workbox: {
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/api\.example\.com\/.*$/,
            handler: 'CacheFirst',
            options: {
              cacheName: 'api-cache',
              expiration: {
                maxEntries: 50,
                maxAgeSeconds: 300,
              },
              cacheableResponse: {
                statuses: [0, 200],
              },
            },
          },
        ],
      },
    }),
  ],
});

在这个示例中，我们使用 vite-plugin-pwa 插件来配置 PWA，并添加了对接口请求的缓存策略。具体来说，我们对匹配 https://api.example.com/ 的请求使用 CacheFirst 策略，并设置了缓存的最大条目数和最大缓存时间。

这里就不测试了，感兴趣可以配置个接口，请求一下测试

卸载结束😎

附 github demo 代码 🐒