金莎娱乐场官方网站由于静态内容的特性非常适

让大家开始吧

一旦你有以下 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 时,向缓存增多了离线页面。如若我们将代码分为几小块,可观望前几行代码中,小编为离线页面钦赐了缓存版本和UENVISIONL。要是您的缓存有不相同版本,那么你只需立异版本号就能够轻易地排除缓存。在大概在第 12 行代码,笔者向那几个离线页面及其财富(如:图片)发出乞求。在获得成功的响应后,我们将离线页面和相关财富丰盛到缓存。

今昔,离线页面已存进缓存了,大家可在急需的时等候检查索它。在同三个 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 访谈网络)

金莎娱乐场官方网站 1

设若你刷新页面,你应有能来占卜应的离线页面!

金莎娱乐场官方网站 2

假定你只想差非常少地质度量试该意义而不想写任何代码,那么你能够访谈笔者已开立好的 demo。别的,上述全数代码能够在 Github repo 找到。

自个儿了解用在那案例中的页面很简短,但您的离线页面则决计于你和睦!借令你想浓厚该案例的剧情,你可感到离线页面增加缓存破坏( cache busting),如: 此案例。

Service worker实现

监听八个事件:

JavaScript

self.addEventListener('install', onInstall); self.addEventListener('fetch', onFetch); self.addEventListener("activate", onActivate);

1
2
3
self.addEventListener('install', onInstall);
self.addEventListener('fetch', onFetch);
self.addEventListener("activate", onActivate);

关于笔者:刘健超-J.c

金莎娱乐场官方网站 3

前端,在路上... 个人主页 · 笔者的篇章 · 19 ·     

金莎娱乐场官方网站 4

添加Service worker入口

在web app的首页加多以下代码

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>

只要浏览器支持serviceWorker就报了名它,不支持照旧好端端浏览,未有Service worker所提供的抓好功用。

Service worker调节范围:
粗略情状下,将sw.js身处网址的根目录下,那样Service worker能够垄断(monopoly)网站有着的页面,,同理,如果把sw.js放在/my-app/sw.js那正是说它不得不调控my-app目录下的页面。
sw.js放在/js/目录呢?越来越好的目录结议和范围调节呢?
在登记时钦定js地点并设置限定。

JavaScript

navigator.serviceWorker.register('/js/sw.js', {scope: '/sw-test/'}).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
navigator.serviceWorker.register('/js/sw.js', {scope: '/sw-test/'}).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);
    });

金莎娱乐场官方网站,选用 Service worker 创造三个特别轻易的离线页面

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

本文由 伯乐在线 - 刘健超-J.c 翻译,艾凌风 校稿。未经许可,防止转发!
立陶宛语出处:Dean Hume。款待参与翻译组。

让咱们想像以下场景:大家那儿在一辆通往农村的高铁上,用移动设备瞧着一篇很棒的稿子。与此相同的时候,当您点击“查看越来越多”的链接时,轻轨蓦然步向了隧道,导致运动道具失去了互连网,而 web 页面会突显出类似以下的源委:

金莎娱乐场官方网站 5

那是十二分令人寒心的经验!幸运的是,web 开拓者们能通过有个别新特征来革新那类的客商体验。笔者多年来一直在折腾 ServiceWorkers,它给 web 带来的不计其数恐怕性总能给自个儿欣喜。Service Workers 的神奇特质之一是同意你检查评定网络央求的场景,并让你作出相应的响应。

在此篇文章里,小编策动用此特性检查顾客的此时此刻网络连接情状,假若没连接则赶回叁个超级简单的离线页面。就算那是一个至极基础的案例,但它能给你带来启发,令你明白运行并运营该特性是多么的简便!借使你没理解过 瑟维斯 Worker,笔者建议您看看此 Github repo,了然更加多相关的音讯。

在本案例起头前,让大家先轻便地拜会它的做事流程:

  1. 在顾客第三次访问大家的页面时,大家会设置 ServiceWorker,并向浏览器的缓存增添大家的离线 HTML 页面
  2. 接下来,假使顾客筹划导航到另贰个 web 页面(同二个网址下),但那时已断网,那么大家将赶回已被缓存的离线 HTML 页面
  3. 唯独,倘诺客户策动导航到别的二个 web 页面,而此刻网络已一而再,则能照常浏览页面

贯彻加速/离线

打赏协理笔者翻译更加的多好小说,感谢!

任选一种支付办法

金莎娱乐场官方网站 6 金莎娱乐场官方网站 7

1 赞 3 收藏 1 评论

Ref links

Service Worker Cookbook

Is service worker ready?

Chrome service worker status page

Firefox service worker status page

MS Edge service worker status page

WebKit service worker status page

1 赞 2 收藏 评论

金莎娱乐场官方网站 8

