>

针对不同的语言都有一些优秀的静态blog系统出现

- 编辑:澳门博发娱乐官网 -

针对不同的语言都有一些优秀的静态blog系统出现

让大家开端吧

假设你有以下 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>

接下来,大家须求创立 瑟维斯 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 时,向缓存加多了离线页面。要是大家将代码分为几小块,可看出前几行代码中,作者为离线页面内定了缓存版本和UWranglerL。如果你的缓存有例外版本,那么您只需立异版本号就能够轻易地解除缓存。在大概在第 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 访谈互联网)

sbf282.com 1

如若你刷新页面,你应当能看到相应的离线页面!

sbf282.com 2

一经你只想大概地质衡量试该意义而不想写任何代码,那么你能够访谈小编已创立好的 demo。其它,上述总体代码能够在 Github repo 找到。

自己知道用在此案例中的页面很容易,但你的离线页面则取决于你自身!如若您想深切该案例的原委,你可感觉离线页面加多缓存破坏( cache busting),如: 此案例。

管理 Service worker

打赏扶助自个儿翻译越多好小说,谢谢!

sbf282.com 3

1 赞 收藏 评论

Service Worker入门

2015/03/26 · JavaScript · Service Worker

初稿出处: Matt Gaunt   译文出处:[w3ctech

  • 十年踪迹]()   

原生App具有Web应用普通所不持有的富离线体验,定期的敦默寡言更新,音讯布告推送等作用。而新的Serviceworkers标准让在Web App上独具这一个效率成为大概。

2. Service Worker的帮助情形

Service Worker近来独有Chrome/Firfox/Opera帮助:

sbf282.com 4

Safari和艾德ge也在预备援救Service Worker,由于ServiceWorker是谷歌(Google)为主的一项正式,对于生态相比较密闭的Safari来讲也是迫于时局起始计划扶助了,在Safari TP版本,能够看出:

sbf282.com 5

在试验作用(Experimental Features)里已经有ServiceWorker的菜单项了,只是就算张开也是无法用,会唤起您还不曾落到实处:

sbf282.com 6

但不论怎么,至少注解Safari已经计划帮助ServiceWorker了。别的还足以见见在今年二零一七年一月发表的Safari 11.0.1版本现已支撑WebRTC了,所以Safari依然一个升高的孩子。

Edge也计划辅助,所以Service Worker的前景特别美好。

开展阅读

别的,还会有多少个很棒的离线效率案例。如:Guardian 营造了四个颇具 crossword puzzle(填字游戏)的离线 web 页面 – 因而,尽管等待互联网重连时(即已在离线状态下),也能找到一点乐趣。作者也引入看看 Google Chrome Github repo,它包含了累累两样的 Service Worker 案例 – 其中部分使用案例也在那!

唯独,假令你想跳过上述代码,只是想大约地由此三个库来管理相关操作,那么本人推荐你看看 UpUp。那是二个轻量的剧本,能让你更轻易地应用离线功效。

打赏支持我翻译更多好小说,感激!

打赏译者

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时将有着符合缓存战术的能源开展缓存。

专业规律

透过一段简单的 JavaScript,大家得以提醒浏览器在客户访问页面包车型地铁时候登时登记大家休戚与共的 service worker。近期支持 service worker 的浏览器非常少,所感觉了制止不当,我们须求动用性子检查评定。

JavaScript

if (navigator.serviceWorker) { navigator.serviceWorker.register('/service-worker.js'); }

1
2
3
if (navigator.serviceWorker) {
    navigator.serviceWorker.register('/service-worker.js');
}

Service worker 安装事件的一有的,大家能够动用 新的缓存 API 来缓存大家网址中的各类内容,譬喻 HTML、CSS 和 JavaScript:

JavaScript

