当前位置:3016.com-金沙城中心官网 > 前端 > 迈向PWA!利用serviceworker的离线访问模式

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

文章作者:前端 上传时间:2019-10-11

迈向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

本文由3016.com-金沙城中心官网发布于前端,转载请注明出处:迈向PWA!利用serviceworker的离线访问模式

关键词: