菜单

动用PWA个性实现离线化

2019年4月2日 - JavaScript

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

2017/02/08 · JavaScript
· PWA

正文笔者: 伯乐在线
pangjian
。未经小编许可,禁止转载!
迎接加入伯乐在线 专辑小编

微信小程序来了,能够采纳WEB技术在微信构建1个持有Native应用经验的使用,产业界非常看好那种样式。但是你们大概不知道,谷歌(Google)早已有接近的统一筹划,甚至层次更高。那正是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。

从开发者角度,缺乏三个开箱即用的方案,且专业自个儿在飞快上扬,则是技术职员选用观望的首要原由。本文将以专属海报为例,介绍通过
workbox 工具, 神速为品种启用 PWA 中离线天性的办法,以及技巧总括。

离线有缓存情形

图片 2

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
等工具,对于熟练这个工具的同班,驾驭接口和排查难题时应当会轻松些。

离线无缓存情形

会来得三个默许的页面

图片 3

-EOF-

打赏援助本身写出愈来愈多好小说,感谢!


打赏作者

整合专属海报

原稿中此处为链接,暂不协助采集

能够看到,专属海报属于小型网页应用,本身未有很复杂的构建进度,所以笔者采纳gulp作为创设筑工程具。

依附海报达成离线化,其能源可分为三类:

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

图片 4

②、cdn库文件使用运营时缓存(runtime caching),读取时选拔缓存优先(cache
first)策略:使用到到时候从互连网加载,第3回起从缓存加载

  {
      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

打赏扶助笔者写出更加多好小说,谢谢!

任选1种支付办法

图片 5
图片 6

1 赞 1 收藏
评论

别的场景

对此更为扑朔迷离的品类,或者 workbox
提供的缓存策略不可能满意你的急需,那就需求团结定制一些路由逻辑。

对于复杂的崭新项目,则能够思量间接拿 lavas
生成脚手架,降低伊始成本,可是感觉后续遭遇标题,那么些“省”下的光阴依旧要还回到的。

有关小编:pangjian

图片 7

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

图片 8

总结

直属海报在支付中期就已接入
workbox一.X,但思量到品种本人还未进入平稳景况,另1方面技术专业和客户端援助程度也不齐全,而且缺乏效果监控措施。综合思量低收入微风险点,一向未在生产环境启用此个性,而当前随着
iOS 的支撑和技艺日趋成熟,项目中启用 PWA 的火候将趋近成熟。

将新技巧引入实际项目后,理论上应该消除的标题是或不是如预期获得缓解,消除效益如何?下一篇将介绍通过在服务端定期记录
Lighthouse 跑分结果,来度量优化职能的某个构思。

参考

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

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

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


图片 9

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

相关文章

发表评论

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

网站地图xml地图