>

动用 Service Worker 做三个 PWA 离线网页应用

- 编辑:乐百家599手机首页 -

动用 Service Worker 做三个 PWA 离线网页应用

渐进式Web应用(PWA)入门教程(下)

2018/05/25 · 根底手艺 · PWA

原来的文章出处: Craig Buckler   译文出处:赐紫英桃城控件   

上篇作品大家对渐进式Web应用(PWA)做了有的中央的介绍。

渐进式Web应用(PWA)入门教程(上)

在此意气风发节中,大家将介绍PWA的法规是哪些,它是哪些带头工作的。

关于PWA

PWA(Progressive Web App), 即渐进式web应用。PWA本质上是web应用,指标是通过多项新技术,在辽源、质量、体验等地点给顾客原生应用的心得。况兼没有必要像原生应用那样繁琐的下载、安装、晋级等操作。

此地解释下概念中的“渐进式”,意思是其大器晚成web应用还在不停地开垦进取中。因为脚下来说,PWA还未成熟到一蹴而就的水平,想在安全、质量、体验上达成原生应用的效用依旧有非常多的晋升空间的。一方面是营造PWA的资金财产问题,另一方面是现阶段各大浏览器、安卓和IOS系统对此PWA的协理和包容性还恐怕有待增加。

本文作者将从网址缓存、http乞求拦截、推送到主屏等功用,结合实例操作,一步步引领咱们相当的慢玩转PWA工夫。

利用 Service Worker 做叁个 PWA 离线网页应用

2017/10/09 · JavaScript · PWA, Service Worker

原稿出处: 人人网FED博客   

在上意气风发篇《自己是怎么样让网站用上HTML5 Manifest》介绍了怎么用Manifest做多个离线网页应用,结果被大面积网上基友作弄说这一个事物已经被deprecated,移出web标准了,现在被瑟维斯Worker代替了,不管怎么,Manifest的有的动脑筋还可以够借用的。小编又将网址晋级到了ServiceWorker,即便是用Chrome等浏览器就用ServiceWorker做离线缓存,如若是Safari浏览器宛还是用Manifest,读者能够张开那么些网址体会一下,断网也是能健康展开。

Service Worker入门

2015/03/26 · JavaScript · Service Worker

原作出处: Matt Gaunt   译文出处:[w3ctech

  • 十年踪迹]()   

原生App具有Web应用日常所不持有的富离线体验,准时的沉默不语更新,消息通知推送等功能。而新的Serviceworkers标准让在Web App上具备这么些功效成为恐怕。

第一步:使用HTTPS

渐进式Web应用程序要求运用HTTPS连接。即使选择HTTPS会让你服务器的费用变多,但运用HTTPS可以让您的网站变得更安全,HTTPS网站在Google上的排行也会更靠前。

出于Chrome浏览器会暗许将localhost以至127.x.x.x地址视为测量试验地方,所以在本示例中你并不供给开启HTTPS。别的,出于调节和测量检验目标,您能够在开行Chrome浏览器的时候利用以下参数来关闭其对网站HTTPS的自己商酌:

  • –user-data-dir
  • –unsafety-treat-insecure-origin-as-secure

Service Worker

ServiceWorker是PWA的宗旨技能,它亦可为web应用提供离线缓存功用,当然不止如此,上边列举了部分ServiceWorker的表征:

依照HTTPS 情形,那是营造PWA的硬性前提。(LAMP景况网址晋级HTTPS应用方案)

是三个单身的 worker 线程,独立于当下网页进程,有和谐独立的 worker context

可阻止HTTP央浼和响应,可缓存文件,缓存的文本可以在网络离线状态时取到

能向客商端推送新闻

不能够平昔操作 DOM

异步完毕,内部大都以透过 Promise 完成

1. 什么是Service Worker

Service Worker是Google发起的兑现PWA(Progressive Web App)的二个重要剧中人物,PWA是为通晓决古板Web APP的症结:

(1)没有桌面入口

(2)不可能离线使用

(3)没有Push推送

那Service Worker的具体表现是什么的啊?如下图所示:

乐百家前段 1

