菜单

迈向PWA!利用serviceworker的离线访问方式

2019年4月4日 - Html/Html5

迈向PWA!利用serviceworker的离线访问格局

2017/02/08 · JavaScript
· PWA

本文作者: 伯乐在线
pangjian
。未经我许可,禁止转发!
欢迎参加伯乐在线 专栏撰稿人

微信小程序来了,能够选取WEB技术在微信营造一个拥有Native应用经验的使用,业界10分看好那种情势。可是你们或者不通晓,谷歌早已有像样的设计,甚至层次更加高。那正是PWA(渐进式增强WEB应用)。
PWA有以下两种特色:

全部那么些特征都以“优雅降级、渐进增强的”,给扶助的设施更加好的感受,不援救的设备也不会更差。那就和微信小程序那种糟糕设计的常有差异之处。

本博客也在向着PWA的势头迈进,第三步作者选用了Offline,也即是离线能力。能够让客户在尚未网络连接的时候依然可以利用部分服务。那个力量使用了ServiceWorker技术。

落到实处思路就是,利用service
worker,另起一个线程,用来监听全体网络请求,讲曾经呼吁过的数量放入cache,在断网的处境下,间接取用cache里面包车型的士财富。为呼吁过的页面和图表,呈现二个暗中认可值。当有互联网的时候,再重新从服务器更新。
图片 1
代码那里就不贴了,未来恐怕会专门写一篇来详细介绍ServiceWorker,有趣味的能够直接参考源码
挂号起来也丰硕便宜

JavaScript

// ServiceWorker_js (function() { ‘use strict’;
navigator.serviceWorker.register(‘/sw.js’, {scope:
‘/’}).then(function(registration) { // Registration was successful
console.log(‘ServiceWorker registration successful with scope: ‘,
registration.scope); }).catch(function(err) { // registration failed 🙁
console.log(‘ServiceWorker registration failed: ‘, err); }); })();

1
2
3
4
5
6
7
8
9
10
11
12
// ServiceWorker_js
(function() {
    ‘use strict’;
    navigator.serviceWorker.register(‘/sw.js’, {scope: ‘/’}).then(function(registration) {
      // Registration was successful
      console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope);
    }).catch(function(err) {
      // registration failed 🙁
      console.log(‘ServiceWorker registration failed: ‘, err);
    });
 
})();

此间须要专注的是,sw.js所在的目录要超越它的主宰范围,也正是scope。我把sw.js位居了根目录来决定总体目录。

接下去看看大家的末尾效果呢,你也足以在祥和的浏览器下断网尝试一下。当然有壹些浏览器近日还不帮助,比如有名的Safari。

引入

PWA(渐进式网页应用)对于关心新技巧得同学恐怕已不面生。1四年现今,其行使不及应有的那么周边,最大的障碍:在iOS平台缺少支撑,如今已被打破
—— Safari技术预览版已经暗中认可开启 Service Worker。

从开发者角度,贫乏2个开箱即用的方案,且专业自个儿在高速进步,则是技术职员选用观看的第3原因。本文将以专属海报为例,介绍通过
workbox 工具, 快捷为项目启用 PWA 中离线性格的方法,以及技术总括。

离线有缓存意况

图片 2

workbox介绍

workbox 是用来贯彻网页应用离线化的营造筑工程具,通过转变的 service worker
文件,让你的离线静态能源管理策略得以在用户端实现。由于 service worker
本身是急迅发展规范,且客户端补助程度不1,通过调用 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
等工具,对于熟知这个工具的同学,明白接口和排查难点时应该会轻松些。

离线无缓存情况

会显得多少个暗中认可的页面

图片 3

-EOF-

打赏补助笔者写出越来越多好文章,多谢!


打赏作者

结缘专属海报

原版的书文中此处为链接,暂不协理采集

能够看出,专属海报属于小型网页应用,本人并未有很复杂的营造进度,所以本身选取gulp作为构建筑工程具。

隶属海报达成离线化,其资源可分为3类:

1、应用自己逻辑和体裁财富做预缓存(precaching):在页面加载成功后就缓存到
Cache Storage,之后唯有安顿新版,都将从缓存读取能源

图片 4

二、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]
        }
      }
    }

三、请求接口的数目应用运转时缓存(runtime
caching),网络优先政策(network
first):优先通过互连网读取,断网后从缓存读取,用于落到实处离线浏览(不可提交)

  {
      urlPattern : 'https://API-Url/(.*)',
      handler: 'networkFirst',
      options: {
        cacheableResponse: {
          statuses: [0, 200]
        }
      }
    }

全体的 gulp task 可参考布局「 http://t.cn/RH0TVxV

打赏帮衬自个儿写出越多好小说,谢谢!

任选1种支付形式

图片 5
图片 6

1 赞 1 收藏
评论

任何场景

对此更为扑朔迷离的档次,或然 workbox
提供的缓存策略不或然满意你的须求,那就须求团结定制壹些路由逻辑。

对此复杂的全新项目,则能够设想直接拿 lavas
生成脚手架,下降伊始花费,可是感觉后续碰着难点,那个“省”下的时间或然要还重临的。

有关笔者:pangjian

图片 7

庞健,金融IT男。
个人主页
·
作者的篇章
·
5
·
  

图片 8

总结

依附海报在支付先前时代就已连接
workbox一.X,但思量到品种小编还未进入平稳意况,另一方面技术标准和客户端协助程度也不完备,而且缺少效果监察和控制措施。综合驰念低收入清劲风险点,一直未在生产条件启用此天性,而眼前随着
iOS 的支撑和技术慢慢成熟,项目中启用 PWA 的空子将趋近成熟。

将新技巧引进实际项目后,理论上应有化解的题目是还是不是如预期得到缓解,化解效益怎么着?下一篇将介绍通过在服务端定期记录
Lighthouse 跑分结果,来衡量优化职能的一对思虑。

参考

谷歌 开发者网址 「 http://t.cn/RH0TmrQ 」

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

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


图片 9

微信扫码,或订阅Feed赢得最新动态。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图