十分钟玩转PWA,利用serviceworker的离线访问情势

迈向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。

运用 Service worker 创立3个卓殊轻松的离线页面

2016/06/07 · JavaScript
· 1 评论 · Service
Worker

本文由 伯乐在线 –
刘健超-J.c
翻译,艾凌风
校稿。未经许可,禁止转发!
英文出处:Dean
Hume。欢迎参预翻译组。

让大家想像以下场景:我们那儿在一辆通往农村的高铁上,用运动装备看着壹篇很棒的文章。与此同时,当你点击“查看更加多”的链接时,火车忽然进入了隧道,导致移动设备失去了网络,而
web 页面会突显出类似以下的剧情:

图片 2

那是壹对一令人心寒的体会!幸运的是,web
开拓者们能由此1些新特色来立异那类的用户体验。作者近年向来在折腾 ServiceWorkers,它给 web 带来的不计其数恐怕性总能给自家开心。Service Workers
的好好特质之1是同意你检查评定网络请求的场所,并让你作出相应的响应。

在那篇作品里,笔者打算用此本性检查用户的此时此刻网络连接境况,假若没连接则赶回1个超级简单的离线页面。纵然这是三个拾1分基础的案例,但它能给你带来启迪,让您精通运营并运转该性情是何等的简短!若是您没理解过
Service Worker,笔者提议您看看此 Github
repo,通晓更加多相关的音信。

在此案例开头前,让我们先轻易地看望它的办事流程:

  1. 在用户第2次访问我们的页面时,大家会设置 ServiceWorker,并向浏览器的缓存增加大家的离线 HTML 页面
  2. 接下来,若是用户打算导航到另三个 web
    页面(同3个网址下),但此刻已断网,那么大家将回来已被缓存的离线
    HTML 页面
  3. 只是,借使用户打算导航到另外1个 web
    页面,而此时互联网已一而再,则能照常浏览页面

关于PWA

PWA(Progressive Web App),
即渐进式web应用。PWA本质上是web应用,目标是透过多项新技能,在平安、品质、体验等地点给用户原生应用的经验。而且无需像原生应用那样繁琐的下载、安装、进级等操作。

此间表达下概念中的“渐进式”,意思是其一web应用还在时时刻刻地向上中。因为脚下而言,PWA还从未成熟到一蹴而就的程度,想在平安、品质、体验上高达原生应用的魔法依旧有为数不少的升官空间的。1方面是营造PWA的财力难题,另一方面是近来各大浏览器、安卓和IOS系统对此PWA的支撑和包容性还有待抓实。

正文作者将从网址缓存、http请求拦截、推送到主屏等职能,结合实例操作,一步步引领大家急忙玩转PWA本事。

离线有缓存情状

图片 3

让大家开首吧

如若你有以下 HTML 页面。那尽管十一分基础,但能给你完整思路。

XHTML

<!DOCTYPE html>

1
<!DOCTYPE html>

紧接着,让我们在页面里登记 Service Worker,那里仅创立了该指标。向刚刚的
HTML 里增添以下代码。

JavaScript

<script> // Register the service worker // 注册 service worker if
(‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/service-worker.js’).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); }); }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
// Register the service worker
// 注册 service worker
if (‘serviceWorker’ in navigator) {
    navigator.serviceWorker.register(‘/service-worker.js’).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);
   });
}
</script>

下一场,大家须求创制 Service Worker 文件并将其取名称叫‘service-worker.js‘。大家打算用这一个 Service Worker
拦截任何网络请求,以此检查互联网的连接性,并依照检查结果向用户重临最适合的始末。

JavaScript