ServiceWorker是在后台运营的一条服务Worker线程,上海教室笔者开了八个标签页,所以彰显了五个Client,但是不管开多少个页面都唯有二个Worker在担任管理。那一个Worker的专门的工作是把某个资源缓存起来,然后拦截页面包车型大巴央浼,先看下缓存Curry有没有,假诺局地话就从缓存里取,响应200,反之没有的话就走日常的乞请。具体来讲,ServiceWorker结合Web App Manifest能成就以下职业(那也是PWA的检验正式):

乐百家前段 2

回顾能够离线使用、断网时再次回到200、能唤醒客商把网址加多二个Logo到桌面上等。

Service Worker 是什么?

多个 service worker 是意气风发段运营在浏览器后台进度里的剧本,它独自于近期页面,提供了那叁个不需求与web页面人机联作的效能在网页背后悄悄实施的手艺。在将来,基于它能够兑现信息推送,静默更新以至地理围栏等劳动,可是近日它首先要具有的作用是阻挡和管理网络须要,包蕴可编制程序的响应缓存管理。

为啥说那一个API是四个非常棒的API呢?因为它使得开采者能够扶植非常好的离线体验,它付与开采者完全调整离线数据的力量。

在service worker提议早前,其它一个提供开拓者离线体验的API叫做App Cache。然则App Cache有些局限性,比方它能够相当的轻易地缓慢解决单页应用的主题材料,不过在多页应用上会很艰难,而Serviceworkers的产出就是为了解决App Cache的痛点。

上面详细说一下service worker有哪些需求专心的位置:

  • 它是JavaScript Worker,所以它不能够直接操作DOM。可是service worker能够透过postMessage与页面之间通讯,把音信布告给页面,假设供给的话,让页面本身去操作DOM。
  • Serviceworker是一个可编制程序的互连网代理,允许开垦者调节页面上管理的网络诉求。
  • 在不被应用的时候,它会协和终止,而当它再也被用到的时候,会被重新激活,所以你无法依靠于service worker的onfecth和onmessage的管理函数中的全局状态。借使您想要保存一些长久化的新闻,你可以在service worker里使用IndexedDB API。
  • Serviceworker大量使用promise,所以若是你不精通什么是promise,那您须要先读书这篇文章。

第二步:创立一个应用程序事项清单(Manifest)

应用程序清单提供了和当前渐进式Web应用的有关新闻,如:

  • 应用程序名
  • 描述
  • 有着图片(满含主显示器Logo,运转显示屏页面和用的图片恐怕网页上用的图纸)

本质上讲,程序事项清单是页面上用到的Logo和主旨等能源的元数据。

程序清单是叁个坐落您使用根目录的JSON文件。该JSON文件再次来到时必得抬高Content-Type: application/manifest json 或者 Content-Type: application/jsonHTTP头消息。程序项目清单的文本名不限,在本文的演示代码中为manifest.json

{ "name" : "PWA Website", "short_name" : "PWA", "description" : "An example PWA website", "start_url" : "/", "display" : "standalone", "orientation" : "any", "background_color" : "#ACE", "theme_color" : "#ACE", "icons": [ { "src" : "/images/logo/logo072.png", "sizes" : "72x72", "type" : "image/png" }, { "src" : "/images/logo/logo152.png", "sizes" : "152x152", "type" : "image/png" }, { "src" : "/images/logo/logo192.png", "sizes" : "192x192", "type" : "image/png" }, { "src" : "/images/logo/logo256.png", "sizes" : "256x256", "type" : "image/png" }, { "src" : "/images/logo/logo512.png", "sizes" : "512x512", "type" : "image/png" } ] }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{
  "name"              : "PWA Website",
  "short_name"        : "PWA",
  "description"       : "An example PWA website",
  "start_url"         : "/",
  "display"           : "standalone",
  "orientation"       : "any",
  "background_color"  : "#ACE",
  "theme_color"       : "#ACE",
  "icons": [
    {
      "src"           : "/images/logo/logo072.png",
      "sizes"         : "72x72",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo152.png",
      "sizes"         : "152x152",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo192.png",
      "sizes"         : "192x192",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo256.png",
      "sizes"         : "256x256",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo512.png",
      "sizes"         : "512x512",
      "type"          : "image/png"
    }
  ]
}

程序项目清单文件创设完之后,你必要在每一个页面上引用该公文:

<link rel="manifest" href="/manifest.json">

1
<link rel="manifest" href="/manifest.json">

