Vue+PWA实践过程

13,177 阅读3分钟

前言


最近这一年,作为一名前端狗,一直在优化性能的道路一去不回头。vue、nginx、webpack、redis,能做优化的地方,都不曾放过,只为那最后一秒的舒爽!(猥琐的一笑)。

之前一直对PWA所有关注,希望通过PWA对目前的项目做一次性能上的提升,趁着最近还算有点时间,对现在公司使用的前端结构做一次改造!

本次改造主要分两部分:

  • 改造基于vue cli3创建的项目
  • 改造基于webpack3.0打包的项目

关于PWA和Service Work的相关知识,在这里就不过多介绍了,大家可以自行百度

改造基于vue cli3创建的项目


新项目直接在vue create的时候,选择PWA模板,就可以启用PWA,这里主要介绍如果在已有项目中启用PWA

1. 安装PWA插件

vue add pwa

需要注意的是vue cli3 是基于workbox来实现PWA

2.目录结构

安装完插件后,目录结构如下:

  • registerServiceWorker.js:负责注册service work
  • service-worker.js:自定义的service work配置文件

3.修改registerServiceWorker.js,做兼容处理

目前部分浏览器还不支持service work,我们需要保证它们依旧能正常工作。 通过'serviceWorker' in window.navigator来判断浏览器是否支持sw,具体代码如下:

/* eslint-disable no-console */

import {register} from 'register-service-worker';

if ('serviceWorker' in window.navigator && process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}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);
    }
  });
}

4.编写service-work.js

完整的service-work,可以参考我们的前端模板工程中service-work.js,下面我们来逐步介绍:

  • 设置缓存的前缀和后缀,我们一般用项目名作为前缀,版本号作为后缀
workbox.core.setCacheNameDetails({
  prefix: 'easy-front-vue-cli3',
  suffix: 'v1.0.0'
});
  • 配置service work的更新激活策略
workbox.core.skipWaiting(); // 强制等待中的 Service Worker 被激活
workbox.core.clientsClaim(); // Service Worker 被激活后使其立即获得页面控制权
  • 设置预加载
workbox.precaching.precacheAndRoute(self.__precacheManifest || []);
  • 设置资源缓存策略 workbox主要提供了以下几种缓存策略:

Stale-While-Revalidate:使用缓存的内容(如果可用)尽快响应请求,如果未缓存,则使用网络请求。 然后,网络请求得到数据用于更新缓存。

Cache First:如果请求命中缓存,则将使用缓存的响应来完成请求,不会使用网络。 如果没有命中缓存,将通过网络请求来获取数据,并且将数据缓存,以便下次直接从缓存获取数据。该模式可以为前端提供快速响应的同时,减轻服务器压力。但是数据的时效性就需要开发者通过设置缓存过期时间或更改service-work.js里面的修订标识来完成缓存文件的更新

Network First:优先从网络获取最新数据。 如果成功,它会将数据放入缓存。如果网络无法返回响应,则将使用缓存数据。

Network Only:只使用网络请求数据

Cache Only:只使用缓存数据

具体使用什么策略,还是需要根据实际的业务场景和需求来设定,我采用的基本策略如下:

// 缓存web的css资源
workbox.routing.registerRoute(
  // Cache CSS files
  /.*\.css/,
  // 使用缓存,但尽快在后台更新
  workbox.strategies.staleWhileRevalidate({
    // 使用自定义缓存名称
    cacheName: 'css-cache'
  })
);

// 缓存web的js资源
workbox.routing.registerRoute(
  // 缓存JS文件
  /.*\.js/,
  // 使用缓存,但尽快在后台更新
  workbox.strategies.staleWhileRevalidate({
    // 使用自定义缓存名称
    cacheName: 'js-cache'
  })
);

// 缓存web的图片资源
workbox.routing.registerRoute(
  /\.(?:png|gif|jpg|jpeg|svg)$/,
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'images',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60 // 设置缓存有效期为30天
      })
    ]
  })
);

// 我们很多资源在其他域名上,比如cdn、oss等,这里做单独处理,需要支持跨域
workbox.routing.registerRoute(
  /^https:\/\/cdn\.my\.com\/.*\.(jpe?g|png|gif|svg)/,
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'cdn-images',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 60,
        maxAgeSeconds: 5 * 24 * 60 * 60 // 设置缓存有效期为5天
      })
    ],
    fetchOptions: {
      credentials: 'include' // 支持跨域
    }
  })
);

// 缓存get api请求的数据
workbox.routing.registerRoute(
  new RegExp('https://m.my.com/api'),
  workbox.strategies.networkFirst({
    cacheName: 'api'
  })
);

// 缓存post api请求的数据
// const bgSyncPlugin = new workbox.backgroundSync.Plugin('apiQueue', {
//   maxRetentionTime: 1 * 60
// });

// workbox.routing.registerRoute(
//   /.*\/api\/.*/,
//   new workbox.strategies.NetworkOnly({
//     plugins: [bgSyncPlugin]
//   }),
//   'POST'
// );

5.修改main.js

加入以下代码

import './registerServiceWorker';

6.修改vue.config.js

参考我们的前端模板工程中vue.config.js.js,下面列举了跟PWA相关的部分:

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-worker.js',
      importWorkboxFrom: 'disabled',
      importScripts: 'https://cdn.your.info/workbox-v4.3.1/workbox-sw.js'
      // ...other Workbox options...
    }
  }
  • workboxPluginMode:workbox的模式,GenerateSW使用默认模式,InjectManifest使用自定义模式,我推荐使用InjectManifest,自由度更大
  • workboxOptions.swSrc: 指定service-worker.js所在位置
  • workboxOptions.importWorkboxFrom: 引入workbox依赖库的方式,默认的依赖库在Google的cdn上,国内情况大家都懂,因此建议将依赖库放到大家自己的cdn上,所以我这里设置了disabled
  • workboxOptions.importScripts: 指定你自己的依赖库的cdn的url

7.配置manifest.json

PWA支持创建快捷方式,manifest.json包含了快捷方式的名称、图标、入口路径等配置。 如果不需要快捷方式,也可以不创建

{
  "name": "easy-front-vue-cli3",
  "short_name": "easy-front-vue-cli3",
  "icons": [
    {
      "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": "/",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

改造基于webpack3.0打包的项目

我们这里只介绍跟vue cli3不同的部分,registerServiceWorker.js、service-work.js和manifest.json这些相同部分就不重复介绍了。

1.安装依赖包

npm install workbox-webpack-plugin -D
npm install register-service-worker -S

2.修改webpack.prod.conf.js

// 在webpack中加入workbox插件,并进行配置
const {InjectManifest} = require('workbox-webpack-plugin');
  webpackConfig.plugins.push(new InjectManifest({
    swSrc: 'src/service-worker.js',
    importWorkboxFrom: 'disabled',
    importScripts: 'https://cdn.your.info/workbox-v4.3.1/workbox-sw.js'
  }));

3.修改main.js

加入以下代码

import './registerServiceWorker';

参考


我的模板工程:easy-front-vue-cli3

workbox仓库地址:workbox

PWA学习资料:PWA应用实战