菜单

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

2019年3月25日 - CSS/CSS3

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

2017/02/08 · JavaScript
· PWA

本文作者: 伯乐在线
pangjian
。未经笔者许可,禁止转发!
迎接参预伯乐在线 专辑小编

微信小程序来了,能够选取WEB技术在微信营造七个拥有Native应用经验的使用,产业界格外看好那种方式。然则你们或然不清楚,谷歌早已有相近的筹划,甚至层次更高。那就是PWA(渐进式增强WEB应用)。
PWA有以下二种天性:

有着那么些特色都是“优雅降级、渐进增强的”,给帮助的装备更好的感受,不支持的设施也不会更差。那就和微信小程序这种不好设计的一贯不一致之处。

本博客也在向着PWA的自由化迈进,第二步笔者选拔了Offline,也等于离线能力。能够让客户在未曾互连网连接的时候还是能够使用一些服务。那个能力使用了ServiceWorker技术。

福寿绵绵思路正是,利用service
worker,另起2个线程,用来监听全部网络请求,讲曾经呼吁过的多寡放入cache,在断网的景观下,直接取用cache里面包车型的士财富。为呼吁过的页面和图纸,体现1个私下认可值。当有互连网的时候,再另行从服务器更新。
图片 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(渐进式网页应用)对于关心新技巧得同学或许已不目生。14年至今,其选择不比应有的那么周边,最大的绊脚石:在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作为构建筑工程具。

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

一 、应用自个儿逻辑和体制财富做预缓存(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

打赏支持笔者写出更加多好小说,感谢!

任选一种支付办法

图片 5
图片 6

1 赞 1 收藏
评论

此外场景

对此越来越复杂的品种,恐怕 workbox
提供的缓存策略无法满意你的需要,那就必要自个儿定制一些路由逻辑。

对于复杂的崭新项目,则足以考虑直接拿 lavas
生成脚手架,下降初步开支,可是感觉后续境遇难题,那些“省”下的时刻也许要还回去的。

至于作者:pangjian

图片 7

庞健,金融IT男。
个人主页
·
小编的小说
·
5
·
  

图片 8

总结

依附海报在开发后期就已接入
workbox1.X,但考虑到项目自个儿还未进入稳定情状,另一方面技术专业和客户端帮衬程度也不齐全,而且贫乏效果监察和控制措施。综合考虑低收入微危机点,一贯未在生养环境启用此脾性,而日前趁着
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地图