禁止转载
分类:彩世界官方下载-Web前端

迈向PWA!利用serviceworker的离线访谈格局

2017/02/08 · JavaScript · PWA

本文小编: 伯乐在线 - pangjian 。未经我许可,禁止转发!
接待插足伯乐在线 专辑小编。

微信小程序来了,能够行使WEB技术在微信创设两个负有Native应用经验的行使,业界非常看好这种样式。不过你们可能不通晓,Google早就有近似的图谋,乃至档次更加高。那正是PWA(渐进式巩固WEB应用)。
PWA有以下三种特色:

  • Installablity(可安装性)
  • App Shell
  • Offline(离线手艺)
  • Re-engageable(推送布告技艺)

享有这个特色都以“高雅降级、渐进巩固的”,给扶助的装置越来越好的体验,不帮助的配备也不会更差。那就和微信小程序这种不良设计的有史以来分裂之处。

本博客也在向着PWA的样子迈进,第一步小编选取了Offline,也便是离线技艺。能够让顾客在未有网络连接的时候还能利用部分服务。那么些技能采用了ServiceWorker工夫。

贯彻思路正是,利用service worker,另起四个线程,用来监听全部互联网必要,讲曾经呼吁过的数量放入cache,在断网的意况下,直接取用cache里面包车型地铁财富。为呼吁过的页面和图片,显示二个私下认可值。当有网络的时候,再另行从服务器更新。
图片 1
代码这里就不贴了,今后恐怕会特意写一篇来详细介绍ServiceWorker,有野趣的能够直接参照他事他说加以考察源码。
挂号起来也不行有帮助

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。

离线有缓存情状

图片 2

离线无缓存情形

会展示贰个暗中同意的页面

图片 3

-EOF-

打赏援救本身写出越多好作品,多谢!

打赏我

打赏协助本身写出越来越多好小说,多谢!

任选一种支付情势

图片 4 图片 5

1 赞 1 收藏 评论

有关作者:pangjian

图片 6

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

图片 7

本文由彩世界开奖发布于彩世界官方下载-Web前端,转载请注明出处:禁止转载

上一篇:Vim常用插件——前端开发工具系列 下一篇:没有了
猜你喜欢
热门排行
精彩图文