菜单

迈向PWA!利用serviceworker的离线访问情势

2019年3月25日 - Bootstrap

打赏支持自己写出越多好文章,多谢!

任选一种支付办法

图片 1
图片 2

1 赞 1 收藏
评论

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

总结

专属海报在付出后期就已连接
workbox1.X,但考虑到花色自己还未进入平稳意况,另一方面技术标准和客户端支持程度也不完备,而且紧缺效果监控措施。综合考虑低收入轻风险点,一向未在生养条件启用此天性,而眼下趁着
iOS 的支撑和技巧逐步成熟,项目中启用 PWA 的机遇将趋近成熟。

将新技巧引入实际项目后,理论上相应消除的难题是不是如预期获得化解,化解功能怎么着?下一篇将介绍通过在服务端定期记录
Lighthouse 跑分结果,来衡量优化功效的片段思想。

离线无缓存情形

会突显1个私下认可的页面

图片 4

-EOF-

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


打赏作者

引入

PWA(渐进式网页应用)对于关怀新技巧得同学或者已不不熟悉。14年到现在,其行使比不上应有的那么周边,最大的阻碍:在iOS平台紧缺支撑,方今已被打破
—— Safari技术预览版已经暗中同意开启 Service Worker。

从开发者角度,贫乏贰个开箱即用的方案,且专业自个儿在神速上扬,则是技术人士接纳寓指标基本点原因。本文将以专属海报为例,介绍通过
workbox 工具, 快捷为项目启用 PWA 中离线个性的措施,以及技巧总括。

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

2017/02/08 · JavaScript
· PWA

本文小编: 伯乐在线
pangjian
。未经小编许可,禁止转发!
欢迎加入伯乐在线 专辑撰稿人

微信小程序来了,能够选用WEB技术在微信构建一个兼有Native应用经验的使用,业界格外看好那种情势。不过你们或许不精通,谷歌(Google)早已有接近的安顿性,甚至层次更高。那便是PWA(渐进式增强WEB应用)。
PWA有以下三种本性:

具有那个特点都以“优雅降级、渐进增强的”,给支持的装置更好的体会,不帮衬的配备也不会更差。那就和微信小程序那种倒霉设计的常有不一致之处。

本博客也在向着PWA的动向迈进,第三步作者选拔了Offline,也正是离线能力。能够让客户在没有网络连接的时候还能够应用一些服务。那几个能力使用了ServiceWorker技术。

兑现思路正是,利用service
worker,另起一个线程,用来监听全部互联网请求,讲曾经呼吁过的数码放入cache,在断网的动静下,间接取用cache里面包车型大巴财富。为呼吁过的页面和图片,显示三个暗中认可值。当有网络的时候,再重复从服务器更新。
图片 5
代码那里就不贴了,今后大概会特意写一篇来详细介绍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。

构成专属海报

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

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

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

① 、应用本身逻辑和样式财富做预缓存(precaching):在页面加载成功后就缓存到
Cache Storage,之后唯有陈设新版,都将从缓存读取财富

图片 6

贰 、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

至于小编:pangjian

图片 7

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

图片 8

参考

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

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

凭借瑟维斯 Worker和cacheStorage缓存及离线开发 by 张鑫旭 「
http://t.cn/RKxXSi0


图片 9

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

此外场景

对此进一步错综复杂的门类,恐怕 workbox
提供的缓存策略不可能满意你的供给,那就供给团结定制一些路由逻辑。

对于复杂的崭新项目,则足以考虑间接拿 lavas
生成脚手架,下跌开头费用,可是感觉后续遭逢题目,这几个“省”下的日子仍然要还回去的。

相关文章

发表评论

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

网站地图xml地图