var staticCacheName = 'static'; var version = 1; function updateCache() { return caches.open(staticCacheName + version) .then(function (cache) { return cache.addAll([ '/offline-page.html', '/assets/css/main.css', '/assets/js/main.js' ]); }); }; self.addEventListener('install', function (event) { event.waitUntil(updateCache()); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var staticCacheName = 'static';
var version = 1;
 
function updateCache() {
    return caches.open(staticCacheName + version)
        .then(function (cache) {
            return cache.addAll([
                '/offline-page.html',
                '/assets/css/main.css',
                '/assets/js/main.js'
            ]);
        });
};
 
self.addEventListener('install', function (event) {
    event.waitUntil(updateCache());
});

当安装完结后,service worker 能够监听和操纵 fetch 事件,让大家得以完全调控之后网址中发生的具备网络央浼。

JavaScript

self.addEventListener('fetch', function (event) { event.respondWith(fetch(event.request)); });

1
2
3
self.addEventListener('fetch', function (event) {
    event.respondWith(fetch(event.request));
});

在那边大家有很灵活的上空能够发挥,举例上面那些关键,能够透过代码来生成大家友好的伸手响应:

JavaScript

self.addEventListener('fetch', function (event) { var response = new Response('<h1>Hello, World!</h1>', { headers: { 'Content-Type': 'text/html' } }); event.respondWith(response); });

1
2
3
4
5
self.addEventListener('fetch', function (event) {
    var response = new Response('&lt;h1&gt;Hello, World!&lt;/h1&gt;',
        { headers: { 'Content-Type': 'text/html' } });
    event.respondWith(response);
});

再有那个,借使在缓存中找到了央求相应的缓存,大家得以一向从缓存中回到它,尽管没找到的话,再通过网络得到响应内容:

JavaScript

self.addEventListener('fetch', function (event) { event.respondWith( caches.match(event.request) .then(function (response) { return response || fetch(event.request); }) ); });

1
2
3
4
5
6
7
8
self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request)
            .then(function (response) {
                return response || fetch(event.request);
            })
    );
});

那么我们怎么着使用这个成效来提供离线体验吧?

第一,在 service worker 安装进度中,大家须求把离线页面须求的 HTML 和财富文件通过 service worker 缓存下来。在缓存中,我们加载了温馨付出的 填字游戏 的 React应用 页面。之后,我们会堵住全数访谈theguardian.com 网络央浼,包罗网页、以及页面中的能源文件。处理那么些央求的逻辑大致如下:

  1. 当我们检查测量检验到传播诉求是指向大家的 HTML 页面时,大家总是会想要提供最新的内容,所以大家会尝试把那么些央浼通过网络发送给服务器。
    1. 当我们从服务器获得了响应,就能够一向回到这几个响应。
    2. 如果网络央浼抛出了万分(比如因为客户掉线了),大家捕获这么些丰硕,然后接纳缓存的离线 HTML 页面作为响应内容。
  2. 不然,当大家检查实验到须求的不是 HTML 的话,大家会从缓存中找找响应的呼吁内容。
    1. 假使找到了缓存内容,大家得以一贯重回缓存的内容。
    2. 不然,大家会尝试把那些央求通过互连网发送给服务器。

在代码中,我们使用了 新的缓存 API(它是 Service Worker API 的一有的)以及 fetch 功用(用于转移网络伏乞),如下所示:

JavaScript