以下属性在程序项目清单中时时利用,介绍表达如下:

  • name: 客商见到的运用名称
  • short_name: 应用短名称。当呈现应用名称的地点非常不足时,将运用该名称。
  • description: 乐百家前段,接纳描述。
  • start_url: 行使开首路线,相对路线,默以为/。
  • scope: UEvoqueL范围。举例:假如您将“/app/”设置为U翼虎L范围时,那些应用就能够平昔在这里个目录中。
  • background_color: 接待页面包车型大巴背景颜色和浏览器的背景颜色(可选)
  • theme_color: 利用的大旨颜色,日常都会和背景颜色同样。这么些设置决定了应用怎么着显示。
  • orientation: 先行旋转方向,可选的值有:any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, and portrait-secondary
  • display: 彰显格局——fullscreen(无Chrome),standalone(和原生应用相符),minimal-ui(最小的豆蔻梢头套UI控件集)只怕browser(最古老的利用浏览器标签展现)
  • icons: 一个暗含全部图片的数组。该数组中每一个成分包蕴了图片的U凯雷德L,大小和种类。

Service Worker生命周期

serviceworker的运用流程能够简轻易单总计为注册--安装--激活。

注册其实正是告诉浏览器serviceworkerJS文件贮存在哪些岗位,然后浏览器下载、拆解解析、实行该文件,进而运行安装。这里笔者创立二个app.js文件,注册代码如下,将该文件在网址的head标签里引进。

if ('serviceWorker' in navigator) {

window.addEventListener('load', function () {

navigator.serviceWorker.register

.then(function (registration) {

// 注册成功

console.log('ServiceWorker registration successful with scope: ', registration.scope);

})

.catch(function {

// 注册退步:(

console.log('ServiceWorker registration failed: ', err);

});

});

}

当实践serviceworkerJS文件时,首先触及的是install事件,举行安装。安装的历程正是将点名的有些静态财富开展离线缓存。下边是自身的sw.js文件中的安装代码:

var CACHE_VERSION = 'sw_v8';

var CACHE_FILES = [

'/js/jquery/min.js',

'/js/zui/min.js',

'/js/chanzhi.js',

];

self.addEventListener('install', function {

event.waitUntil(

caches.open(CACHE_VERSION)

.then(cache => cache.addAll(CACHE_FILES)

));

});

