xml地图|网站地图|网站标签 [设为首页] [加入收藏]
的移动页面优化方案,连不上网
分类:web前端

连不上网?大不列颠及苏格兰联合王国卫报的特性离线页面是那样做的

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 标志的页面,上边带有多少个轻巧易行的离线提示,还应该有三个填字游戏,他们能够在等候互连网连接的时候玩玩这一个找点乐子。那篇博客解释了我们是怎么营造它的,可是在始发早先,你能够先自身探索看。

AMP,来自 谷歌(Google) 的活动页面优化方案

2015/10/12 · HTML5 · AMP

初藳出处: imququ(@屈光宇)   

Web 质量优化(Web Performance Optimization,WPO)是三个故态复萌的话题,我也写过比较多有关「属性优化」的篇章。近来Google 有些协会推出了一项名称叫 Accelerated Mobile Pages(AMP)的本事,可以称作能大大加速活动端页面展现速度,升高全部体验。本文就带大家认知一下那项新技术。

Service Worker初体验

2016/01/06 · JavaScript · Service Worker

原来的书文出处: AlloyTeam   

在2016年,W3C发布了service worker的草案,service worker提供了众多新的力量,使得web app具有与native app一样的离线体验、新闻推送体验。
service worker是一段脚本,与web worker同样,也是在后台运维。作为一个单独的线程,运转景况与经常脚本分歧,所以不可能间接参加web交互行为。native app能够实现离线使用、信息推送、后台自动更新,service worker的面世是辛亏为了使得web app也能够享有类似的本领。

 

service worker可以:

  1. 后台消息传递
  2. 互连网代理,转载呼吁,伪造响应
  3. 离线缓存
  4. 音讯推送
  5.  … …

正文以财富缓存为例,说飞鹤下service worker是什么行事的。

试试看

你需求三个支撑 Service Worker 和 fetch API 的浏览器。甘休到本文编写时独有Chrome(手机版和桌面版)同一时间补助这三种 API(译者注:Opera 前段时间也扶持这两侧),可是 Firefox 十分的快将在扶助了(在每天更新的本子中早已支撑了),而外 Safari 之外的有着浏览器也都在推行。其他,service worker 只可以登记在选用了 HTTPS 的网站上,theguardian.com 已经开端稳步搬迁到 HTTPS,所以咱们只可以在网址的 HTTPS 部分提供离线体验。就现阶段的话,大家挑选了 开采者博客 作为我们用来测量检验的地点。所以若是你是在我们网站的 开荒者博客 部分阅读这篇小说的话,很幸运。

当您选用扶助的浏览器访谈我们的 开荒者博客 中的页面包车型客车时候,一切就筹划安妥了。断开你的网络连接,然后刷新一下页面。假若您本身没规范尝试的话,能够看一下这段 身体力行摄像(译者注:需梯子)。

AMP 介绍

Accelerated Mobile Pages(官网、GitHub),直译成中文是「加快的运动页面」的情致。遵照官方表明,AMP 在 Speed Index(首屏表现时间平均值)测量检验中,品质有 15% ~ 85% 的晋级,测验是在模仿 3G 互连网情状并仿照 Nexus 5 的规范下实现(详情)。

AMP 怎样让页面质量大幅度升高暂时搁置一边,先来看看它是哪些。依据官方网站文书档案获悉,AMP 首要由 AMP HTML、AMP Runtime 以致 AMP Components 三部分构成。

生命周期

先来看一下三个service worker的运作周期

图片 3
上海教室是service worker生命周期,出处

图中得以看来,三个service worker要经历以下进度:

  1.  安装

2.  激活,激活成功之后,张开chrome://inspect/#service-workers可以查见到近年来运营的service worker

图片 4

  1. 监听fetch和message事件,上面三种事件会进展简短描述

  2. 销毁,是还是不是销毁由浏览器决定,借使三个service worker长时间不应用照旧机器内部存储器有数,则大概会销毁这一个worker

行事规律

透过一段简单的 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 能够监听和垄断(monopoly) 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的文章。

打赏支持自个儿翻译越多好文章,谢谢!

打赏译者

AMP HTML

AMP HTML 是 HTML 的子集,在 AMP HTML 中只允许行使轻巧的竹签。譬喻 <body><article> 那一个标签能够直接动用,未有别的限制;有个别标签允许有限制的选择,譬如 <meta> 标签不可能应用 http-equiv 属性;而像 <img><audio> 那样的竹签须求替换为 <amp-img><amp-audio> 等 AMP Components;越来越多的标签如 <frame><form> 不容许行使。

全体表明能够查看官方网址的 AMP HTML 格式文书档案。以下是该文书档案中的 AMP HTML 示例:

XHTML

<html> <head> <meta charset="utf-8"> <title>Sample document</title> <link rel="canonical" href="./regular-html-version.html"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui"> <style amp-custom> h1 {color: red} </style> <script type="application/ld+json"> { "@context": "", "@type": "NewsArticle", "headline": "Article headline", "image": [ "thumbnail1.jpg" ], "datePublished": "2015-02-05T08:00:00+08:00" } </script> <script async custom-element="amp-carousel" src="; <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> <script async src="; </head> <body> <h1>Sample document</h1> <p> Some text <amp-img src=sample.jpg width=300 height=300></amp-img> </p> <amp-ad width=300 height=250 type="a9" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302"> </amp-ad> </body> </html>

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
28
29
30
31
32
33
34
35
36
37
38
<html>
<head>
  <meta charset="utf-8">
  <title>Sample document</title>
  <link rel="canonical" href="./regular-html-version.html">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
  <style amp-custom>
    h1 {color: red}
  </style>
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "headline": "Article headline",
    "image": [
      "thumbnail1.jpg"
    ],
    "datePublished": "2015-02-05T08:00:00+08:00"
  }
  </script>
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Sample document</h1>
<p>
  Some text
  <amp-img src=sample.jpg width=300 height=300></amp-img>
