利用PWA特性实现离线化

引入

PWA（渐进式网页应用）对于关注新技术得同学想必已不陌生。14年至今，其应用不如应有的那么广泛，最大的障碍：在iOS平台缺乏支持，近期已被打破 —— Safari技术预览版已经默认开启 Service Worker。

从开发者角度，缺少一个开箱即用的方案，且规范本身在快速发展，则是技术人员选择观望的重要原因。本文将以专属海报为例，介绍通过 workbox 工具， 快速为项目启用 PWA 中离线特性的方法，以及技巧总结。

workbox介绍

workbox 是用来实现网页应用离线化的构建工具，通过生成的 service worker 文件，让你的离线静态资源管理策略得以在用户端实现。由于 service worker 本身是飞速发展规范，且客户端支持程度不一，通过调用 workerbox 的 API，可以最大程度的屏蔽这些兼容问题，从这个方面理解，有点像 jQuery 在 ie 时代的作用，差别是前者解决的是 service work 运行环境的兼容性问题，而 jQuery 解决的事浏览器兼容性问题。

workbox 本身集成了常用的五套缓存策略

Cache only；

Cache first, falling back to network；

Cache, with network update；

Network only；

Network first, falling back to cache

策略详情以及 API 可参考文档「 http://t.cn/RH0YC5k 」这里不再赘述。

workbox 底层整合了sw-precache ， sw-toolbox 等工具，对于熟悉这些工具的同学，理解接口和排查问题时应该会轻松些。

结合专属海报

从

原文中此处为链接，暂不支持采集

可以看出，专属海报属于小型网页应用，本身没有很复杂的构建过程，所以我选择gulp作为构建工具。

专属海报实现离线化，其资源可分为三类：

1、应用自身逻辑和样式资源做预缓存（precaching）：在页面加载完成后就缓存到 Cache Storage，之后除非部署新版，都将从缓存读取资源

2、cdn库文件使用运行时缓存（runtime caching），读取时采用缓存优先（cache first）策略：使用到到时候从网络加载，第二次起从缓存加载

  
  
  
  


   
   
   
   
  {

   
   
   
   
      urlPattern : 'https://vendor-Url/(.*)',

   
   
   
   
      handler: 'cacheFirst',

   
   
   
   
      options: {

   
   
   
   
        cacheableResponse: {

   
   
   
   
          statuses: [0, 200]

   
   
   
   
        }

   
   
   
   
      }

   
   
   
   
    },

   
   
   
   
    {

   
   
   
   
      urlPattern : 'https://CDN-Url/(.*)',

   
   
   
   
      handler: 'cacheFirst',

   
   
   
   
      options: {

   
   
   
   
        cacheableResponse: {

   
   
   
   
          statuses: [0, 200]

   
   
   
   
        }

   
   
   
   
      }

   
   
   
   
    }

  
  
  
  

3、请求接口的数据使用运行时缓存（runtime caching），网络优先策略（network first）：优先通过网络读取，断网后从缓存读取，用于实现离线浏览（不可提交）

  
  
  
  


   
   
   
   
  {

   
   
   
   
      urlPattern : 'https://API-Url/(.*)',

   
   
   
   
      handler: 'networkFirst',

   
   
   
   
      options: {

   
   
   
   
        cacheableResponse: {

   
   
   
   
          statuses: [0, 200]

   
   
   
   
        }

   
   
   
   
      }

   
   
   
   
    }

  
  
  
  

完整的 gulp task 可参考配置「 http://t.cn/RH0TVxV 」

其他场景

对于更加复杂的项目，可能 workbox 提供的缓存策略无法满足你的需求，这就需要自己定制一些路由逻辑。

对于复杂的全新项目，则可以考虑直接拿 lavas 生成脚手架，降低初始成本，不过感觉后续遇到问题，这些“省”下的时间还是要还回来的。

总结

专属海报在开发中期就已接入 workbox1.X，但考虑到项目自身还未进入稳定状态，另一方面技术规范和客户端支持程度也不完备，而且缺乏效果监控方法。综合考虑收益和风险点，一直未在生产环境启用此特性，而目前随着 iOS 的支持和技术逐渐成熟，项目中启用 PWA 的时机将趋近成熟。

将新技术引入实际项目后，理论上应该解决的问题是否如预期得到解决，解决效果如何？下一篇将介绍通过在服务端定期记录 Lighthouse 跑分结果，来度量优化效果的一些思考。

参考

Google 开发者网站 「 http://t.cn/RH0TmrQ 」

饿了么的 PWA 升级实践 by 黄玄 「 http://t.cn/RH0TQN6 」

借助Service Worker和cacheStorage缓存及离线开发 by 张鑫旭 「 http://t.cn/RKxXSi0 」

---

微信扫码，或订阅Feed获取最新动态。