当安装成功后,serviceworker就能够激活,这时候就能够管理 activate 事件回调 (提供了更新缓存攻略的机缘卡塔尔国。并得以管理功能性的事件 fetch 、sync 、push 。

self.addEventListener('activate', function {

event.waitUntil(

caches.keys().then(function{

return Promise.all(keys.map(function{

if(key !== CACHE_VERSION){

return caches.delete;

}

}));

})

);

});

2. Service Worker的支撑意况

Service Worker如今唯有Chrome/Firfox/Opera援助:

乐百家前段 3

Safari和艾德ge也在预备辅助Service Worker,由于ServiceWorker是谷歌(Google卡塔尔国主导的生龙活虎项专门的学业,对于生态比较密封的Safari来讲也是迫于时局起头准备帮助了,在Safari TP版本,能够看看:

乐百家前段 4

在尝试功用(Experimental Features)里早就有ServiceWorker的菜单项了,只是纵然张开也是无法用,会唤醒您还还未兑现:

乐百家前段 5

但不管什么,最少表明Safari已经策画协助ServiceWorker了。其它还是能够见到在今年前年五月发布的Safari 11.0.1本子现已支撑WebRTC了,所以Safari照旧二个升华的子女。

Edge也思考援助,所以瑟维斯 Worker的前程非常美好。

Service Worker的生命周期

Service worker具备七个通通独立于Web页面包车型的士生命周期。

要让三个service worker在您的网址上生效,你须要先在你的网页中登记它。注册四个service worker之后,浏览器会在后台默默运转二个service worker的装置进程。

在安装进程中,浏览器会加载并缓存一些静态能源。假如持有的公文被缓存成功,service worker就安装成功了。要是有别的公文加载或缓存失利,那么安装进度就能够战败,service worker就不可能被激活(也即未能安装成功)。如若爆发那样的主题素材,别牵记,它会在后一次再品尝安装。

当安装到位后,service worker的下一步是激活,在此朝气蓬勃品级,你还足以荣升叁个service worker的本子,具体内容大家会在前边讲到。

在激活之后,service worker将接管全体在团结管辖域范围内的页面,不过借使二个页面是刚刚注册了service worker,那么它那贰次不会被接管,到下一遍加载页面包车型地铁时候,service worker才会生效。

当service worker接管了页面之后,它或然有二种状态:要么被结束以节外省存,要么会管理fetch和message事件,那五个事件分别发生于三个网络乞求现身依旧页面上发送了二个新闻。

下图是三个简化了的service worker初次安装的生命周期:

乐百家前段 6

其三步:创设叁个 Service Worker

Service Worker 是多少个可编制程序的服务器代理,它能够阻挡或许响应网络央求。瑟维斯 Worker 是放在应用程序根目录的一个个的JavaScript文件。

您需求在页直面应的JavaScript文件中登记该ServiceWorker:

if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('/service-worker.js'); }

1
2
3
4
if ('serviceWorker' in navigator) {
  // register service worker
  navigator.serviceWorker.register('/service-worker.js');
}

设若您无需离线的相干效用,您能够只开创多个 /service-worker.js文本,那样客商就能够直接设置您的Web应用了!

ServiceWorker这一个概念恐怕相比较难懂,它实际上是三个做事在别的线程中的标准的Worker,它不得以访问页面上的DOM成分,没有页面上的API,可是能够阻挡全体页面上的网络央求,满含页面导航,哀告财富,Ajax诉求。

地方正是使用全站HTTPS的机要原因了。假令你未有在你的网址中应用HTTPS,七个第三方的脚本就能够从其余的域名注入他自身的ServiceWorker,然后窜改全体的伸手——那确实是特别危殆的。

Service Worker 会响应五个事件:install,activate和fetch。

serviceworker的缓存功效

设置时,serviceworker将我们钦点的静态能源进行缓存,你可能会问,假如是实时的动态内容如何是好,大家不容许预先将有所的文本财富提前线指挥部定好,让serviceworker缓存。那就要涉及serviceworker的掣肘HTTP乞请响应的表征了。

serviceworker拦截http乞求,首先去反省诉求的财富在缓存中是不是留存,如若存在,则直接从缓存中调用,并且固然是无网络状态下,serviceworker也能调用缓存中的财富。假如缓存中从不央浼的财富,则通过互连网去服务器上探究,何况在找到并响适时,serviceworker会将其存入缓存中,以备后一次再诉求时平素从缓存中调用。

乐百家前段 7serviceworker缓存流程

serviceworker文件中fetch事件代码如下:

self.addEventListener('fetch', function {

event.respondWith(

caches.match(event.request).then(function{

if{

return response;

}

var requestToCache = event.request.clone();

return fetch(requestToCache).then(

function{

if(!response || response.status !== 200){

return response;

}

var responseToCache = response.clone();

caches.open(CACHE_VERSION)

.then(function{

cache.put(requestToCache, responseToCache);

});

return response;

}

);

})

);

});

在网站前台通过浏览器开辟者工具,大家得以看下从缓存中调用财富的效应:

乐百家前段 8serviceworker缓存调用乐百家前段 9缓存文件

作者那边操作演示用的是谷歌(Google卡塔尔(英语:State of Qatar)浏览器,上边是各大浏览器对于serviceworker的支撑情状:

乐百家前段 10serviceworker浏览器扶持意况

3. 使用Service Worker

ServiceWorker的接受套路是先注册一个Worker,然后后台就能运行一条线程,能够在这里条线程运维的时候去加载一些能源缓存起来,然后监听fetch事件,在这里个事件里拦截页面包车型地铁伸手,先看下缓存里有未有,假若有直接再次回到,否则平常加载。或然是一初步不缓存,各种财富央浼后再拷贝风流浪漫份缓存起来,然后下二回呼吁的时候缓存里就有了。

在我们开首写码此前

从这个项目地址拿到chaches polyfill。

这个polyfill支持CacheStorate.match,Cache.add和Cache.addAll,而现在Chrome M40实现的Cache API还从未协助那么些措施。

将dist/serviceworker-cache-polyfill.js放到你的网站中,在service worker中经过importScripts加载进来。被service worker加载的本子文件会被自动缓存。

JavaScript

importScripts('serviceworker-cache-polyfill.js');

1
importScripts('serviceworker-cache-polyfill.js');

需要HTTPS

在开拓阶段,你能够由此localhost使用service worker,可是假若上线,就必要你的server支持HTTPS。

你可以透过service worker抑遏连接,杜撰和过滤响应,非常逆天。纵然你能够节制本身不干坏事,也是有人想干坏事。所以为了避防万风流倜傥外人使坏,你只可以在HTTPS的网页上登记service workers,那样大家才方可防卫加载service worker的时候不被歹徒窜改。(因为service worker权限比一点都不小,所以要幸免它本身被歹徒窜改利用——译者注)

Github Pages正巧是HTTPS的,所以它是二个能够的资质实验田。

例如你想要让你的server支持HTTPS,你要求为您的server获得二个TLS证书。不一致的server安装方法差异,阅读辅助文书档案并经过Mozilla’s SSL config generator问询最棒实行。

Install事件

该事件将要利用设置达成后触发。大家日常在这边运用Cache API缓存一些必备的文本。

首先,大家须求提供如下配置

  1. 缓存名称(CACHE)以至版本(version)。应用能够有多少个缓存存储,可是在选取时只会动用个中一个缓存存款和储蓄。每当缓存存款和储蓄有转移时,新的版本号将会钦定到缓存存款和储蓄中。新的缓存存款和储蓄将会作为当前的缓存存款和储蓄,在此以前的缓存存款和储蓄将会被作废。
  2. 三个离线的页面地址(offlineUWranglerL):当客户访谈了事情发生前从未访谈过的地址时,该页面将会显得。
  3. 一个包蕴了有着必需文件的数组,满含保持页面不奇怪机能的CSS和JavaScript。在本示例中,作者还加多了主页和logo。当有差异的UEvoqueL指向同壹个能源时,你也得以将那个U牧马人L分别写到那些数组中。offlineU奥迪Q5L将会投入到那个数组中。
  4. 我们也得以将部分非必要的缓存文件(installFilesDesirable)。那一个文件在设置进程元帅会被下载,但如若下载战败,不会触发安装战败。

// 配置文件 const version = '1.0.0', CACHE = version '::PWAsite', offlineUSportageL = '/offline/', installFilesEssential = [ '/', '/manifest.json', '/css/styles.css', '/js/main.js', '/js/offlinepage.js', '/images/logo/logo152.png' ].concat(offlineURL), installFilesDesirable = [ '/favicon.ico', '/images/logo/logo016.png', '/images/hero/power-pv.jpg', '/images/hero/power-lo.jpg', '/images/hero/power-hi.jpg' ];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 配置文件
const
  version = '1.0.0',
  CACHE = version '::PWAsite',
  offlineURL = '/offline/',
  installFilesEssential = [
    '/',
    '/manifest.json',
    '/css/styles.css',
    '/js/main.js',
    '/js/offlinepage.js',
    '/images/logo/logo152.png'
  ].concat(offlineURL),
  installFilesDesirable = [
    '/favicon.ico',
    '/images/logo/logo016.png',
    '/images/hero/power-pv.jpg',
    '/images/hero/power-lo.jpg',
    '/images/hero/power-hi.jpg'
  ];

installStaticFiles() 方法运用基于Promise的艺术接收Cache API将文件存款和储蓄到缓存中。

// 安装静态财富 function installStaticFiles(卡塔尔(قطر‎ { return caches.open(CACHE卡塔尔国 .then(cache => { // 缓存可选文件 cache.addAll(installFilesDesirable卡塔尔(قطر‎; // 缓存必需文件 return cache.addAll(installFilesEssential卡塔尔(قطر‎; }卡塔尔国; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 安装静态资源
function installStaticFiles() {
  return caches.open(CACHE)
    .then(cache => {
      // 缓存可选文件
      cache.addAll(installFilesDesirable);
      // 缓存必须文件
      return cache.addAll(installFilesEssential);
    });
}

终极,大家加多贰个install的事件监听器。waitUntil方法保障了service worker不会安装直到其辅车相依的代码被施行。这里它会实行installStaticFiles()方法,然后self.skipWaiting()措施来激活service worker:

// 应用设置 self.add伊芙ntListener('install', event => { console.log('service worker: install'卡塔尔(قطر‎; // 缓存重要文件 event.waitUntil( installStaticFiles(卡塔尔 .then((卡塔尔(英语:State of Qatar) => self.skipWaiting(卡塔尔(قطر‎卡塔尔(قطر‎ 卡塔尔(قطر‎; }卡塔尔(قطر‎;

1
2
3
4
5
6
7
8
9
10
11
12
// 应用安装
self.addEventListener('install', event => {
  console.log('service worker: install');
  // 缓存主要文件
  event.waitUntil(
    installStaticFiles()
    .then(() => self.skipWaiting())
  );
});

丰裕到主屏

PWA协助将web应用在主屏桌面上加多二个火速方式,以有帮忙顾客急忙访谈,同一时间进级web应用重复访谈的可能率。你或许会说,将来活动端上的浏览器功效列表里常常都提供了“增加到桌面”的效劳呀,然而PWA与浏览器自带的丰裕到桌面包车型地铁兑现格局各异。

PWA没有必要顾客特意去成效列表中使用那一个效果按钮,而是在顾客访谈web应用时,直接在分界面中晋升多少个丰富到主屏桌面包车型大巴横幅,从web应用角度来讲,那其实正是积极与丧丧的区分。

PWA完毕该功用特别简单,只必要二个manifest.json文件,文件中客商可以自定义应用的运转页面、模板颜色、Logo等剧情。上边是自己的manifest.json文件设置,大家可作参考:

{

"short_name": "蝉知能源站",

"name": "蝉知能源站",

"icons": [

{

"src": "chanzhiicon.png",

"type": "image/png",

"sizes": "48x48"

},

{

"src": "192.png",

"type": "image/png",

"sizes": "192x192"

},

{

"src": "512.png",

"type": "image/png",

"sizes": "512x512"

},

{

"src": "144.png",

"type": "image/png",

"sizes": "144x144"

}

],

"start_url": "/index.html",

"display": "standalone",

"background_color": "#2196F3",

"orientation": "landscape",

"theme_color": "#2196F3"

}

要求提示的是,近日移动端IOS系统的扶助并倒霉,安卓手提式有线电话机上须动用57本子以上的Google浏览器能够支撑该效能,下边是自身在安卓手提式有线电电话机上的操作演示:

乐百家前段 11足够到主屏

(1)注册二个Service Worker

Service Worker对象是在window.navigator里面,如下代码:

JavaScript

window.addEventListener("load", function() { console.log("Will the service worker register?"); navigator.serviceWorker.register('/sw-3.js') .then(function(reg){ console.log("Yes, it did."); }).catch(function(err) { console.log("No it didn't. This happened: ", err) }); });

1
2
3
4
5
6
7
8
9
window.addEventListener("load", function() {
    console.log("Will the service worker register?");
    navigator.serviceWorker.register('/sw-3.js')
    .then(function(reg){
        console.log("Yes, it did.");
    }).catch(function(err) {
        console.log("No it didn't. This happened: ", err)
    });
});

在页面load完之后注册,注册的时候传八个js文件给它,那么些js文件正是ServiceWorker的运营境况,若是不能够打响注册的话就能够抛极度,如Safari TP即使有其一指标,不过会抛格外不能使用,就能够在catch里面管理。这里有个难点是怎么供给在load事件运维呢?因为你要万分运转三个线程,运转之后您恐怕还有只怕会让它去加载财富,这一个都以亟需占用CPU和带宽的,大家相应保险页面能经常加载完,然后再开发银行我们的后台线程,不能够与常规的页面加载发生角逐,这些在低档移动设备意义非常大。

还会有有个别亟需小心的是瑟维斯Worker和Cookie相仿是有Path路径的概念的,要是您设定叁个cookie借使叫time的path=/page/A,在/page/B这一个页面是不可以预知拿走到那个cookie的,借使设置cookie的path为根目录/,则持有页面都能博得到。肖似地,如若注册的时候使用的js路径为/page/sw.js,那么那一个ServiceWorker只可以管理/page路线下的页面和能源,而不可见管理/api路线下的,所以平时把ServiceWorker注册到五星级目录,如下边代码的”/sw-3.js”,那样这几个ServiceWorker就会接管页面的具有能源了。

使用Service Worker

明日我们有了polyfill,何况解决了HTTPS,让我们看见到底怎么用service worker。

本文由乐百家前段发布,转载请注明来源:动用 Service Worker 做三个 PWA 离线网页应用