拓宽阅读

别的,还应该有多少个很棒的离线功用案例。如:Guardian 创设了二个颇有 crossword puzzle(填字游戏)的离线 web 页面 – 因而,纵然等待网络重连时(即已在离线状态下),也能找到一点野趣。笔者也援引看看 Google Chrome Github repo,它包罗了不菲两样的 Service Worker 案例 – 个中一部分用到案例也在这里!

唯独,假设您想跳过上述代码,只是想大致地经过叁个库来拍卖相关操作,那么小编引入您看看 UpUp。那是一个轻量的剧本,能让您更自在地应用离线效用。

打赏协理自个儿翻译越来越多好小说,感激!

打赏译者

activate

JavaScript

/////////// // Activate /////////// function onActivate(event) { log('activate event in progress.'); event.waitUntil(removeOldCache()); } function removeOldCache() { return caches .keys() .then((keys) => { return Promise.all( // We return a promise that settles when all outdated caches are deleted. keys .filter((key) => { return !key.startsWith(version); // Filter by keys that don't start with the latest version prefix. }) .map((key) => { return caches.delete(key); // Return a promise that's fulfilled when each outdated cache is deleted. }) ); }) .then(() => { log('removeOldCache completed.'); }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
///////////
// Activate
///////////
function onActivate(event) {
  log('activate event in progress.');
  event.waitUntil(removeOldCache());
}
function removeOldCache() {
  return caches
    .keys()
    .then((keys) => {
      return Promise.all( // We return a promise that settles when all outdated caches are deleted.
        keys
         .filter((key) => {
           return !key.startsWith(version); // Filter by keys that don't start with the latest version prefix.
         })
         .map((key) => {
           return caches.delete(key); // Return a promise that's fulfilled when each outdated cache is deleted.
         })
      );
    })
    .then(() => {
      log('removeOldCache completed.');
    });
}

在activate时遵照version值来删除过期的缓存。

特点

  • 浏览器

Google Chrome,Firefox,Opera以致国内的各类双核浏览器都援救,不过 safari 不援救,那么在不支持的浏览器里Service worker不工作。

  • https

网站必须启用https来保证使用Service worker页面包车型客车安全性,开荒时localhost默许认为是平安的。

  • non-block

Service worker 中的 Javascript 代码必需是非阻塞的,因为 localStorage 是阻塞性,所以不应当在 Service Worker 代码中应用 localStorage。

  • 单身的实行情况

Service worker运作在融洽的全局遭受中,常常也运转在友好单身的线程中。

  • 未曾绑定到特定页面

service work能决定它所加载的一体范围内的财富。

  • 不可能操作DOM

跟DOM所处的条件是互为隔断的。

金莎娱乐场官方网站 9

  • 从没浏览页面时也得以运维

收取系统事件,后台运营

  • 事件驱动,要求时运转,不须要时就终止

按需实行,只在急需时加载到内部存款和储蓄器

  • 可升级

实践时会异步获取最新的版本

特定网站

  1. Google Chrome

Developer Tools->Application->Service Workers

金莎娱乐场官方网站 10

在那还会有八个特别平价的复选框:

  • Offline

仿照断网状态

  • Update on reload
    加载时更新
  • Bypass for network
    连日利用互联网内容
  1. Firefox

只有在Settings里有二个足以在HTTP情况中选取Service worker的选项,适应于调节和测验,未有单独网站下的Service worker管理。

金莎娱乐场官方网站 11

  1. Opera及任何双核浏览器同谷歌(Google) Chrome
    万一看到多个一样范围内的多少个Service worker,说明Service woker更新后,而原有Service worker还并未有被terminated。

Service worker的决定从第2回页面访问最早

在第三次加载页面时,全部能源都是从互联网载的,Service worker 在第二回加载时不会收获调控网络响应,它只会在后续访问页面时起效果。

金莎娱乐场官方网站 12

页面第一遍加载时做到install,并走入idle状态。

金莎娱乐场官方网站 13

页面第三遍加载时,步向activated状态,准备处理不论什么事件,同时 浏览器会向服务器发送三个异步 诉求来检查Service worker自己是否有新的版本,构成了Service worker的立异机制。

金莎娱乐场官方网站 14

Service worker管理完全部的平地风波后,踏向idle状态,最后走入terminated状态财富被假释,当有新的风云爆发时再度被调用。

管理 Service worker

更多

TODO:

  • Service workers的革新供给手动编辑version,每便发布新文章时索要编写制定。
  • 使用AMP让页面渲染速度直达最高。

install

JavaScript

