翻译使用Vue JS，Webpack&Material Design开发渐进式web应用(PWA)[Part 3]

title: 使用Vue JS，Webpack&Material Design开发渐进式web应用(PWA)[Part 3]
date: 2018-03-04 12:00
tags: [前端,PWA]
categories: 技术

• [Part 1] Create a Single Page Application with VueJS, Webpack and Material Design Lite

• [Part 2] Connect the App with a distant API with Vue-Resource and VueFire (by Kevin Jean)

• Service Worker 以及它是如何提供离线体验的；

• 如何缓存应用的App shell(core js and css)；

• 如何缓存应用的HTTP请求(external assets, cat pictures, …)；

• 如何缓存Firebase数据。

[PART 3]使用Service Workers实现离线功能

Service Workers简介

Service Workers是如何工作的？

Service Workers库和VueJS

• 参考谷歌POC手动实现Service Workers

• 在缓存静态资源时使用sw-precache库，在应用运行时使用sw-toolbox和sw-precache一同实现缓存

• 使用谷歌开发的workbox插件

第一步：使用sw-precache缓存静态资源

npm install sw-precache-webpack-plugin --save

配置sw-precache

var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')

...

var webpackConfig = merge(baseWebpackConfig, {
  ...
  plugins: [
    ...
    // service worker caching
    new SWPrecacheWebpackPlugin({
      cacheId: 'my-vue-app',
      filename: 'service-worker.js',
      staticFileGlobs: ['dist/**/*.{js,html,css}'],
      minify: true,
      stripPrefix: 'dist/'
    })
  ]
})

<%= htmlWebpackPlugin.options.serviceWorkerLoader %>

npm run build

sw-precache缓存机制

"use strict";

var precacheConfig = [
  ["index.html", "218187414cc275eaa7bb37f098e0fc92"],
  ["static/css/app.d1a62a5e00430713ca6ccd67cb5fd580.css", "d1a62a5e00430713ca6ccd67cb5fd580"],
  ["static/js/app.04ef0c51d385926ea560.js", "13cfbbcfd7077380247bbbb6d9731463"],
  ["static/js/manifest.2d92f59992387f01763b.js", "00451931f39fbee842952a5d349f22a6"],
  ["static/js/vendor.0140506021c3a9c89dd2.js", "27f61c490b1b8af1d621b16afdd174bb"]
];
...
urlsToCacheKeys = new Map(precacheConfig.map(function (e) {
  var t = e[0], n = e[1], r = new URL(t, self.location), a = createCacheKey(r, hashParamName, n, !1);
  return [r.toString(), a]
}));

self.addEventListener("install", function (e) {
  ...
});

self.addEventListener("activate", function (e) {
  ...
})

self.addEventListener("fetch", function (e) {
  if ("GET" === e.request.method) {
    var t, n = stripIgnoredUrlParameters(e.request.url, ignoreUrlParametersMatching);
    t = urlsToCacheKeys.has(n);
    t || (n = addDirectoryIndex(n, "index.html"), t = urlsToCacheKeys.has(n));
    t && e.respondWith(caches.open(cacheName).then(function (e) {
      return e.match(urlsToCacheKeys.get(n)).then(function (e) {
        if (e)return e;
        throw Error("The cached response that was expected is missing.")
      })
    }).catch(function (t) {
      return console.warn('Couldn\\'t serve response for "%s" from cache: %O', e.request.url, t), fetch(e.request)
    }))
  }
});

测试离线模式

npm run build

sudo npm install -g serve

serve dist/

• 返回到Service Workers菜单，激活(勾选)Offline模式；

• 在Network选项下可以看到Offline模式也被激活(勾选)了；

• 在Network选项下勾选Disable cache选项；

• 刷新页面。

• 从https://code.getmdl.io/1.2.1/material.blue-red.min.css请求的Material Design Lite字体和样式文件

• 猫咪的图片

第二步：使用sw-toolbox缓存HTTP请求

缓存外部的Material Design Lite资源

var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')

...

var webpackConfig = merge(baseWebpackConfig, {
  ...
  plugins: [
    ...
    // service worker caching
    new SWPrecacheWebpackPlugin({
      cacheId: 'my-vue-app',
      filename: 'service-worker.js',
      staticFileGlobs: ['dist/**/*.{js,html,css}'],
      minify: true,
      stripPrefix: 'dist/',
      runtimeCaching: [
      {
        urlPattern: /^https:\\/\\/fonts\\.googleapis\\.com\\//,
        handler: 'cacheFirst'
      },
      {
        urlPattern: /^https:\\/\\/fonts\\.gstatic\\.com\\//,
        handler: 'cacheFirst'
      },
      {
        urlPattern: /^https:\\/\\/code\\.getmdl\\.io\\//,
        handler: 'cacheFirst'
      }]
    })
  ]
})

缓存应用中的猫咪图片

runtimeCaching: [
   {
      urlPattern: /^https:\\/\\/thecatapi\\.com\\/api\\/images\\/get\\.php\\?id/,
      handler: 'cacheFirst'
   },
   {
      urlPattern: /^https:\\/\\/(\\d+)\\.media\\.tumblr\\.com\\//,
      handler: 'cacheFirst'
   },
   {
      urlPattern: /^http:\\/\\/(\\d+)\\.media\\.tumblr\\.com\\//,
      handler: 'cacheFirst'
   },
   ...
]

第三步：使用localstorage api缓存Firebase WebSocket

• 如果用户可以访问网络（使用navigator.onLine检测），那么将Firebase Websocket的返回值缓存到浏览器的local storage中，then hook on Firebase WebSocket（？？？当请求返回的数据更新的时候也将其更新到local storage中的意思？）;

• 否则从local storage中取到缓存的数据。

<script>
  export default {
    methods: {
      displayDetails (id) {
        this.$router.push({name: 'detail', params: { id: id }})
      },
      getCats () {
        if (navigator.onLine) {
          this.saveCatsToCache()
          return this.$root.cat
        } else {
          return JSON.parse(localStorage.getItem('cats'))
        }
      },
      saveCatsToCache () {
        this.$root.$firebaseRefs.cat.orderByChild('created_at').once('value', (snapchot) => {
          let cachedCats = []
          snapchot.forEach((catSnapchot) => {
            let cachedCat = catSnapchot.val()
            cachedCat['.key'] = catSnapchot.key
            cachedCats.push(cachedCat)
          })
          localStorage.setItem('cats', JSON.stringify(cachedCats))
        })
      }
    },
    mounted () {
      this.saveCatsToCache()
    }
  }
</script>

总结

• 使用sw-precache缓存App Shell文件

• 使用se-toolbox的runtimeCaching缓存外部资源

• 使用浏览器的local storage缓存Firebase websockets