</p>
<amp-ad width=300 height=250
    type="a9"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
</amp-ad>
</body>
</html>

能够看看,AMP HTML 与常见 HTML 并不曾什么样太大分裂,上边这段代码能够一贯存为 .html 文件,并在浏览器中健康运营。上边简单列举部分格式上的渴求:

  • DTD 必须是: <!doctype html>
  • 顶层标签必须包涵 AMP 属性,如:<html ⚡> 或 <html amp>(让任何程序能方便人民群众地辨认出那是 AMP HTML);
  • 非得在 HEAD 区域中放置 <link rel="canonical" href="$SOME_URL" /> 标签,用来内定该文书档案普通版本的 UHighlanderL;要是唯有三个版本,使用当前 URAV4L 就能够(告诉找寻引擎,那是同三个页面不一致的本子,不然也许会被判作弊);
  • 必须将 <meta charset="utf-8"> 放置在 HEAD 区域最开端的岗位(实际上,普通 HTML 也应当这么做);
  • 必得在 HEAD 区域满含这几个ViewPort:<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
  • 必须将 <script async src="https://cdn.ampproject.org/v0.js"></script> 作为 HEAD 区域最终的因素;
  • 非得在 HEAD 区域满含以下代码:<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>

fetch事件

在页面发起http伏乞时,service worker能够通过fetch事件拦截哀告,并且付诸本人的响应。
w3c提供了叁个新的fetch api,用于替代XMLHttpRequest,与XMLHttpRequest最大分歧有两点:

1. fetch()方法重返的是Promise对象,通过then方法开展连接调用,减少嵌套。ES6的Promise在改为正式之后,会尤其便利开拓人士。

2. 提供了Request、Response对象,即使做过后端开采,对Request、Response应该对比熟知。前端要倡导呼吁能够通过url发起,也能够行使Request对象发起,并且Request能够复用。可是Response用在何地啊?在service worker出现从前,前端确实不会融洽给本人发音讯,但是有了service worker,就能够在拦截央求之后据他们说要求发回本身的响应,对页面来讲,这么些平凡的伸手结果并从未区分,那是Response的一处选择。

下边是在中,小编利用fetch api通过fliker的当众api获取图片的例证,注释中详细说明了每一步的功能:

JavaScript

/* 由于是get须求,间接把参数作为query string传递了 */ var URL = ''; function fetch德姆o() { // fetch(url, option)扶植三个参数,option中能够设置header、body、method消息fetch(UEscortL).then(function(response) { // 通过promise 对象得到对应内容,而且将响应内容遵照json格式转成对象,json()方法调用之后回到的依然是promise对象 // 也能够把内容转形成arraybuffer、blob对象 return response.json(); }).then(function(json) { // 渲染页面 insertPhotos(json); }); } fetch德姆o();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 由于是get请求,直接把参数作为query string传递了 */
var URL = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=your_api_key&format=json&nojsoncallback=1&tags=penguins';
 
function fetchDemo() {
  // fetch(url, option)支持两个参数,option中可以设置header、body、method信息
  fetch(URL).then(function(response) {
    // 通过promise 对象获得相应内容,并且将响应内容按照json格式转成对象,json()方法调用之后返回的依然是promise对象
    // 也可以把内容转化成arraybuffer、blob对象
    return response.json();
  }).then(function(json) {
    // 渲染页面
    insertPhotos(json);
  });
}
 
fetchDemo();

fetch api与XMLHttpRequest相比较,尤其简明,并且提供的效应更宏观,能源得到方式比ajax更名贵。宽容性方面:chrome 42开头扶植,对于旧浏览器,能够因此合法维护的polyfill帮助。

打赏扶持自个儿翻译更加多好作品,多谢!

图片 5

1 赞 收藏 评论

AMP Runtime

在上头的 AMP HTML 代码中,HEAD 区域最后外链引进的 JS 正是 AMP Runtime。AMP Runtime 提供对自定义成分(Custom Elements)的支撑,负担和谐整工财富的加运载飞机会和优先级,以至提供验证器等调度功能。

做客 AMP HTML 时,在 URAV4L 最终追加 #development=1 会开启开辟者形式。那时 AMP Runtime 会自动加载验证器,并在调控台展现本页不合乎 AMP 标准的岗位音讯。

message事件

页面和serviceWorker之间能够通过posetMessage()方法发送音讯,发送的音信能够透过message事件接收到。

那是三个双向的长河,页面能够发音信给service worker,service worker也可以发送音信给页面,由于这几个特点,能够将service worker作为中间纽带,使得贰个域名依旧子域名下的八个页面能够从心所欲通讯。

此处是贰个小的页面之间通讯demo

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:的移动页面优化方案,连不上网

上一篇:IE开发者工具教程,相关流程 下一篇:没有了
猜你喜欢
热门排行
精彩图文