首页 > 策划 > 关键词 > 离线网页最新资讯 > 正文

连不上网?英国卫报的个性离线页面是这样做的

2015-11-27 14:10 · 稿源:JobBole.com

我们是如何使用 service worker 来为 theguardian.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

我们有充足的理由为这些新的浏览器技术欢呼喝彩,因为它可以用来让你的网站像今天的原生应用一样,拥有完善的离线体验。未来当 theguardian.com 完全迁移到 HTTPS 之后,离线页面的重要性会明显增加,我们可以提供更加完善的离线体验。设想一下你在上下班路上网络很差的时候访问 theguardian.com,你会看到专门为你订制的个性化内容,它们是在你之前访问网站时由浏览器缓存下来的。它在安装过程中也不会产生任何不便,你所需要的只是访问这个网站而已,不像原生应用,还需要用户有一个应用商店的账号才能安装。Service worker 同样可以帮助我们提升网站的加载速度,因为网站的框架能够被可靠地缓存下来,就像原生应用一样。

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

  • 相关推荐
  • 大家在看
  • 如何将访客转化为潜在客户?这个8个网站优化策略了解下

    你是否已经将自己的网站优化到最佳状态了呢?通过优化来产生潜在客户是转化网站已经获得的流量的最好方法之一。然而,如果你认为在网站的主页上添加几个“点击这里”的CTA策略(注:Callto Action,行动呼吁),就能获取更多的潜在客户,很遗憾的说,这个想法大错特错。

  • 不限速下载+磁力离线神器 黑科云将于12月1日关闭

    互联网的老司机又要痛失一个阵地了,黑科云日前突然宣布将在12月1日关闭,用户云空间的所有文件将被清仓,大家要提前下载到本地了。黑科云的前身叫做萝莉云,它也是一个在线网盘,支持各种磁力

  • 灯塔上线网络电影日分账票房数据 网络电影进入票房日更时代

    【TechWeb】6月29日消息,昨日,优酷首次向灯塔专业版公布网络电影日票房数据,使灯塔进一步深耕影视精细化数据的同时,也标志着网络电影正式进入票房日更时代。目前在灯塔专业版上,用户不仅可以查看优酷网络电影日分账票房,还能够查询到累计分账票房、日榜单、月榜单,以及每日播放热度等网络电影数据。同时在优酷开放平台上,网络电影日票房榜功能也将同步上线,用户可随时查看优酷网络电影的日票房、日榜、月榜、影片信息、?

  • 利用网页抓取数据赚钱的3个思路

    在大数据时代,如何有效获取数据已成为驱动业务决策的关键技能。分析市场趋势,监视竞争对手等都需要进行数据采集。而网页抓取则是数据采集的主要方法之一。在本文中,Christopher Zita将和大家展示 3 种利用网络抓取赚钱的方法,全程只需几个小时就能学会,所用代码不到 50 行。

  • 网页排序哪5个特征,百度颇为喜欢?

    常常用于表达一个人对于另外一个人的情有独钟,而在搜索引擎的领域里,很多SEO人员,常常试图去找寻一个“唯一的真理”那就是搜索排序中,到底哪个排序特征对于网页来讲,是最为重要的一个因素,而“我只喜欢你”,对于SEO而言,能不能真的把SEO做好。

  • 江苏下架豆瓣电影等111款程序 约谈40家违规网站平台

    昨日,网信江苏发文称, 5 月份,江苏网信系统强化多部门协作监管,加强网络生态治理,依法打击网上各类违法违规行为,有效遏制有害信息反弹、反复势头,持续清朗网络空间。

  • 中国制粉网新版网站正式上线

    经过精心的策划和筹备,中国制粉网改版后的新网站即将于 6 月 1 日正式上线!新改版的网站保留了原有的网站基本功能,新增加了直播课,由业内专家在线答疑;新增加了商圈,吸引制粉行业人才汇集;新增加了互联网指导服务,帮助企业更好地开展自己的互联网业务。新增:直播课,新增直播课,不定时邀请技术、政策、资金、电商、企划等方面的老师、专家和领导对会员企业进行直播授课。依据当前形势,为企业生存及发展问题展开多角度的

  • 这个比QQ空间还古老的网站,是多少女孩的精神家园?

    ​你多久没有上网冲浪了?你还记得第一次和因特网的亲密接触吗?仔细算算那些诞生于 1999 年的网站,已经整整二十岁了。

  • IBM云服务出现故障 导致全球多个客户网站瘫痪

    太平洋时间 6 月 9 日下午,IBM Cloud的用户报告了一次故障,导致全球许多网站没有响应,目前该问题已经解决。

  • 这个网站靠帮人们分析怎么在网上赚钱,月入近3万

    不少想要搞副业的人,曾经花费大量时间和精力尝试在线赚钱,但最后才发现自己白折腾了。eBiz Facts 是一个小团队,该平台花费大量时间研究和审查各种在线赚钱方法是否靠谱,然后给用户一些建议,让他们避免被骗,以及浪费时间、精力和金钱在一些容易“踩坑”在线业务,并做出更明智的决策。

  • 电子书免费,写评论还奖励60美元,这家网站靠什么赚钱?

    对于喜欢阅读的用户来说,OnlineBookClub绝对是一个好地方。这个已经有着十多年历史的在线图书俱乐部,不但为用户提供免费的电子书,而且用户如果为电子书写评论,每条最高还可获得 60 美元的报酬。它甚至都不需要用户具备高级评论家的水平,只需要通过Online Book Club注册一个账户,注册成功后,你只要选好你喜欢的图书类型,然后从可供选择的图书中选择一本书,按照说明下载,然后提交评论就可以了。

  • 重磅!「晓程序观察」独家:支付宝小程序最全运营宝典!

    ​随着 618 战火愈演愈烈, 2020 年即将正式驶过一半航程了。年初疫情足不出户时,你们闭门在家做的目标计划书,不知道已经实现得如何了?

  • 苹果小程序在哪里

    北京时间今天凌晨,在 WWDC 2020 全球开发者大会上,苹果发布了 iOS 14 系统,正式介绍了其最新版的 iPhone 软件。ios14当中的一个亮眼便是被称为「苹果小程序」的新功能。苹果在App Store新加入的「App Clip」功能,就类似于小程序。苹果表示App Clips包含应用的一小部分功能,而无需完整下载安装,使用起来十分地方便。同时苹果也在研发全新的QR二维码格式,该格式同时使用视觉二维码和NFC来快速访问App Clip。以下是关于ios版小

  • 牛商网营销型网站:传统企业接到百万总统府邸大单

    牛商网的营销型网站助力13000+企业成功转型互联网,为传统企业转型互联提供无限可能。合肥市某专注于冷暖设备工程的传统企业,通过牛商网的营销型网站,单月销售额达 100 万,公司网络销售业务达到千万大关,通过网络成交的业绩占公司总业绩的90%,并通过牛商网制作的营销型官网接到了 5000 个平方的国外总统府邸工程订单。一起来看下牛商网是如何助力这家企业实现弯道超车的吧:传统做得再好,也要布局新跑道!这家冷暖设备工程公

  • 世界上使用频率最高的网站之一 推特CEO办公就用一部手机

    如果告诉你,作为世界上使用频率最高的网站之一,Twitter(推特)的CEO却连一台电脑都没有,仅仅是用一部手机,多西(Jack Dorsey)用自己的智能手机运营管理着全球最大的社交网络平台推特和数字商业服务公司Square,你可能觉得不可思议!

  • 5个月创建将网站转换APP项目,月入3万!

    今天要跟大家分享的是一个将网站转换为ios、安卓APP的创业项目——Convertify。Lucas Maldonado是这个项目的创始人,他用了五个月的时间构建了这个产品,虽然产品刚发布就吸引不少关注,但中间经历了“无人问津”的低迷阶段。不过靠着独特的服务和前期扎实的SEO工作,Convertify在后期逐渐成长了起来。如今Convertify项目月均收入 5000 美元(约合3.5 万人民币)。

  • B站CEO陈睿回应“B站变了吗”:B站已经不是一个小网站,有变化也有不变

    凤凰网科技讯 (作者/郑媛)6月26日消息,在BILIBILI十一周年发布会上,B站CEO陈睿表示,在跨年晚会之后,明显能感受到B站的影响力在扩大。对于“B站变了”这种说法,陈睿也在发布会上作出了回应,他认为,“B站有变化,但在越变越好,B站的属性和内容的竞争力是不变的。”陈睿在发布会上阐述了B站的变与不变。陈睿认为,第一点变化是B站的用户的变多,在第一季度B站的月活跃用户达到1.72亿,但是B站的用户属性没有变化,新增用户?

  • 他只用24小时建的小网站,如今年入1400万,怎么做到的?

    Gadget Flow是一个发现市场上最好产品的平台,类似于“什么值得买”这类型的产品导购网站。在本文的采访中,埃文将跟大家分享自己的创业过程以及运营Gadget Flow的经验,希望能给大家带来一些启发。

  • 享学课堂书写程序人生

    30 岁以后何去何从,是程序员职业生涯的分水岭。有的程序员会继续深造晋升,有的程序员会转投其他行业,也有一部分程序员选择创业,开启从 0 到 1 的新生涯。2018 年 3 月,三位踌躇满志的程序员走在一起,因为改变和梦想他们成立了享学课堂。Lison(李勋) 复旦大学工程硕士,曾就职于金蝶中间件、国防科大等知名企业,负责主持公司的日常各项经营管理工作,组建公司人才团队,制定公司发展战略,负责公司运营和销售管理工作;Jam

  • 用爱发电!这个漫画家自学成才开发了个网站,六年才实现盈利

    Character Creator是一个帮助人们轻松创建出漫画角色的web应用程序,只要按照自己的喜好选择人物特征元素(包括性别、发型、眼镜、嘴唇等等),就能创建出一个漫画形象

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议