‘use strict’; var cacheVersion = 1; var currentCache = { offline:
‘offline-cache’ + cacheVersion }; const offlineUrl =
‘offline-page.html’; this.addEventListener(‘install’, event => {
event.waitUntil( caches.open(currentCache.offline).then(function(cache)
{ return cache.addAll([ ‘./img/offline.svg’, offlineUrl ]); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
‘use strict’;
 
var cacheVersion = 1;
var currentCache = {
  offline: ‘offline-cache’ + cacheVersion
};
const offlineUrl = ‘offline-page.html’;
 
this.addEventListener(‘install’, event => {
  event.waitUntil(
    caches.open(currentCache.offline).then(function(cache) {
      return cache.addAll([
          ‘./img/offline.svg’,
          offlineUrl
      ]);
    })
  );
});

在上边的代码中,大家在装置 Service Worker
时,向缓存增多了离线页面。假设大家将代码分为几小块,可看到前几行代码中,作者为离线页面钦赐了缓存版本和UEnclaveL。如果您的缓存有例外版本,那么你只需创新版本号就能够轻巧地解决缓存。在差不离在第32行代码,作者向那些离线页面及其财富(如:图片)发出请求。在赢得成功的响应后,大家将离线页面和相关财富丰裕到缓存。

昨天,离线页面已存进缓存了,我们可在要求的时等候检查索它。在同三个 ServiceWorker 中,大家要求对无互联网时重临的离线页面增多相应的逻辑代码。

JavaScript

this.add伊夫ntListener(‘fetch’, event => { // request.mode = navigate
isn’t supported in all browsers // request.mode = naivgate
并从未获得全体浏览器的支撑 // so include a check for Accept: text/html
header. // 因此对 header 的 Accept:text/html 实行把关 if
(event.request.mode === ‘navigate’ || (event.request.method === ‘GET’ &&
event.request.headers.get(‘accept’).includes(‘text/html’))) {
event.respondWith( fetch(event.request.url).catch(error => { //
Return the offline page // 再次回到离线页面 return caches.match(offlineUrl);
}) ); } else{ // Respond with everything else if we can //
重回任何我们能回来的事物 event.respondWith(caches.match(event.request)
.then(function (response) { return response || fetch(event.request); })
); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
this.addEventListener(‘fetch’, event => {
  // request.mode = navigate isn’t supported in all browsers
  // request.mode = naivgate 并没有得到所有浏览器的支持
  // so include a check for Accept: text/html header.
  // 因此对 header 的 Accept:text/html 进行核实
  if (event.request.mode === ‘navigate’ || (event.request.method === ‘GET’ && event.request.headers.get(‘accept’).includes(‘text/html’))) {
        event.respondWith(
          fetch(event.request.url).catch(error => {
              // Return the offline page
              // 返回离线页面
              return caches.match(offlineUrl);
          })
    );
  }
  else{
        // Respond with everything else if we can
        // 返回任何我们能返回的东西
        event.respondWith(caches.match(event.request)
                        .then(function (response) {
                        return response || fetch(event.request);
                    })
            );
      }
});

为了测试该成效,你能够选择 Chrome
内置的开拓者工具。首先,导航到你的页面,然后假诺设置上了 ServiceWorker,就张开 Network 标签并将节流(throttling)改为
Offline。(译者注:若将节流设置为 Offline
没意义,则可通过关闭互联网或然通过360有惊无险警卫禁止 Chrome 访问网络)

图片 4

设若您刷新页面,你应该能看出相应的离线页面!

图片 5

若是你只想大致地质测量试该意义而不想写任何代码,那么你能够访问作者已开立好的
demo。别的,上述全体代码能够在
Github repo 找到。

自家驾驭用在此案例中的页面很简短,但你的离线页面则在于你本人!假如您想深入该案例的内容,你可以为离线页面加多缓存破坏(
cache busting),如:
此案例。

Service Worker

ServiceWorker是PWA的大旨技能,它可感到web应用提供离线缓存功效,当然不仅如此,上边列举了1部分ServiceWorker的表征:

基于HTTPS
环境,那是创设PWA的硬性前提。(LAMP环境网站晋级HTTPS化解方案)

是2个单身的 worker 线程,独立于最近网页进度,有投机单独的 worker
context

可阻止HTTP请求和响应,可缓存文件,缓存的文本能够在网络离线状态时取到

能向客户端推送新闻

无法直接操作 DOM

异步完结,内部大都以因而 Promise 达成

发表评论

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

网站地图xml地图