vue-cli3构建PWA离线应用

vue-cli3使用PWA

1.安装pwa插件依赖

vue-cli3安装pwa插件时会安装register-service-worker依赖包,并自动生成一个registerServiceWorker.js（src文件下）文件并在main.js中添加导入.

(1)第一种方式,在vue create初始化项目时,勾选Progressive Web App (PWA) Support会自动安装pwa插件依赖

(2)第二种方式,手动安装pwa插件

vue add pwa

2.根目录下添加vue.config.js配置文件,配置pwa

module.exports = {
  pwa: {
    name: "easy-front-vue-cli3",
    themeColor: "#4DBA87",
    msTileColor: "#000000",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",
    // configure the workbox plugin (GenerateSW or InjectManifest)
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: "./src/service-work.js",
      importWorkboxFrom: "disabled",
      importScripts: "https://cdn.your.info/workbox-v4.3.1/workbox-sw.js"
      // ...other Workbox options...
    }
  }
};

3.在src目录下添加service-worker.js文件

// 判断workbox是否加载成功
if (workbox) {
  console.log(`Yay! Workbox is loaded `);
} else {
  console.log(`Boo! Workbox didn't load `);
}

workbox.core.setCacheNameDetails({
  prefix: "3td-voice-web",
  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\.my\.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" // 支持跨域
    }
  })
);

忽略url参数

在weorkbox中如果预加载precacheAndRoute不做任何设置,url所带的参数会影响worker service的加载.index.html和index.html?t=12345请会被看作是不同的请求,worker service不会将其看作同一个HTML进行处理.可以更改带有搜索参数的请求以删除特定值或删除所有值。

// 设置预加载
workbox.precaching.precacheAndRoute(self.__precacheManifest || [], {
  // 忽略url参数
  ignoreURLParametersMatching: [/.*/]
});