var doesRequestAcceptHtml = function (request) { return request.headers.get('Accept') .split(',') .some(function (type) { return type === 'text/html'; }); }; self.addEventListener('fetch', function (event) { var request = event.request; if (doesRequestAcceptHtml(request)) { // HTML pages fallback to offline page event.respondWith( fetch(request) .catch(function () { return caches.match('/offline-page.html'); }) ); } else { // Default fetch behaviour // Cache first for all other requests event.respondWith( caches.match(request) .then(function (response) { return response || fetch(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
25
26
27
var doesRequestAcceptHtml = function (request) {
    return request.headers.get('Accept')
        .split(',')
        .some(function (type) { return type === 'text/html'; });
};
 
self.addEventListener('fetch', function (event) {
    var request = event.request;
    if (doesRequestAcceptHtml(request)) {
        // HTML pages fallback to offline page
        event.respondWith(
            fetch(request)
                .catch(function () {
                    return caches.match('/offline-page.html');
                })
        );
    } else {
        // Default fetch behaviour
        // Cache first for all other requests
        event.respondWith(
            caches.match(request)
                .then(function (response) {
                    return response || fetch(request);
                })
        );
    }
});

就只需求那样多!theguardian.com 上的 怀有代码都以在 GitHub 上开源 的,所以你能够去那儿查看大家的 service worker 的完整版本,大概直接从生产条件上访谈 。

小编们有丰裕的说辞为那几个新的浏览器本事欢呼喝彩,因为它能够用来让您的网址像前日的原生应用同样,具有完善的离线体验。未来当 theguardian.com 完全迁移到 HTTPS 之后,离线页面包车型大巴根本性会显著加多,大家能够提供越发圆满的离线体验。设想一下您在上下班途中互联网很不佳的时候访谈theguardian.com,你会看出专门为您订制的性格化内容,它们是在你以前访谈网址时由浏览器缓存下来的。它在安装进程中也不会生出其余劳碌,你所须求的只是探望这些网址而已,不像原生应用,还需求顾客有三个行使集团的账号技能设置。Serviceworker 同样能够协助大家升高网址的加载速度,因为网址的框架能够被保证地缓存下来,就疑似原生应用同样。

一旦您对 service worker 很感兴趣,想要领悟愈来愈多内容的话,开辟者 马特Gaunt(Chrome的鞠躬尽力支持者)写了一篇更加详实地 介绍 Service Worker的文章。

打赏扶助笔者翻译更加多好小说,多谢!

打赏译者

拍卖响应式图片

img的srcset属性只怕<picture>标签会根据情况从浏览器或者网络上选择最合适尺寸的图片。

在service worker中,你想要在install步骤缓存贰个图纸,你有以下两种选择:

  1. 设置具备的<picture>元素或者将被请求的srcset属性。
  2. 设置单一的low-res版本图片
  3. 设置单一的high-res版本图片

比较好的方案是2或3,因为假设把装有的图样都给下载下来存着有一些浪费内部存款和储蓄器。

假设你将low-res版本在install的时候缓存了,然后在页面加载的时候你想要尝试从互联网上下载high-res的版本,可是假诺high-res版本下载退步以来,就照旧用low-res版本。这么些主见很好也值得去做,可是有三个难点:

如果大家有上边二种图片:

Screen Density Width Height
1x 400 400
2x 800 800

HTML代码如下:

JavaScript

<img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x" />

1
<img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x" />

假诺大家在二个2x的来得格局下,浏览器会下载image-2x.png,如若大家离线,你能够读取在此之前缓存并再次回到image-src.png代替,假设在此之前它已经被缓存过。固然如此,由于后日的形式是2x,浏览器会把400X400的图片显示成200X200,要制止那么些主题素材就要在图纸的样式上安装宽高。

JavaScript

<img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x" style="width:400px; height: 400px;" />

1
2
<img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x"
style="width:400px; height: 400px;" />

sbf282.com 7

<picture>标签情况更复杂一些,难度取决于你是如何创建和使用的,但是可以通过与srcset类似的思路去解决。

3. 使用Service Worker

ServiceWorker的选用套路是先挂号一个Worker,然后后台就能够运转一条线程,可以在那条线程运营的时候去加载一些财富缓存起来,然后监听fetch事件,在那一个事件里拦截页面包车型大巴央求,先看下缓存里有未有,假设有直接再次来到,不然经常加载。或然是一开头不缓存,每种财富乞求后再拷贝一份缓存起来,然后下一遍呼吁的时候缓存里就有了。

打赏支持本身翻译更加多好小说,多谢!

任选一种支付办法

sbf282.com 8 sbf282.com 9

1 赞 3 收藏 1 评论

什么是 Service worker

sbf282.com 10

如上图,Service worker 是一种由Javascript编写的浏览器端代理脚本,位于你的浏览器和服务器之间。当二个页面注册了一个 Service worker,它就能够登记一多级事件管理器来响应如网络央浼和消息推送这一个事件。Service worker 能够被用来治本缓存,当响应一个网络伏乞时能够配备为回去缓存依旧从网络获取。由于Service worker 是依赖事件的,所以它只在管理那几个事件的时候被调入内部存款和储蓄器,不用顾忌常驻内部存款和储蓄器占用财富导致系统变慢。

连不上网?U.K.卫报的天性离线页面是那样做的

2015/11/20 · HTML5 · Service Worker, 离线页面

本文由 伯乐在线 - Erucy 翻译,weavewillg 校稿。未经许可,禁止转发!
日语出处:Oliver Ash。应接参预翻译组。

我们是何等行使 service worker 来为 theguardian.com 营造三个自定义的离线页面。

sbf282.com 11

theguardian.com 的离线页面。插图:奥利弗 Ash

您正在朝着集团途中的客车里,在手机上开拓了 Guardian 应用。地铁被隧道包围着,然则那么些利用可以平常运维,固然未有互联网连接,你也能博得完全的功效,除了出示的剧情恐怕有一点点旧。假诺你品味在网址上也如此干,可惜它完全无法加载:

sbf282.com 12

安卓版 Chrome 的离线页面

Chrome 中的那个彩蛋,很五人都不明白》

Chrome 在离线页面上有个暗藏的游玩(桌面版上按空格键,手机版上点击那只恐龙),这多少能减轻一点你的郁闷。不过大家得以做得更加好。

Service workers 允许网址作者拦截自个儿站点的具备互连网央浼,那也就意味着我们得以提供周密的离线体验,就好像原生应用一样。在 Guardian 网址,大家多年来上线了三个自定义的离线体验效果。当客户离线的时候,他们会看出贰个暗含 Guardian 标记的页面,上边带有二个简便的离线提示,还也可以有一个填字游戏,他们得以在等候互联网连接的时候玩玩这么些找点乐子。那篇博客解释了我们是怎么营造它的,但是在开端在此之前,你能够先本身尝试看。

更加的多内容

此处有点连锁的文书档案能够参见:

(1)注册二个Service Worker

Service Worker对象是在window.navigator里面,如下代码:

JavaScript

window.addEventListener("load", function() { console.log("Will the service worker register?"); navigator.serviceWorker.register('/sw-3.js') .then(function(reg){ console.log("Yes, it did."); }).catch(function(err) { console.log("No it didn't. This happened: ", err) }); });

1
2
3
4
5
6
7
8
9
window.addEventListener("load", function() {
    console.log("Will the service worker register?");
    navigator.serviceWorker.register('/sw-3.js')
    .then(function(reg){
        console.log("Yes, it did.");
    }).catch(function(err) {
        console.log("No it didn't. This happened: ", err)
    });
});

在页面load完事后注册,注册的时候传贰个js文件给它,这几个js文件正是ServiceWorker的运营条件,假使不能够成功注册的话就能抛非凡,如Safari TP即使有其一目的,然则会抛十分不可能使用,就可以在catch里面管理。这里有个难点是为什么须要在load事件运行呢?因为你要极度运行多个线程,运维之后您恐怕还恐怕会让它去加载能源,这个都以索要占用CPU和带宽的,大家理应有限援救页面能健康加载完,然后再开行大家的后台线程,无法与正规的页面加载产生竞争,那么些在低级移动器具意义不小。

还会有少数要求小心的是ServiceWorker和Cookie一样是有Path路线的概念的,假诺你设定三个cookie要是叫time的path=/page/A,在/page/B那些页面是不可见取获得这一个cookie的,假使设置cookie的path为根目录/,则怀有页面都能博获得。类似地,借使注册的时候使用的js路线为/page/sw.js,那么这几个ServiceWorker只可以管理/page路线下的页面和财富,而不可见管理/api路线下的,所以一般把ServiceWorker注册到五星级目录,如上面代码的”/sw-3.js”,那样那么些ServiceWorker就会接管页面包车型大巴享有能源了。

动用 Service worker 创制三个特别简单的离线页面

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

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

让我们想像以下情况:大家那儿在一辆通往农村的列车的里面,用移动设备望着一篇很棒的小说。与此同不经常候,当您点击“查看越多”的链接时,火车蓦地进入了隧道,导致运动道具失去了网络,而 web 页面会展现出类似以下的剧情:

sbf282.com 13

那是一定令人心寒的经验!幸运的是,web 开拓者们能由此一些新特色来改革那类的顾客体验。作者近些日子直接在折腾 ServiceWorkers,它给 web 带来的不计其数可能性总能给本身欣喜。Service Workers 的不错特质之一是允许你检查实验网络央浼的景色,并让您作出相应的响应。

在那篇著作里,笔者筹划用此性子检查顾客的此时此刻互联网连接情况,假使没连接则赶回贰个极品轻松的离线页面。就算那是一个老大基础的案例,但它能给你带来启发,让您知道运行并运营该天性是何等的大概!借令你没领会过 Service Worker,小编建议您看看此 Github repo,明白越来越多相关的音信。

在本案例开头前,让大家先轻易地走访它的做事流程:

  1. 在顾客第二回访谈大家的页面时,大家会设置 ServiceWorker,并向浏览器的缓存增多我们的离线 HTML 页面
  2. 下一场,尽管客户筹划导航到另三个 web 页面(同贰个网址下),但此刻已断网,那么大家将重临已被缓存的离线 HTML 页面
  3. 只是,假如顾客筹划导航到其余一个 web 页面,而那时候网络已接连,则能照常浏览页面

加快/离线访问只需三步

  • 首页加多注册代码

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都援引了如何第三方财富,每一种加到忽略列表里。

sbf282.com 14

在根目录下加多offline.html,在未曾网络且缓存中也没不时采纳,效果如下:

sbf282.com 15

在根目录下增多offline.svg,在无网络时图片财富伏乞重临该公文。

关于作者:Erucy

sbf282.com 16

早已的SharePoint喵星工程师(权且还挂着微软MVP的名头),今后的Azure/.Net/MongoDB/Cordova/前端工程师,偶然写随笔 个人主页 · 作者的小说 · 46 ·   

sbf282.com 17

何以注册和设置service worker

要安装service worker,你需求在你的页面上注册它。那一个手续告诉浏览器你的service worker脚本在哪个地方。

JavaScript

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.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); }); }

