微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

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

2017-02-19 20:11 伯乐专栏\/庞健

(点击上方公众号,可快速关注)


作者:伯乐在线专栏作者 - pangjian

如有好文章投稿,请点击 → 这里了解详情

如需转载,发送「转载」二字查看说明


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

PWA有以下几种特性:


  • Installablity(可安装性)

  • App Shell

  • Offline(离线能力)

  • Re-engageable(推送通知能力)


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


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


实现思路就是,利用service worker,另起一个线程,用来监听所有网络请求,讲已经请求过的数据放入cache,在断网的情况下,直接取用cache里面的资源。为请求过的页面和图片,展示一个默认值。当有网络的时候,再重新从服务器更新。



代码这里就不贴了,以后可能会专门写一篇来详细介绍Service Worker,有兴趣的可以直接参考源码。

注册起来也非常方便


// 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。


离线有缓存情况



离线无缓存情况


会展示一个默认的页面



-EOF-



看完本文有收获?请转发分享给更多人

关注「前端大全」,提升前端技能



专栏作者简介 ( 点击 → 加入专栏作者 


pangjian:庞健,金融IT男。


 
前端大全 更多文章 Chrome 开发者控制台中,你可能意想不到的功能 不装逼地说,在 Google 到底能学到啥? 不装逼地说,在 Google 到底能学到啥? Chrome 开发者控制台中,你可能意想不到的功能 Chrome 开发者控制台中,你可能意想不到的功能
猜您喜欢 How microservices have changed and why they matter? 有效沟通的重要性:从表象问题过渡到实质问题的手段 聊聊web的底层 使用data URIs 红黑树解法的why而非how