【好运一分快3骗局】连不上网?英国卫报的个性离线页面是这样做的

  • 时间:
  • 浏览:0

亲戚亲戚朋友是怎么才能 才能 使用 s好运一分快3骗局e好运一分快3骗局rvi好运一分快3骗局ce worker 来为 theguardia好运一分快3骗局n.com 构建有有好几只 自定义的离线页面。

theguardian.com 的离线页面。插图:oliver Ash

你正在通往公司路上的地铁里,在手机上打开了 Guardian 应用。地铁被隧道包围着,不过这个应用才能如常运行,即使这样网络连接,你才能获得删改的功能,除了显示的内容不可能 有点儿旧。不可能 你尝试在网站上也这样干,可惜它删改这样加载:

安卓版 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 的浏览器很少,统统有为了处理错误,亲戚亲戚朋友须要使用特性检测。

if(navigator.serviceWorker){

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

}

Service worker 安装事件的一主次,亲戚亲戚朋友才能使用 新的缓存 API 来缓存亲戚亲戚朋友网站中的各种内容,比如 HTML、CSS 和 JavaScript:

varstaticCacheName='static';

varversion=1;

functionupdateCache(){

    returncaches.open(staticCacheName+version)

        .then(function(cache){

            returncache.addAll([

                '/offline-page.html',

                '/assets/css/main.css',

                '/assets/js/main.js'

            ]);

        });

};

self.addEventListener('install',function(event){

    event.waitUntil(updateCache());

});

当安装完成后,service worker 才能监听和控制 fetch 事件,让亲戚亲戚朋友才能删改控制时候网站中产生的所有网络请求。

self.addEventListener('fetch',function(event){

    event.respondWith(fetch(event.request));

});

在这里亲戚亲戚朋友有很灵活的空间才能发挥,比如下面这个点子,才能通过代码来生成亲戚亲戚朋友或多或少人的请求响应:

self.addEventListener('fetch',function(event){

    varresponse=newResponse('<h1>Hello, World!</h1>',

        {headers:{'Content-Type':'text/html'}});

    event.respondWith(response);

});

还有这个,不可能 在缓存中找到了请求相应的缓存,亲戚亲戚朋友才能直接从缓存中返回它,不可能 没找到得话,再通过网络获取响应内容:

self.addEventListener('fetch',function(event){

    event.respondWith(

        caches.match(event.request)

            .then(function(response){

                returnresponse||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 功能(用于生成网络请求),如下所示:

vardoesRequestAcceptHtml=function(request){

    returnrequest.headers.get('Accept')

        .split(',')

        .some(function(type){returntype==='text/html';});

};

self.addEventListener('fetch',function(event){

    varrequest=event.request;

    if(doesRequestAcceptHtml(request)){

        // HTML pages fallback to offline page

        event.respondWith(

            fetch(request)

                .catch(function(){

                    returncaches.match('/offline-page.html');

                })

        );

    }else{

        // Default fetch behaviour

        // Cache first for all other requests

        event.respondWith(

            caches.match(request)

                .then(function(response){

                    returnresponse||fetch(request);

                })

        );

    }

});

就只须要这样多!theguardian.com 上的 所有代码就有在 GitHub 上开源 的,统统有想要去那儿查看亲戚亲戚朋友的 service worker 的删改版本,不可能 直接从生产环境上访问 https://www.theguardian.com/service-worker.js。

亲戚亲戚朋友有丰厚的理由为有有哪些新的浏览器技术欢呼喝彩,不可能 它才能用来想要的网站像今天的原生应用一样,拥有完善的离线体验。好运一分快3骗局未来当 theguardian.com 删改迁移到 HTTPS 时候,离线页面的重要性会明显增加,亲戚亲戚朋友才能提供更加完善的离线体验。设想一下你在上下班路上网络很差的时候访问 theguardian.com,想要都看专门为你订制的个性化内容,它们是在你时候访问网站时由浏览器缓存下来的。它在安装过程中就是要产生任何不便,你所须要的就是访问这个网站而已,不像原生应用,还须要用户有有有好几只 应用商店的账号才能安装。Service worker 同样才能帮助亲戚亲戚朋友提升网站的加载时延,不可能 网站的框架才能被可靠地缓存下来,就像原生应用一样。

不可能 你对 service worker 很感兴趣,想要了解更多内容得话,开发者 Matt Gaunt(Chrome的忠实支持者)写了一篇更加删改地介绍 Service Worker 的文章。