1
2
3
4
5
6
7
8
9
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.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);
  });
}

地方的代码检查service worker API是还是不是可用,要是可用,service worker /sw.js 被注册。

如若那么些service worker已经被登记过,浏览器会自行忽略上边的代码。

有二个亟待特不要讲明的是service worker文件的路子,你早晚细心到了在这几个例子中,service worker文件被放在这些域的根目录下,那意味着service worker和网址同源。换句话说,那些service work将会接受那几个域下的全部fetch事件。假如小编将service worker文件注册为/example/sw.js,那么,service worker只能收到/example/路径下的fetch事件(例如: /example/page1/, /example/page2/)。

未来你能够到 chrome://inspect/#service-workers 检查service worker是否对你的网站启用了。

sbf282.com 18

当service worker第一版被实现的时候,你也能够在chrome://serviceworker-internals中查看,它很有用,通过它可以最直观地熟悉service worker的生命周期,不过这个功能很快就会被移到chrome://inspect/#service-workers中。

你会意识那些职能能够很方便地在三个仿照窗口中测量试验你的service worker,那样你能够关闭和再度展开它,而不会耳熟能详到您的新窗口。任何创建在模仿窗口中的注册服务和缓存在窗口被关门时都将一去不归。

接纳 Service Worker 做贰个 PWA 离线网页应用

2017/10/09 · JavaScript · PWA, Service Worker

原稿出处: 人人网FED博客   

在上一篇《本身是什么让网址用上HTML5 Manifest》介绍了怎么用Manifest做贰个离线网页应用,结果被普及网民作弄说这么些事物已经被deprecated,移出web标准了,以后被ServiceWorker代替了,不管什么,Manifest的一对想想还能借用的。作者又将网址进级到了ServiceWorker,借使是用Chrome等浏览器就用ServiceWorker做离线缓存,假使是Safari浏览器就依然用Manifest,读者能够张开那些网址感受一下,断网也是能健康打开。

本文由胜博发-前端发布,转载请注明来源:针对不同的语言都有一些优秀的静态blog系统出现