vue项目实现PWA桌面应用

vue项目实现PWA桌面应用

在vue-cli4搭建的项目中使用PWA

1.安装pwa插件依赖 注意： 安装PWA - 需要全局安装 vue-cli

vue add @vue/pwa

会自动在src下生成registerServiceWorker.js文件、自动在main.js中导入

2.重新完善一下registerServiceWorker.js 的代码如下 ：（无需改动，复制即可）

/* eslint-disable no-console */

import { register } from "register-service-worker";
if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    if (process.env.NODE_ENV === "development") {
      register(`${window.location.origin}/service-worker.js`, {
        ready() {
          console.log(
            "App is being served from cache by a service worker.\n" +
              "For more details, visit https://goo.gl/AFskqB"
          );
        },
        registered() {
          console.log("Service worker has been registered.");
        },
        cached() {
          console.log("Content has been cached for offline use.");
        },
        updatefound() {
          console.log("New content is downloading.");
        },
        updated() {
          console.log("New content is available; please refresh.");
        },
        offline() {
          console.log(
            "No internet connection found. App is running in offline mode."
          );
        },
        error(error) {
          console.error("Error during service worker registration:", error);
        },
      });
    }
  });
}

3.在src下新建 service-worker.js 文件

/* eslint-disable no-undef*/
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js')
if (workbox) {
  console.log(`Yay! Workbox is loaded 🎉`)
} else {
  console.log(`Boo! Workbox didn't load 😬`)
}
 
workbox.core.setCacheNameDetails({
  prefix: 'ochase-search',
  suffix: 'v1.0.0'
})
workbox.core.skipWaiting() // 强制等待中的 Service Worker 被激活
workbox.core.clientsClaim() // Service Worker 被激活后使其立即获得页面控制权
workbox.precaching.precacheAndRoute(self.__precacheManifest || []) // 设置预加载
 
// 缓存web的css资源
workbox.routing.registerRoute(
  // Cache CSS files
  /.*\.css/,
  // 使用缓存，但尽快在后台更新
  new workbox.strategies.StaleWhileRevalidate({
    // 使用自定义缓存名称
    cacheName: 'css-cache'
  })
)
 
// 缓存web的js资源
workbox.routing.registerRoute(
  // 缓存JS文件
  /.*\.js/,
  // 使用缓存，但尽快在后台更新
  new workbox.strategies.StaleWhileRevalidate({
    // 使用自定义缓存名称
    cacheName: 'js-cache'
  })
)
 
// 缓存web的图片资源
workbox.routing.registerRoute(
  /\.(?:png|gif|jpg|jpeg|svg)$/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'images',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60 // 设置缓存有效期为30天
      })
    ]
  })
)
 
// 如果有资源在其他域名上，比如cdn、oss等，这里做单独处理，需要支持跨域
workbox.routing.registerRoute(
  /^https:\/\/cdn\.ochase\.com\/.*\.(jpe?g|png|gif|svg)/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'cdn-images',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 5 * 24 * 60 * 60 // 设置缓存有效期为5天
      })
    ],
    fetchOptions: {
      credentials: 'include' // 支持跨域
    }
  })
)

4. vue.config.js 配置PWA

module.exports = {
 pwa: {
  // 应用程序的名称
  name: "xxx",

  // 应用程序的主题颜色，通常会影响到地址栏的颜色和启动画面的颜色
  themeColor: "#4DBA87",

  // 针对 Windows 设备上显示的图标的背景颜色
  msTileColor: "#000000",

  // 指示是否将 PWA 作为全屏应用在 iOS 上运行
  appleMobileWebAppCapable: "yes",

  // 设置 iOS 设备上状态栏的样式
  appleMobileWebAppStatusBarStyle: "black",

  // Workbox 插件的模式，可以是 'GenerateSW' 或 'InjectManifest'
  // 'InjectManifest' 模式允许自定义 Service Worker 文件
  workboxPluginMode: "InjectManifest",

  // Workbox 插件的选项配置对象
  workboxOptions: {
    // 引入外部脚本，这里引入了 Workbox 的 CDN 脚本
    importScripts: [
      "https://storage.googleapis.com/workbox-cdn/releases/5.1.4/workbox-sw.js",
    ],

    // 排除特定文件类型不进行缓存，这是一个正则表达式数组，用来匹配需要排除的文件
    // 这里排除了 .html 文件
    exclude: [/\.html$/],

    // 自定义 Service Worker 文件的位置
    swSrc: "src/service-worker.js",
  },
}
//......其他配置
}

5.public下创建 manifest.json文件（json文件要删掉注释，不然后续打包会报错）

{
  "short_name": "短名称", // 用来描述应用的短名字。当应用的名字过长，在桌面图标上无法全部显示时，会用short_name中定义的来显示。
  "name": "xxxx", // 用来描述应用的名称，会显示在各类提示的标题位置和启动画面中。
  "icon": [  // 用来设置Web App的图标集合。
      {
       "src": "./img/icons/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
      },
      {
       "src": "./img/icons/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
      }
  ],
  "start_url": "index.html", // 用来描述当用户从设备的主屏幕点击图标进入时，出现的第一个画面。
  "display": "standalone", // 用来指定 Web App 从主屏幕点击启动后的显示类型
  "background_color": "#002140", // 用来设置Web App启动画面的背景颜色
  "theme_color": "#002140" // 定义和background_color一样的CSS颜色值，用于显示Web App的主题色，显示在banner位置。
}

6.打包发布到nginx服务器下就可以进行访问查看了

可能遇到的问题：

TypeError: Cannot read properties of undefined (reading ‘tap‘)

解决方法： 将package.json文件中的@vue/cli-plugin-pwa版本降下来即可（记得重新npm install一下），建议安装和 "@vue/cli-service": "4.4.4",同一个版本。

如果F12查看Application时，Service Workers没有内容

解决方法： 原因是没有正确的注册Service Workers ， 解决办法：注意registerServiceWorker.js下的register(${process.env.BASE_URL}/service-worker.js路径问题，看看代码下process.env.NODE_ENV的值以及有没有process.env.BASE_URL 。

✨✨另外需要注意的是：

注意⚠️⚠️⚠️PWA是基于Service Worker，由于Service Worker权限很高，所以只支持https协议或者localhost⚠️⚠️⚠️ 本地运行项目后在localhost下可以看到这个图标， 后续安装即可。