迈向PWA！利用serviceworker的离线访问模式
2017/02/08 · JavaScript
· PWA
本文作者： 伯乐在线 -
pangjian
。未经作者许可，禁止转载！
欢迎加入伯乐在线 专栏作者。
微信小程序来了，可以利用WEB技术在微信打造一个有着Native应用体验的应用，业界非常看好这种形式。但是你们也许不知道，Google早已有类似的规划，甚至层次更高。那就是PWA（渐进式增强WEB应用）。
PWA有以下几种特性：
- Installablity（可安装性）
- App Shell
- Offline（离线能力）
- Re-engageable（推送通知能力）
所有这些特性都是“优雅降级、渐进增强的”，给支持的设备更好的体验，不支持的设备也不会更差。这就和微信小程序这种二流设计的根本不同之处。
本博客也在向着PWA的方向迈进，第一步我选择了Offline，也就是离线能力。可以让客户在没有网络连接的时候仍然可以使用部分服务。这个能力利用了Service
Worker技术。
实现思路就是，利用service
worker，另起一个线程，用来监听所有网络请求，讲已经请求过的数据放入cache，在断网的情况下，直接取用cache里面的资源。为请求过的页面和图片，展示一个默认值。当有网络的时候，再重新从服务器更新。
代码这里就不贴了，以后可能会专门写一篇来详细介绍Service
Worker，有兴趣的可以直接参考源码。
注册起来也非常方便
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 创建一个非常简单的离线页面
2016/06/07 · JavaScript
· 1 评论 · Service
Worker
本文由 伯乐在线 -
刘健超-J.c
翻译，艾凌风
校稿。未经许可，禁止转载！
英文出处：Dean
Hume。欢迎加入翻译组。
让我们想像以下情景：我们此时在一辆通往农村的火车上，用移动设备看着一篇很棒的文章。与此同时，当你点击“查看更多”的链接时，火车忽然进入了隧道，导致移动设备失去了网络，而
web 页面会呈现出类似以下的内容：
这是相当令人沮丧的体验！幸运的是，web
开发者们能通过一些新特性来改善这类的用户体验。我最近一直在折腾 Service
Workers，它给 web 带来的无尽可能性总能给我惊喜。Service Workers
的美妙特质之一是允许你检测网络请求的状况，并让你作出相应的响应。
在这篇文章里，我打算用此特性检查用户的当前网络连接状况，如果没连接则返回一个超级简单的离线页面。尽管这是一个非常基础的案例，但它能给你带来启发，让你知道启动并运行该特性是多么的简单！如果你没了解过
Service Worker，我建议你看看此 Github
repo，了解更多相关的信息。
在该案例开始前，让我们先简单地看看它的工作流程：
- 在用户首次访问我们的页面时，我们会安装 Service
Worker，并向浏览器的缓存添加我们的离线 HTML 页面 - 然后，如果用户打算导航到另一个 web
页面（同一个网站下），但此时已断网，那么我们将返回已被缓存的离线
HTML 页面 - 但是，如果用户打算导航到另外一个 web
页面，而此时网络已连接，则能照常浏览页面
关于PWA
PWA（Progressive Web App）,
即渐进式web应用。PWA本质上是web应用，目的是通过多项新技术，在安全、性能、体验等方面给用户原生应用的体验。而且无需像原生应用那样繁琐的下载、安装、升级等操作。
这里解释下概念中的“渐进式”，意思是这个web应用还在不断地进步中。因为目前而言，PWA还没有成熟到一蹴而就的程度，想在安全、性能、体验上达到原生应用的效果还是有很多的提升空间的。一方面是构建PWA的成本问题，另一方面是目前各大浏览器、安卓和IOS系统对于PWA的支持和兼容性还有待提高。
本文我将从网站缓存、http请求拦截、推送到主屏等功能，结合实例操作，一步步引领大家快速玩转PWA技术。
使用Service worker实现加速/离线访问静态blog网站
2017/02/19 · JavaScript
· Service Worker
原文出处： Yang
Bo
现在很流行基于Github
page和markdown的静态blog，非常适合技术的思维和习惯，针对不同的语言都有一些优秀的静态blog系统出现，如Jekyll/Ruby，Pelican/Python，Hexo/NodeJs，由于静态内容的特性非常适合做缓存来加速页面的访问，就利用Service
worker来实现加速，结果是除了PageSpeed，CDN这些常见的服务器和网络加速之外，通过客户端实现了更好的访问体验。
Service Worker入门
2015/03/26 · JavaScript
· Service Worker
原文出处： Matt
Gaunt 译文出处：[w3ctech
- 十年踪迹]()
原生App拥有Web应用通常所不具备的富离线体验，定时的静默更新，消息通知推送等功能。而新的Service
workers标准让在Web App上拥有这些功能成为可能。
离线有缓存情况
让我们开始吧
假如你有以下 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
时，向缓存添加了离线页面。如果我们将代码分为几小块，可看到前几行代码中，我为离线页面指定了缓存版本和URL。如果你的缓存有不同版本，那么你只需更新版本号即可简单地清除缓存。在大概在第
12
行代码，我向这个离线页面及其资源（如：图片）发出请求。在得到成功的响应后，我们将离线页面和相关资源添加到缓存。
现在，离线页面已存进缓存了，我们可在需要的时候检索它。在同一个 Service
Worker 中，我们需要对无网络时返回的离线页面添加相应的逻辑代码。
JavaScript
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); })
); } });
|
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
内置的开发者工具。首先，导航到你的页面，然后一旦安装上了 Service
Worker，就打开 Network 标签并将节流（throttling）改为
Offline。（译者注：若将节流设置为 Offline
没效果，则可通过关闭网络或者通过360安全卫士禁止 Chrome 访问网络）
如果你刷新页面，你应该能看到相应的离线页面！
如果你只想简单地测试该功能而不想写任何代码，那么你可以访问我已创建好的
demo。另外，上述全部代码可以在
Github repo 找到。
我知道用在此案例中的页面很简单，但你的离线页面则取决于你自己！如果你想深入该案例的内容，你可以为离线页面添加缓存破坏（
cache busting），如：
此案例。
Service Worker
Service
Worker是PWA的核心技术，它能够为web应用提供离线缓存功能，当然不仅如此，下面列举了一些Service
Worker的特性：
基于HTTPS
环境，这是构建PWA的硬性前提。（LAMP环境网站升级HTTPS解决方案）是一个独立的 worker 线程，独立于当前网页进程，有自己独立的 worker
context可拦截HTTP请求和响应，可缓存文件，缓存的文件可以在网络离线状态时取到
能向客户端推送消息
不能直接操作 DOM
异步实现，内部大都是通过 Promise 实现
加速/离线访问只需三步
- 首页添加注册代码
JavaScript
<script> if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js'); } </script>
|
1
2
3
4
5
|
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}
</script>
|
- 复制代码
将保存到你的网站根目录下
- 修改不缓存域名列表及离线状态页面
在你的sw.js中修改
JavaScript
const ignoreFetch = [ /https?:\/\/cdn.bootcss.com\//,
/https?:\/\/static.duoshuo.com\//,
/https?:\/\/www.google-analytics.com\//,
/https?:\/\/dn-lbstatics.qbox.me\//, ];
|
1
2
3
4
5
6
|
const ignoreFetch = [
/https?:\/\/cdn.bootcss.com\//,
/https?:\/\/static.duoshuo.com\//,
/https?:\/\/www.google-analytics.com\//,
/https?:\/\/dn-lbstatics.qbox.me\//,
];
|
打开Chrome Dev Tools->Source，看看自己的blog都引用了哪些第三方资源，逐个加到忽略列表里。
在根目录下添加offline.html，在没有网络且缓存中也没有时使用，效果如下：
在根目录下添加offline.svg，在无网络时图片资源请求返回该文件。
Service Worker 是什么？
一个 service worker
是一段运行在浏览器后台进程里的脚本，它独立于当前页面，提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。在将来，基于它可以实现消息推送，静默更新以及地理围栏等服务，但是目前它首先要具备的功能是拦截和处理网络请求，包括可编程的响应缓存管理。
为什么说这个API是一个非常棒的API呢？因为它使得开发者可以支持非常好的离线体验，它给予开发者完全控制离线数据的能力。
在service worker提出之前，另外一个提供开发者离线体验的API叫做App
Cache。然而App
Cache有些局限性，例如它可以很容易地解决单页应用的问题，但是在多页应用上会很麻烦，而Service
workers的出现正是为了解决App Cache的痛点。
下面详细说一下service worker有哪些需要注意的地方：
- 它是JavaScript
Worker，所以它不能直接操作DOM。但是service
worker可以通过postMessage与页面之间通信，把消息通知给页面，如果需要的话，让页面自己去操作DOM。 - Service
worker是一个可编程的网络代理，允许开发者控制页面上处理的网络请求。 - 在不被使用的时候，它会自己终止，而当它再次被用到的时候，会被重新激活，所以你不能依赖于service
worker的onfecth和onmessage的处理函数中的全局状态。如果你想要保存一些持久化的信息，你可以在service
worker里使用IndexedDB API。 - Service
worker大量使用promise，所以如果你不了解什么是promise，那你需要先阅读这篇文章。
离线无缓存情况
会展示一个默认的页面
-EOF-
打赏支持我写出更多好文章，谢谢！
打赏作者
拓展阅读
此外，还有几个很棒的离线功能案例。如：Guardian 构建了一个拥有 crossword
puzzle（填字游戏）的离线
web 页面 –
因此，即使等待网络重连时（即已在离线状态下），也能找到一点乐趣。我也推荐看看
Google Chrome Github
repo，它包含了很多不同的
Service Worker 案例 – 其中一些应用案例也在这！
然而，如果你想跳过上述代码，只是想简单地通过一个库来处理相关操作，那么我推荐你看看
UpUp。这是一个轻量的脚本，能让你更轻松地使用离线功能。
打赏支持我翻译更多好文章，谢谢！
打赏译者
Service Worker生命周期
serviceworker的使用流程可以简单总结为注册--安装--激活。
注册其实就是告诉浏览器serviceworkerJS文件存放在什么位置，然后浏览器下载、解析、执行该文件，进而启动安装。这里我创建一个app.js文件，注册代码如下，将该文件在网站的head标签里引入。
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register
.then(function (registration) {
// 注册成功
console.log('ServiceWorker registration successful with scope: ',
registration.scope);
})
.catch(function {
// 注册失败:(
console.log('ServiceWorker registration failed: ', err);
});
});
}
当执行serviceworkerJS文件时，首先触发的是install事件，进行安装。安装的过程就是将指定的一些静态资源进行离线缓存。下面是我的sw.js文件中的安装代码：
var CACHE_VERSION = 'sw_v8';
var CACHE_FILES = [
'/js/jquery/min.js',
'/js/zui/min.js',
'/js/chanzhi.js',
];
self.addEventListener('install', function {
event.waitUntil(
caches.open(CACHE_VERSION)
.then(cache => cache.addAll(CACHE_FILES)
));
});
当安装成功后，serviceworker就会激活，这时就会处理 activate 事件回调
(提供了更新缓存策略的机会)。并可以处理功能性的事件 fetch 、sync 、push
。
self.addEventListener('activate', function {
event.waitUntil(
caches.keys().then(function{
return Promise.all(keys.map(function{
if(key !== CACHE_VERSION){
return caches.delete;
}
}));
})
);
});
加速效果
首页加速后，网络请求从16降为1，加载时间从2.296s降为0.654s，得到了瞬间加载的结果。
基于webpagetest
查看测试结果
Service Worker的生命周期
Service worker拥有一个完全独立于Web页面的生命周期。
要让一个service
worker在你的网站上生效，你需要先在你的网页中注册它。注册一个service
worker之后，浏览器会在后台默默启动一个service worker的安装过程。
在安装过程中，浏览器会加载并缓存一些静态资源。如果所有的文件被缓存成功，service
worker就安装成功了。如果有任何文件加载或缓存失败，那么安装过程就会失败，service
worker就不能被激活（也即没能安装成功）。如果发生这样的问题，别担心，它会在下次再尝试安装。
当安装完成后，service
worker的下一步是激活，在这一阶段，你还可以升级一个service
worker的版本，具体内容我们会在后面讲到。
在激活之后，service
worker将接管所有在自己管辖域范围内的页面，但是如果一个页面是刚刚注册了service
worker，那么它这一次不会被接管，到下一次加载页面的时候，service
worker才会生效。
当service
worker接管了页面之后，它可能有两种状态：要么被终止以节省内存，要么会处理fetch和message事件，这两个事件分别产生于一个网络请求出现或者页面上发送了一个消息。
下图是一个简化了的service worker初次安装的生命周期：
打赏支持我写出更多好文章，谢谢！
任选一种支付方式
1 赞 1 收藏
评论
打赏支持我翻译更多好文章，谢谢！
任选一种支付方式
1 赞 3 收藏 1
评论
serviceworker的缓存功能
安装时，serviceworker将我们指定的静态资源进行缓存，你也许会问，如果是实时的动态内容怎么办，我们不可能预先将所有的文件资源提前指定好，让serviceworker缓存。这就要提到serviceworker的拦截HTTP请求响应的特性了。
serviceworker拦截http请求，首先去检查请求的资源在缓存中是否存在，如果存在，则直接从缓存中调用，而且即便是无网络情况下，serviceworker也能调用缓存中的资源。如果缓存中没有请求的资源，则通过网络去服务器上检索，而且在找到并响应时，serviceworker会将其存入缓存中，以备下次再请求时直接从缓存中调用。
serviceworker缓存流程
serviceworker文件中fetch事件代码如下：
self.addEventListener('fetch', function {
event.respondWith(
caches.match(event.request).then(function{
if{
return response;
}
var requestToCache = event.request.clone();
return fetch(requestToCache).then(
function{
if(!response || response.status !== 200){
return response;
}
var responseToCache = response.clone();
caches.open(CACHE_VERSION)
.then(function{
cache.put(requestToCache, responseToCache);
});
return response;
}
);
})
);
});
在网站前台通过浏览器开发者工具，我们可以看下从缓存中调用资源的效果：
serviceworker缓存调用
缓存文件
我这里操作演示用的是谷歌浏览器，下面是各大浏览器对于serviceworker的支持情况：
serviceworker浏览器支持情况
加速/离线原理探索
在我们开始写码之前
从这个项目地址拿到chaches
polyfill。
这个polyfill支持CacheStorate.match，Cache.add和Cache.addAll，而现在Chrome
M40实现的Cache
API还没有支持这些方法。
将dist/serviceworker-cache-polyfill.js放到你的网站中，在service
worker中通过importScripts加载进来。被service
worker加载的脚本文件会被自动缓存。
JavaScript
importScripts('serviceworker-cache-polyfill.js');
|
1
|
importScripts('serviceworker-cache-polyfill.js');
|
需要HTTPS
在开发阶段，你可以通过localhost使用service
worker，但是一旦上线，就需要你的server支持HTTPS。
你可以通过service
worker劫持连接，伪造和过滤响应，非常逆天。即使你可以约束自己不干坏事，也会有人想干坏事。所以为了防止别人使坏，你只能在HTTPS的网页上注册service
workers，这样我们才可以防止加载service
worker的时候不被坏人篡改。（因为service
worker权限很大，所以要防止它本身被坏人篡改利用——译者注）
Github
Pages正好是HTTPS的，所以它是一个理想的天然实验田。
如果你想要让你的server支持HTTPS，你需要为你的server获得一个TLS证书。不同的server安装方法不同，阅读帮助文档并通过Mozilla’s
SSL config
generator了解最佳实践。
转载本站文章请注明出处：vns威尼斯城官网登入 http://www.tiec-ccpittj.com/?p=4133