未经小编许可

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

2017/02/08 · JavaScript
· PWA

正文作者: 伯乐在线 –
pangjian
。未经作者许可,幸免转载!
款待参加伯乐在线 专栏撰稿人。

微信小程序来了,能够动用WEB技巧在微信创设贰个存有Native应用体验的采用,产业界非常看好这种样式。但是你们只怕不精通,Google早就有像样的统一计划,以至档期的顺序越来越高。那就是PWA(渐进式加强WEB应用)。
PWA有以下两种特色:

  • Installablity(可安装性)
  • App Shell
  • Offline(离线技能)
  • Re-engageable(推送布告技术)

怀有那一个特色都以“高贵降级、渐进巩固的”,给协理的设备更加好的体验,不辅助的装置也不会更差。那就和微信小程序这种不良设计的平素不一致之处。

本博客也在向着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。

离线有缓存情形

图片 2

离线无缓存情状

会显得二个暗许的页面

图片 3

-EOF-

打赏帮衬本身写出越多好文章,谢谢!

打赏我

打赏协理本身写出越多好文章,谢谢!

任选一种支付方式

图片 4
图片 5

1 赞 1 收藏
评论

有关小编:pangjian

图片 6

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

图片 7

相关文章