365bet亚洲版登录-bet官网365入口

365bet亚洲版登录拥有超过百间客房,bet官网365入口的文化历经几十年的传承和积淀形成的核心内容获得业界广泛的认可,365bet亚洲版登录是目前信誉最高的娱乐场所,同国内外几百家网上内容供应商建立了合作关系。

连不上网

连不上网?英帝国卫报的秉性离线页面是那般做的

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

本文由 伯乐在线 - Erucy 翻译,weavewillg 校稿。未经许可,制止转发!
阿拉伯语出处:Oliver Ash。应接加入翻译组。

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

图片 1

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

你正在朝着公司途中的大巴里,在小弟大上开垦了 Guardian 应用。大巴被隧道包围着,可是这一个应用能够健康运维,即便未有互连网连接,你也能拿到完整的效应,除了出示的开始和结果大概有一点点旧。借让你品尝在网址上也这样干,可惜它完全无法加载:

图片 2

安卓版 Chrome 的离线页面

Chrome 中的这几个彩蛋,很三人都不亮堂》

Chrome 在离线页面上有个藏匿的游艺(桌面版上按空格键,手提式有线电话机版上点击那只恐龙),那有些能减轻一点你的忧愁。但是大家可以做得更加好。

Service workers 允许网址小编拦截本人站点的兼具互联网央浼,那也就表示大家可以提供全面包车型大巴离线体验,似乎原生应用一样。在 Guardian 网址,大家多年来上线了四个自定义的离线体验效果。当客商离线的时候,他们会看出五个带有 Guardian 标记的页面,上边带有多个简约的离线提示,还可能有一个填字游戏,他们能够在等候网络连接的时候玩玩这么些找点乐子。这篇博客解释了我们是何许营造它的,然而在上马在此以前,你能够先自身尝试看。

试试看

您须求三个支撑 Service Worker 和 fetch API 的浏览器。截至到本文编写时唯有Chrome(手提式有线电话机版和桌面版)同期协理这三种 API(译者注:Opera 这段时间也支撑那四头),但是 Firefox 异常的快将在补助了(在每一日更新的本子中早就协助了),除了那么些之外 Safari 之外的保有浏览器也都在实践。另外,service worker 只可以登记在使用了 HTTPS 的网址上,theguardian.com 已经最初稳步搬迁到 HTTPS,所以大家只辛亏网址的 HTTPS 部分提供离线体验。就当下来讲,大家选拔了 开采者博客 作为我们用来测量检验的地点。所以假令你是在大家网址的 开垦者博客 部分阅读那篇文章的话,很幸运。

当您选拔辅助的浏览器访谈大家的 开采者博客 中的页面包车型地铁时候,一切就计划伏贴了。断开你的网络连接,然后刷新一下页面。倘让你和睦没规范尝试的话,能够看一下这段 示范录制(译者注:需梯子)。

职业原理

由此一段简单的 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 很感兴趣,想要了然越来越多内容的话,开拓者 MattGaunt(Chrome的忠贞支持者)写了一篇越发详实地 介绍 Service Worker的文章。

打赏扶助本人翻译越来越多好作品,多谢!

打赏译者

打赏帮助笔者翻译更加多好文章,多谢!

图片 3

1 赞 收藏 评论

有关小编:Erucy

图片 4

现已的SharePoint喵星技师(一时半刻还挂着微软MVP的名头),今后的Azure/.Net/MongoDB/Cordova/前端技师,有的时候写随笔 个人主页 · 小编的篇章 · 46 ·   

图片 5

本文由365bet亚洲版登录发布于 Web前端,转载请注明出处:连不上网

您可能还会对下面的文章感兴趣: