澳门在线威尼斯官方 > 威尼斯澳门在线 > 创办三个非常轻易的离线页面,利用serviceworker的

原标题:创办三个非常轻易的离线页面,利用serviceworker的

浏览次数:137 时间:2019-09-15

离线有缓存景况

威尼斯澳门在线 1

打赏支持自身翻译更加多好小说,多谢!

任选一种支付办法

威尼斯澳门在线 2 威尼斯澳门在线 3

1 赞 3 收藏 1 评论

迈向PWA!利用serviceworker的离线访谈方式

2017/02/08 · JavaScript · PWA

本文小编: 伯乐在线 - pangjian 。未经小编许可,禁止转发!
款待参与伯乐在线 专栏撰稿人。

微信小程序来了,可以利用WEB本事在微信构建三个具有Native应用体验的接纳,产业界非常看好这种格局。但是你们或然不掌握,谷歌早就有接近的设计,以致档次更加高。那就是PWA(渐进式巩固WEB应用)。
PWA有以下三种特色:

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

具备这几个特征都以“优雅降级、渐进巩固的”,给帮衬的配备更加好的体会,不援助的器械也不会更差。那就和微信小程序这种不良设计的有史以来差别之处。

本博客也在向着PWA的自由化迈进,第一步作者选拔了Offline,也正是离线技艺。能够让顾客在未曾网络连接的时候仍旧能够动用部分服务。这一个力量使用了ServiceWorker本事。

落实思路正是,利用service worker,另起一个线程,用来监听全体互联网央求,讲曾经呼吁过的数码放入cache,在断网的情事下,直接取用cache里面包车型大巴能源。为呼吁过的页面和图片,呈现一个暗中认可值。当有网络的时候,再重复从服务器更新。
威尼斯澳门在线 4
代码这里就不贴了,未来恐怕会特地写一篇来详细介绍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。

拓宽阅读

除此以外,还大概有多少个很棒的离线功效案例。如:Guardian 营造了四个持有 crossword puzzle(填字游戏)的离线 web 页面 – 由此,就算等待互联网重连时(即已在离线状态下),也能找到一点乐趣。我也推荐看看 Google Chrome Github repo,它含有了无数不一的 Service Worker 案例 – 其中有的利用案例也在那!

而是,假如您想跳过上述代码,只是想大约地经过一个库来拍卖相关操作,那么小编引入您看看 UpUp。那是二个轻量的脚本,能让您更自在地选取离线功用。

打赏支持自个儿翻译更加多好小说,多谢!

打赏译者

有关作者:pangjian

威尼斯澳门在线 5

威尼斯澳门在线 , 庞健,金融IT男。 个人主页 · 作者的篇章 · 5 ·   

威尼斯澳门在线 6

选择 Service worker 创造三个特别轻易的离线页面

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

本文由 伯乐在线 - 刘健超-J.c 翻译,艾凌风 校稿。未经许可,禁止转发!
罗马尼亚(România)语出处:Dean Hume。应接参加翻译组。

让大家想像以下场景:大家那时候在一辆通往农村的轻轨的里面,用运动器材看着一篇很棒的稿子。与此同一时间,当你点击“查看越来越多”的链接时,火车猛然步向了隧道,导致运动器材失去了互连网,而 web 页面会呈现出类似以下的原委:

威尼斯澳门在线 7

那是一对一令人寒心的感受!幸运的是,web 开荒者们能通过有个别新特征来创新那类的用户体验。小编多年来一贯在折腾 ServiceWorkers,它给 web 带来的数不尽大概性总能给自个儿快乐。Service Workers 的优质特质之一是同意你检验网络供给的场景,并让你作出相应的响应。

在那篇文章里,作者盘算用此性子检查客户的脚下网络连接情况,假使没连接则赶回一个一流轻巧的离线页面。尽管那是叁个丰硕基础的案例,但它能给您带来启迪,让您精通运维并运维该特性是何其的总结!若是您没了然过 Service Worker,我建议你看看此 Github repo,领悟越多相关的音信。

在此案例早先前,让大家先轻松地拜候它的专门的学业流程:

  1. 在客商第二回访问我们的页面时,大家会安装 ServiceWorker,并向浏览器的缓存加多大家的离线 HTML 页面
  2. 下一场,假使客商打算导航到另三个 web 页面(同贰个网址下),但此时已断网,那么大家将回来已被缓存的离线 HTML 页面
  3. 不过,即便顾客盘算导航到其它叁个 web 页面,而此时互联网已连接,则能照常浏览页面

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:创办三个非常轻易的离线页面,利用serviceworker的

关键词:

上一篇:没有了

下一篇:威尼斯澳门在线:pwa重构巴黎地铁线路图,浅谈