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

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

关于作者:Erucy

图片 1

曾经的SharePoint喵星程序猿(暂时还挂着微软MVP的名头),现在的Azure/.Net/MongoDB/Cordova/前端程序猿,偶尔写小说

个人主页
·
我的文章
·
46
·
  

图片 2

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

图片 3
图片 4

1 赞 3 收藏 1
评论

试试看

你需要一个支持 Service
Worker
fetch
API
的浏览器。截止到本文编写时只有
Chrome(手机版和桌面版)同时支持这两种 API(译者注:Opera
目前也支持这两者),不过 Firefox
很快就要支持了(在每日更新的版本中已经支持了),除了 Safari
之外的所有浏览器也都在跃跃欲试
。此外,service worker 只能注册在使用了
HTTPS 的网站上,theguardian.com
已经开始逐步迁移到 HTTPS,所以我们只能在网站的 HTTPS
部分提供离线体验。就目前来说,我们选择了 开发者博客 作为我们用来测试的地方。所以如果你是在我们网站的 开发者博客 部分阅读这篇文章的话,很走运。

当你使用支持的浏览器访问我们的 开发者博客 中的页面的时候,一切就准备妥当了。断开你的网络连接,然后刷新一下页面。如果你自己没条件尝试的话,可以看一下这段 演示视频(译者注:需梯子)。

拓展阅读

此外,还有几个很棒的离线功能案例。如:Guardian 构建了一个拥有 crossword
puzzle
(填字游戏)的离线
web 页面 –
因此,即使等待网络重连时(即已在离线状态下),也能找到一点乐趣。我也推荐看看
Google Chrome Github
repo
,它包含了很多不同的
Service Worker 案例 – 其中一些应用案例也在这!

然而,如果你想跳过上述代码,只是想简单地通过一个库来处理相关操作,那么我推荐你看看
UpUp。这是一个轻量的脚本,能让你更轻松地使用离线功能。

打赏支持我翻译更多好文章,谢谢!


打赏译者

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

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

本文由 伯乐在线
Erucy
翻译,weavewillg
校稿。未经许可,禁止转载!
英文出处:Oliver
Ash
。欢迎加入翻译组

我们是如何使用 service worker 来为 theguardian.com
构建一个自定义的离线页面。

图片 5

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

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

图片 6

安卓版 Chrome 的离线页面

Chrome 中的这个彩蛋,很多人都不知道

Chrome
在离线页面上有个隐藏的游戏(桌面版上按空格键,手机版上点击那只恐龙),这多少能减轻一点你的烦躁。不过我们可以做得更好。

Service
workers

允许网站作者拦截自己站点的所有网络请求,这也就意味着我们可以提供完善的离线体验,就像原生应用一样。在
Guardian
网站,我们最近上线了一个自定义的离线体验功能。当用户离线的时候,他们会看到一个带有
Guardian
标识的页面,上面带有一个简短的离线提示,还有一个填字游戏,他们可以在等待网络连接的时候玩玩这个找点乐子。这篇博客解释了我们是如何构建它的,不过在开始之前,你可以先自己试试看。

利用 Service worker 创建一个非常简单的离线页面

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

本文由 伯乐在线
刘健超-J.c
翻译,艾凌风
校稿。未经许可,禁止转载!
英文出处:Dean
Hume
。欢迎加入翻译组

让我们想像以下情景:我们此时在一辆通往农村的火车上,用移动设备看着一篇很棒的文章。与此同时,当你点击“查看更多”的链接时,火车忽然进入了隧道,导致移动设备失去了网络,而
web 页面会呈现出类似以下的内容:

图片 7

这是相当令人沮丧的体验!幸运的是,web
开发者们能通过一些新特性来改善这类的用户体验。我最近一直在折腾 Service
Workers,它给 web 带来的无尽可能性总能给我惊喜。Service Workers
的美妙特质之一是允许你检测网络请求的状况,并让你作出相应的响应。

在这篇文章里,我打算用此特性检查用户的当前网络连接状况,如果没连接则返回一个超级简单的离线页面。尽管这是一个非常基础的案例,但它能给你带来启发,让你知道启动并运行该特性是多么的简单!如果你没了解过
Service Worker,我建议你看看此 Github
repo
,了解更多相关的信息。

在该案例开始前,让我们先简单地看看它的工作流程:

  1. 在用户首次访问我们的页面时,我们会安装 Service
    Worker,并向浏览器的缓存添加我们的离线 HTML 页面
  2. 然后,如果用户打算导航到另一个 web
    页面(同一个网站下),但此时已断网,那么我们将返回已被缓存的离线
    HTML 页面
  3. 但是,如果用户打算导航到另外一个 web
    页面,而此时网络已连接,则能照常浏览页面
admin

网站地图xml地图