正规网赌平台利用 Service worker 创建一个非常简单的离线页面

迈向PWA!利用serviceworker的离线访问模式

2017/02/08 · JavaScript
· PWA

本文作者: 伯乐在线
pangjian
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者

微信小程序来了,可以利用WEB技术在微信打造一个有着Native应用体验的应用,业界非常看好这种形式。但是你们也许不知道,Google早已有类似的规划,甚至层次更高。那就是PWA(渐进式增强WEB应用)。
PWA有以下几种特性:

  • Installablity(可安装性)
  • App Shell
  • Offline(离线能力)
  • Re-engageable(推送通知能力)

所有这些特性都是“优雅降级、渐进增强的”,给支持的设备更好的体验,不支持的设备也不会更差。这就和微信小程序这种二流设计的根本不同之处。

本博客也在向着PWA的方向迈进,第一步我选择了Offline,也就是离线能力。可以让客户在没有网络连接的时候仍然可以使用部分服务。这个能力利用了Service
Worker技术。

实现思路就是,利用service
worker,另起一个线程,用来监听所有网络请求,讲已经请求过的数据放入cache,在断网的情况下,直接取用cache里面的资源。为请求过的页面和图片,展示一个默认值。当有网络的时候,再重新从服务器更新。
正规网赌平台 1
代码这里就不贴了,以后可能会专门写一篇来详细介绍Service
Worker,有兴趣的可以直接参考源码
注册起来也非常方便

JavaScript

// ServiceWorker_js (function() { ‘use strict’;
navigator.serviceWorker.register(‘/sw.js’, {scope:
‘/’}).then(function(registration) { // Registration was successful
console.log(‘ServiceWorker registration successful with scope: ‘,
registration.scope); }).catch(function(err) { // registration failed 🙁
console.log(‘ServiceWorker registration failed: ‘, err); }); })();

1
2
3
4
5
6
7
8
9
10
11
12
// ServiceWorker_js
(function() {
    ‘use strict’;
    navigator.serviceWorker.register(‘/sw.js’, {scope: ‘/’}).then(function(registration) {
      // Registration was successful
      console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope);
    }).catch(function(err) {
      // registration failed 🙁
      console.log(‘ServiceWorker registration failed: ‘, err);
    });
 
})();

这里需要注意的是,sw.js所在的目录要高于它的控制范围,也就是scope。我把sw.js放在了根目录来控制整个目录。

接下来看看我们的最终效果吧,你也可以在自己的浏览器下断网尝试一下。当然有部分浏览器目前还不支持,比如大名鼎鼎的Safari。

拓展阅读

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

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

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


打赏译者

关于作者:pangjian

正规网赌平台 2

庞健,金融IT男。
个人主页
·
我的文章
·
5
·
  

正规网赌平台 3

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

任选一种支付方式

正规网赌平台 4
正规网赌平台 5

1 赞 3 收藏 1
评论

离线有缓存情况

正规网赌平台 6

关于作者:刘健超-J.c

正规网赌平台 7

前端,在路上…http://jchehe.github.io
个人主页
·
我的文章
·
19
·
    

正规网赌平台 8

相关文章