////////// // Install ////////// function onInstall(event) { log('install event in progress.'); event.waitUntil(updateStaticCache()); } function updateStaticCache() { return caches .open(cacheKey('offline')) .then((cache) => { return cache.addAll(offlineResources); }) .then(() => { log('installation complete!'); }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//////////
// Install
//////////
function onInstall(event) {
  log('install event in progress.');
  event.waitUntil(updateStaticCache());
}
function updateStaticCache() {
  return caches
    .open(cacheKey('offline'))
    .then((cache) => {
      return cache.addAll(offlineResources);
    })
    .then(() => {
      log('installation complete!');
    });
}

install时将有所切合缓存战略的能源拓宽缓存。

Cache

网页缓存有为数不菲,如HTTP缓存,localStorage,sessionStorage和cacheStorage都能够灵活搭配举办缓存,但操作太繁杂,直接动用越来越尖端Service worker –本文的东家。

增长速度/离线访谈只需三步

  • 首页增添注册代码

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都援引了什么第三方财富,各个加到忽视列表里。

金莎娱乐场官方网站 15

在根目录下增多offline.html,在未有互联网且缓存中也尚无时使用,效果如下:

金莎娱乐场官方网站 16

在根目录下加多offline.svg,在无网络时图片能源乞求再次来到该文件。

什么是 Service worker

金莎娱乐场官方网站 17

如上图,Service worker 是一种由Javascript编写的浏览器端代理脚本,位于你的浏览器和服务器之间。当二个页面注册了叁个 Service worker,它就能够挂号一二种事件管理器来响应如网络需要和新闻推送这么些事件。Service worker 能够被用来管理缓存,当响应一个网络央求时得以配备为回去缓存依然从网络得到。由于Service worker 是依据事件的,所以它只在拍卖那一个事件的时候被调入内部存款和储蓄器,不用操心常驻内存占用财富导致系统变慢。

加紧效果

首页加快后,网络要求从16降为1,加载时间从2.296s降为0.654s,获得了眨眼间间加载的结果。

金莎娱乐场官方网站 18

基于webpagetest

查看测量检验结果

利用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生命周期

金莎娱乐场官方网站 19

Service worker 为网页加多一个近乎于APP的生命周期,它只会响应系统事件,纵然浏览器关闭时操作系统也足以提示Service worker,这一点万分重要,让web app与native app的力量变得近乎了。

Service worker在Register时会触发Install事件,在Install时得以用来预先获取和缓存应用所需的能源并安装每一个文件的缓存攻略。

一旦Service worker处于activated状态,就足以完全调控应用的能源,对互连网诉求实行反省,修改网络央求,从互联网上得到并再次来到内容也许再次回到由已设置的Service worker预示获取并缓存好的财富,乃至还足以变动内容并回到给网络语法。

富有的那几个都客户都以晶莹剔透的,事实上,四个企划可以的Service worker就好像一个智能缓存系统,抓好了互连网和缓存功能,采取最优办法来响应互联网乞请,让使用越发地西泮的运作,尽管未有互联网也没提到,因为您能够完全调整互联网响应。

fetch

JavaScript

//////// // Fetch //////// function onFetch(event) { const request = event.request; if (shouldAlwaysFetch(request)) { event.respondWith(networkedOrOffline(request)); return; } if (shouldFetchAndCache(request)) { event.respondWith(networkedOrCached(request)); return; } event.respondWith(cachedOrNetworked(request)); } onFetch做为浏览器网络诉求的代办,依照需求再次来到互连网或缓存内容,若是获得了网络内容,再次回到网络诉求时同偶然候举办缓存操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
////////
// Fetch
////////
function onFetch(event) {
  const request = event.request;
  if (shouldAlwaysFetch(request)) {
    event.respondWith(networkedOrOffline(request));
    return;
  }
  if (shouldFetchAndCache(request)) {
    event.respondWith(networkedOrCached(request));
    return;
  }
  event.respondWith(cachedOrNetworked(request));
}
onFetch做为浏览器网络请求的代理,根据需要返回网络或缓存内容,如果获取了网络内容,返回网络请求时同时进行缓存操作。

加速/离线原理研究

浏览器全局

看看你的浏览器里都有啥Service worker已经存在了

  1. Google Chrome

在地址栏里输入:

JavaScript

chrome://serviceworker-internals/

1
chrome://serviceworker-internals/

能够见到曾经有二十三个Serviceworker了,在这里间能够手动Start让它工作,也足以Unregister卸载掉。

金莎娱乐场官方网站 20

  1. Firefox

有二种办法步向Service worker治本界面来手动Start或unregister。

  • 菜单栏,Tool->Web Developer->Service workers
  • 地点栏中输入

JavaScript

about:debugging#workers

1
about:debugging#workers

金莎娱乐场官方网站 21

  1. Opera及其余双核浏览器同Google Chrome

本文由金莎娱乐场官方网站发布于关于计算机,转载请注明出处:金莎娱乐场官方网站由于静态内容的特性非常适

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。