行使 Service Worker 做四个 PWA 离线网页应用

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

原版的书文出处:
人人网FED博客   

在上一篇《自家是怎么着让网站用上HTML5
Manifest》介绍了怎么用Manifest做四个离线网页应用,结果被广大网络朋友吐槽说那么些事物已经被deprecated,移出web标准了,将来被ServiceWorker替代了,不管怎么着,Manifest的一部分思想还能借用的。小编又将网站升级到了ServiceWorker,如若是用Chrome等浏览器就用ServiceWorker做离线缓存,若是是Safari浏览器就依旧用Manifest,读者能够打开那一个网站感受一下,断网也是能健康打开。

参考资料
MDN — Service Worker
API
Service Workers: an
Introduction
劳务工作线程生命周期
Service Worker Cookbook(收集了ServiceWorker的有的实施例子)
理解 Service
Workers

你的商行会收益于渐进式网页应用吗?

渐进式网页应用(Progressive Web
Apps,简称PWA)是3个新的定义,它弥合了网站(Website)和平运动动应用(Mobile
App)之间的异样。它们能够保证离线成效的可用性,并且可以晋级速度和属性”。

店铺应用那项技能有不少好处。事实上,渐进式网页应用使谷歌、AliExpress和FlipKart的留存率(retention
rate)和转化率(conversion
rate)升高了一半~100%。下边大家将驾驭到,渐进式网页应用通过结合两地点的优势,如何改革用户体验、抓牢访问者的参预度和增加转化率。

作用:

能够使您的运用先走访当地缓存能源,所以在离线状态时,在没有经过互连网收到到更加多的多少前,还是可以够提供基本的功能。

1. 什么是Service Worker

Service Worker是谷歌(谷歌(Google))发起的达成PWA(Progressive Web
App)的1个关键剧中人物,PWA是为了消除古板Web APP的瑕疵:

(1)没有桌面入口

(2)不能够离线使用

(3)没有Push推送

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

图片 1

ServiceWorker是在后台运营的一条服务Worker线程,上海教室作者开了多少个标签页,所以显得了三个Client,可是不管开几个页面都唯有1个Worker在负责管理。这些Worker的做事是把一部分财富缓存起来,然后拦截页面包车型大巴呼吁,先看下缓存Curry有没有,假使局地话就从缓存里取,响应200,反之没有的话就走正规的央求。具体来说,ServiceWorker结合Web App Manifest能做到以下工作(这也是PWA的检查和测试标准):

图片 2

离线网页应用,Worker做一个离线网页应用。总结能够离线使用、断网时重临200、能唤醒用户把网站添加三个图标到桌面上等。

自身提醒

渐进式网页应用的亮点:

离线情势

给人的感觉是利用,但运维机制是网站

拉长品质

能在设备上火速安装

推送布告 (push notifications)

不用提交到应用软件商店(App Store)

离线模式

网站在好几意况下是有局限性的,在论及到网络连接的时候更是如此;没有网络连接时,网站便是能够突显出来,也十分小概正常运行。另一方面,移动应用普通是自包含的(self-contained),那便于用户离线浏览,从而大大扩充了用户参预度和软件可用性。

那是通过保留访问者已走访过的音信来兑现的。那表示任何时候,即便是不曾连接互连网的时候,访问者都得以访问渐进式网页应用已走访过的页面。

在并未互联网连接的状态下,当用户浏览到从前未访问过的页面时,不是在浏览器中唤醒错误音讯,而是恐怕来得一个定制的离线页面。该页面大概会议及展览示品牌Logo和中坚音信,有时甚至是更上进的意义,意在吸引用户停留在该页面上。

很鲜明,那样做的利益在于扩展了访客留在该网站上的恐怕,而不是敦促用户关闭浏览器,等有了网络连接再持续运用。

那已经化为移动使用急剧增强的第1原因之一,催生了贰个达数十亿日币的正业。但现行反革命渐进式网页应用正通过援救普通网站为富有设备落到实处离线成效,慢慢吞噬这有个别市集。

渐进式网页应用对于有些商业方式恐怕没有财务意义。例如,注重诸如谷歌AdSense等劳务的网站或许不会感兴趣,因为访问者不能在上边点击广告。但电子商务公司综上说述是渐进式网页应用能够发挥所长的平台。

因访问者在离线情势下也能够访问产品目录,那使得公司有大幅度进步他们的客户留存率和参与度的只怕。尤其在那一个按数量使用量来支付互连网支出的国度中,允许用户以离线格局浏览网页,大概对用户来说是个附加的激发:比较别的公司,用户更只怕选拔有渐进式网页应用的商户。

给人的感到是行使,但运营机制是网站

渐进式网页应用的首要卖点在于外观和经验日常会接近于移动使用,让用户在熟练的条件下操作,同时依然有所动态数据和数据库访问的全部网站功效。

就算如此怎么着进行渐进式网页应用的统一筹划和编制程序由各样开发职员自行决定,不过由于移动选拔比网站更能提供优化的用户体验,由此超越1/4人依然会完全使用移动应用的幸存框架和健康理论。

像网站相同,渐进式网页应用能够经过U君越L访问,因而得以经过搜索引擎举办索引。那代表能够在探寻引擎,比如谷歌和Bing上找到该页面。与富有内部数据只好局限于当中访问的运动选拔比较,那是二个高大的优势。

基于项目须求,渐进式网页应用能够设计成与存活的铺面网站或挪动使用完全相同,也得以有意设计成有所不相同以便让用户感知他们正在浏览渐进式网页应用。甚至能够将渐进式网页应用无缝地融为一炉到现有的网站/应用程序的结构和设计中。

感谢2016年7月的Google研究。

在谷歌(Google)进行的一模一样项研讨中,我们发现持有网站访问者中有11.5%承受并下载了对应的渐进式网页应用。那对别的类型的网站的话都以很高的转化率,并且超过超过四分之二电子邮件音信注册和电子商务购买销售的转化率。

重组上述总结数据和承受推送公告的用户数量,大家最后明确转化率在6-7%左右,那对现有网站流量来说照旧是一个摄人心魄的数字。

坚实品质

渐进式网页应用的进程要明了快得多,那要归功于底层技术能够缓存和提供文本、样式表、图片以及Web站点上的此外内容。

那得益于服务工作者(service
worker),它们的运行独立于Web站点,只请求原始数据,而不关乎任何样式或布局信息。

明明,速度的升迁能够革新用户体验和加强留存率。同时,很多告诉展现优化品质也能大大进步转化率,那可从销售角度来说扩张了渐进式网页应用的市场股票总值。

感激二〇一六年13月的谷歌(Google)切磋。(controlled指的是由劳动工我控制页面;supported指的是浏览器帮衬服务工作者,然则服务工小编没有控制页面。)

下边包车型地铁图纸显示了设置服务工作者,并决定页面内容加载之后,能够显明缩水加载时间。

首先个表格呈现的是桌面用户的加载时间。用户选用劳务工小编加载网页的时日与应用浏览器加载缓存内容的日子相比较缩减了29%。

对活动设备而言,质量依旧有远近驰名抓实,即使不及桌面应用,但加载时间或然缩短了22%。

值得注意的是,在三种测试中的第贰行都基于第一次访问的数额,因而不论是不是安装服务工笔者,结果是同样的
。那是因为服务工小编只有在二遍访问时才起成效。

行使前的设置:

Chrome中必要敞开相关配置: 访问
chrome://flags 并开启
experimental-web-platform-features; 重启浏览器
(注意:某天本性在Chrome中并未暗许开放支持);别的,你须求通过 HTTPS
来访问你的页面 — 出于安全原因,Service Workers 供给要在必得在 HTTPS
下才能运营,localhost 也被浏览器认为是安全源。

2. Service Worker的支撑景况

瑟维斯 Worker近日只有Chrome/Firfox/Opera协助:

图片 3

Safari和艾德ge也在预备支持Service Worker,由于ServiceWorker是谷歌主导的一项专业,对于生态相比封闭的Safari来说也是迫于时势发轫准备支持了,在Safari
TP版本,能够看来:

图片 4

在试验作用(Experimental Features)里曾经有ServiceWorker的菜单项了,只是固然打开也是无法用,会提示您还不曾兑现:

图片 5

但不管什么,至少注脚Safari已经准备协助瑟维斯Worker了。别的还足以见到在二零一九年二〇一七年十月发布的Safari
11.0.1版本现已支撑Web汉兰达TC了,所以Safari依然3个发展的孩子。

艾德ge也准备帮忙,所以Service Worker的前景拾分美好。

  1. 接纳范围
    Service Worker由于权力很高,只帮助https协议可能localhost。
    个体会认识为Github
    Pages是叁个极美的练习场馆。
  2. 储备知识
    ServiceWorker大批量使用Promise,不打听的请移步:Javascript:Promise对象基础

能在配备上急迅安装

其余很有趣的一些是在于,当用户访问网站时,一些浏览器会活动提示用户安装渐进式网页应用。那是经过浏览器自个儿所达成的滋生行动(call
to
action)来达成的。那使得渐进式网页应用更可相信,同时增值了它的权威性和可信性。

与运动应用比较,用户安装渐进式网页应用时无需十分短的下载时间。同时,用户不会被转到谷歌Play或App Store,而是径直将应用程序下载到他们的设备上。

那意味着渐进式网页应用就像移动应用相同,在哥哥大和机械电脑上有本身的图标,但无需经历乏味和减缓的采纳公司提交进度。

简言之的例证

那是把express和sw-test不难结合的三个小demo, 项目周转起来访问
http://localhost:3000/sw-test/index.html
,
然后停下此服务仍是能够访问相应财富。Github

3. 使用Service Worker

ServiceWorker的运用套路是首先登场记八个Worker,然后后台就会运转一条线程,能够在那条线程运营的时候去加载一些能源缓存起来,然后监听fetch事件,在那一个事件里拦截页面包车型大巴请求,先看下缓存里有没有,假设有直接再次回到,不然符合规律加载。或然是一开首不缓存,每种能源请求后再拷贝一份缓存起来,然后下二遍呼吁的时候缓存里就有了。

兼容性

推送通知

渐进式网页应用可采纳达成各类设施特定的硬件作用,例如推送公告。软件公布商和开发职员能够完全控制什么落到实处这一个功效,从而为文告新内容提供立异的缓解方案。

对此电子商务网站,这只怕代表2个崭新的销售入口渠道,因为一贯显示在大哥大上的推送通告的读取次数要远远超越电子邮件格局的情报信札以及社交媒体上的情形更新等。

除此以外,安装了渐进式网页应用的用户还足以在其主显示屏上看看图标,那会在用户每一次使用手提式有线电话机时提示她品牌称号和制品。那不仅仅是另一种销售策略,还可拉动难得的品牌意识。不过一旦用户设置许多应用程序和渐进式网页应用,通过推送布告公布新型产品、博客帖子(blog
posts)、小说或别的相关消息, 只怕会导致用户的公告区域一塌糊涂。

感谢2016年7月的Google研究。

在拥有下载渐进式网页应用的用户中,将近60%都给予渐进式网页应用发表推送通告的权杖,
可是还有36.3%的用户并未点开推送布告,大概由于渐进式网页应用的私人住房设置没有接过推送通知。

将此数字与有多少网站访问者从主页上下载渐进式网页应用的计算数据结合起来,大家得以推测大约6-7%的网站存活流量能够转移为接受推送布告的渐进式网页应用用户。

有关代码

  • /public/sw-test/app.js
  1. 第1判断了浏览器是或不是扶助
  2. 调用 register 方法注册 service worker, 第3个参数是运维 service
    worker 的
    js 文件, 首个 scope 参数是选填的,可以被用来钦点你想让 service
    worker 控制的内容的子目录。 在那么些事例,大家内定了 ‘/sw-test/’,即
    http://localhost:3000/sw-test/
    下的请求会被捕获, 被钦点的能源会被缓存。
  3. register 方法再次来到一个 Promise , 实行不易错误处理。

  if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) {
    // registration worked
    console.log('Registration succeeded. Scope is ' + reg.scope);
  }).catch(function(error) {
    // registration failed
    console.log('Registration failed with ' + error);
  });
}
  • /public/sw-test/sw.js
    骨干文件,监听安装事件, 打开缓存 v1 扩充内需缓存能源 request url
    list, 截取被控文件下请求, 若是不设有该缓存则展开缓存处理
  1. 监听了 install 事件, event.waitUntil 首要用在 Install, activate
    事件中,
    在服务工作线程中,延长事件的寿命从而阻碍浏览器在事变中的异步操作完毕在此之前终止劳动工作线程。
  2. Cache 接口提供缓存的
    Request,
    Response
    对象对的存款和储蓄机制,例如作为ServiceWorker生命周期的一部分。
    Cache 接口像 workers 一样, 是暴光在 window
    效率域下的。固然它被定义在 service worker 的业内中,
    可是它不用一定要合营 service worker
    使用.Cache详细API
  3. event.respondWith
    方法意在包裹代码,那一个代码为来自受控页面的request生成自定义的response,查看更多。response.clone()
    创设了二个响应对象的仿造,这几个目的在富有方面都是如出一辙的,可是存款和储蓄在2个不一的变量中。幸免反复运用篡改了对象。

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/sw-test/',
        '/sw-test/index.html',
        '/sw-test/style.css',
        '/sw-test/app.js',
        '/sw-test/image-list.js',
        '/sw-test/star-wars-logo.jpg',
        '/sw-test/gallery/bountyHunters.jpg',
        '/sw-test/gallery/myLittleVader.jpg',
        '/sw-test/gallery/snowTroopers.jpg'
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request).then(function(response) {
    // caches.match() always resolves
    // but in case of success response will have value
    if (response !== undefined) {
      return response;
    } else {
      return fetch(event.request).then(function (response) {
        // response may be used only once
        // we need to save clone to put one copy in cache
        // and serve second one
        let responseClone = response.clone();

        caches.open('v1').then(function (cache) {
          cache.put(event.request, responseClone);
        });
        return response;
      }).catch(function () {
        return caches.match('/sw-test/gallery/myLittleVader.jpg');
      });
    }
  }));
});

(1)注册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完现在注册,注册的时候传1个js文件给它,那个js文件正是ServiceWorker的运作环境,借使不可能打响注册的话就会抛分外,如Safari
TP尽管有这些目的,不过会抛极度无法利用,就足以在catch里面处理。那里有个难题是怎么须求在load事件运转呢?因为你要拾叁分运营3个线程,运转之后您可能还会让它去加载能源,那么些都以内需占用CPU和带宽的,大家应该有限支撑页面能健康加载完,然后再起步大家的后台线程,不可能与正规的页面加载产生竞争,那一个在低端移动设备意义相比较大。

再有少数急需专注的是ServiceWorker和库克ie一样是有Path路径的定义的,假若您设定贰个cookie即便叫time的path=/page/A,在/page/B这些页面是不可能赢得到这一个cookie的,如若设置cookie的path为根目录/,则有所页面都能赢获得。类似地,假若注册的时候利用的js路径为/page/sw.js,那么那么些ServiceWorker只好管理/page路径下的页面和能源,而不可以处理/api路径下的,所以一般把ServiceWorker注册到五星级目录,如下边代码的”/sw-3.js”,那样那个ServiceWorker就能接管页面包车型客车享有财富了。

图片 6

不要提交应用软件集团

乘势需遵从的软禁点不断追加,在谷歌(Google) Play、Windows Phone Apps或Apple App
Store发表应用程序可能是三个干燥和耗费时间的进度。

由此选择渐进式网页应用,开发人士无需等待批准就能够推送新的翻新,并且能在价值观活动应用方今不能落到实处的级别上进展为期更新。

用户重国民党的新生活运动行渐进式网页应用时,系统会自动下载更新。并且,可以经过推送文告,让用户获知应用革新已下载。而且,那无差别不是强制性的,软件发表商能够完全控制将什么内容和音讯推送给用户。

本子更新删除旧缓存

  1. 监听 activate 事件, 如当前版本 v2,删除与如今不匹配缓存数据。

this.addEventListener('activate', function(event) {
  var cacheWhitelist = ['v2'];

  event.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (cacheWhitelist.indexOf(key) === -1) {
          return caches.delete(key);
        }
      }));
    })
  );
});

(2)Service Worker安装和激活

登记完未来,ServiceWorker就会进展设置,这些时候会触发install事件,在install事件之中能够缓存一些能源,如下sw-3.js:

JavaScript

const CACHE_NAME = “fed-cache”; this.add伊芙ntListener(“install”,
function(event) { this.skipWaiting(); console.log(“install service
worker”); // 创造和开拓三个缓存库 caches.open(CACHE_NAME); // 首页 let
cacheResources = [“];
event.waitUntil( // 请求财富并添加到缓存里面去
caches.open(CACHE_NAME).then(cache => {
cache.addAll(cacheResources); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const CACHE_NAME = "fed-cache";
this.addEventListener("install", function(event) {
    this.skipWaiting();
    console.log("install service worker");
    // 创建和打开一个缓存库
    caches.open(CACHE_NAME);
    // 首页
    let cacheResources = ["https://fed.renren.com/?launcher=true"];
    event.waitUntil(
        // 请求资源并添加到缓存里面去
        caches.open(CACHE_NAME).then(cache => {
            cache.addAll(cacheResources);
        })
    );
});

透过下面的操作,创制和添加了3个缓存库叫fed-cache,如下Chrome控制台所示:

图片 7

瑟维斯Worker的API基本上都是回来Promise对象幸免堵塞,所以要用Promise的写法。下边在设置瑟维斯Worker的时候就把首页的央求给缓存起来了。在ServiceWorker的周转条件之中它有3个caches的全局对象,那个是缓存的入口,还有三个常用的clients的大局对象,贰个client对应二个标签页。

在ServiceWorker里面能够应用fetch等API,它和DOM是隔开分离的,没有windows/document对象,不能直接操作DOM,不能直接和页面交互,在ServiceWorker里面不可能获悉当前页面打开了、当前页面包车型客车url是怎么,因为三个ServiceWorker管理当前打开的多少个标签页,能够透过clients知道全部页面的url。还有能够由此postMessage的方式和主页面相互传送音信和多少,进而做些控制。

install完事后,就会触发Service Worker的active事件:

JavaScript

this.addEventListener(“active”, function(event) { console.log(“service
worker is active”); });

1
2
3
this.addEventListener("active", function(event) {
    console.log("service worker is active");
});

ServiceWorker激活之后就可见监听fetch事件了,我们愿意每得到三个能源就把它缓存起来,就毫无像上一篇涉嫌的Manifest要求先生成叁个列表。

你大概会问,当作者刷新页面包车型客车时候不是又再一次注册安装和激活了贰个ServiceWorker?固然又调了3次注册,但并不会再一次登记,它发现”sw-3.js”这么些曾经注册了,就不会再登记了,进而不会触发install和active事件,因为脚下ServiceWorker已经是active状态了。当须要革新ServiceWorker时,如变成”sw-4.js”,也许变更sw-3.js的文本内容,就会另行挂号,新的ServiceWorker会先install然后进入waiting状态,等到重启浏览器时,老的ServiceWorker就会被替换掉,新的ServiceWorker进入active状态,如若不想等到再度启航浏览器能够像下边一样在install里面调skipWaiting:

JavaScript

this.skipWaiting();

1
this.skipWaiting();

Service Worker的包容性

面临的辛劳

缺乏通用援助

以下某些主要音讯须求留意,首尽管无须全部浏览器都协助渐进式网页应用。

GoogleChrome和Opera这四个浏览器对劳务工小编和渐进式网页应用给与了特大的帮忙。

苹果的Safari浏览器最近依然不提供渐进式网页应用支撑,即使有音信说他俩会考虑,但迄今停止从未其余实际的内容公布。

微软代表他们将在二零一六年十月从前在艾德ge上实行渐进式网页应用,但如今依旧没有有关那上边的新闻。

而是,就算不是颇具的浏览器都支持渐进式网页应用,对不包容浏览器的用户也不会造成其余问题,因为那个浏览器只是马虎了渐进式网页应用,照旧能够像从前同样展现网站。

参照 MDN

Service Worker
详细文书档案

(3)fetch资源后cache起来

正如代码,监听fetch事件做些处理:

JavaScript

this.addEventListener(“fetch”, function(event) { event.respondWith(
caches.match(event.request).then(response => { // cache hit if
(response) { return response; } return
util.fetchPut(event.request.clone()); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
this.addEventListener("fetch", function(event) {
    event.respondWith(
        caches.match(event.request).then(response => {
            // cache hit
            if (response) {
                return response;
            }
            return util.fetchPut(event.request.clone());
        })
    );
});

先调caches.match看一下缓存里面是或不是有了,假如有一贯重临缓存里的response,不然的话符合规律请求能源并把它内置cache里面。放在缓存里财富的key值是Request对象,在match的时候,须求请求的url和header都一模一样才是一样的财富,能够设定首个参数ignoreVary:

JavaScript

caches.match(event.request, {ignoreVary: true})

1
caches.match(event.request, {ignoreVary: true})

代表一旦请求url相同就认为是同贰个能源。

下边代码的util.fetchPut是如此实现的:

JavaScript

let util = { fetchPut: function (request, callback) { return
fetch(request).then(response => { // 跨域的能源直接return if
(!response || response.status !== 200 || response.type !== “basic”) {
return response; } util.putCache(request, response.clone()); typeof
callback === “function” && callback(); return response; }); }, putCache:
function (request, resource) { // 后台不要缓存,preview链接也决不缓存 if
(request.method === “GET” && request.url.indexOf(“wp-admin”) < 0 &&
request.url.indexOf(“preview_id”) < 0) {
caches.open(CACHE_NAME).then(cache => { cache.put(request,
resource); }); } } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let util = {
    fetchPut: function (request, callback) {
        return fetch(request).then(response => {
            // 跨域的资源直接return
            if (!response || response.status !== 200 || response.type !== "basic") {
                return response;
            }
            util.putCache(request, response.clone());
            typeof callback === "function" && callback();
            return response;
        });
    },
    putCache: function (request, resource) {
        // 后台不要缓存,preview链接也不要缓存
        if (request.method === "GET" && request.url.indexOf("wp-admin") < 0
              && request.url.indexOf("preview_id") < 0) {
            caches.open(CACHE_NAME).then(cache => {
                cache.put(request, resource);
            });
        }
    }
};

亟需注意的是跨域的财富不能够缓存,response.status会再次来到0,假设跨域的能源支撑COLX570S,那么能够把request的mod改成cors。借使请求战败了,如404要么是晚点等等的,那么也直接重临response让主页面处理,不然的话表明加载成功,把那些response克隆1个停放cache里面,然后再回去response给主页面线程。注意能减缓存里的财富一般只好是GET,通过POST获取的是无法缓存的,所以要做个判断(当然你也足以手动把request对象的method改成get),还有把一部分私有不期望缓存的能源也做个判断。

如此那般如若用户打开过一遍页面,ServiceWorker就安装好了,他刷新页面或然打开首个页面包车型大巴时候就可见把请求的能源一一做缓存,包罗图形、CSS、JS等,只要缓存里有了不管用户在线或许离线都能够健康访问。那样我们当然会有三个标题,那一个缓存空间到底有多大?上一篇我们提到Manifest也终于地点存储,PC端的Chrome是5Mb,其实这么些说法在新本子的Chrome已经不可信赖了,在Chrome
61版本能够观察当地存款和储蓄的上空和采纳情状:

图片 8

其中Cache Storage是指瑟维斯Worker和Manifest占用的长台湾空中大学小和,上海体育场所能够观察总的空间尺寸是20GB,大致是unlimited,所以基本上不用顾虑缓存会不够用。

壹 、 生命周期

村办觉得先知道一下它的生命周期很重庆大学!以前查资料的时候,很多文章一上来就监听install事件、waiting事件、activate事件……反正作者是一脸懵逼。

图片 9

Service Worker的生命周期

不列在应用公司目录中

些微人大概会以为自身的渐进式网页应用尚未列在行使集团中会降低揭露率,但常见情状并非如此。

实则,与运动应用比较,渐进式网页应用能够因而谷歌或任何搜索引擎上搜索到,这与网站类似,而与移动使用有所差异。这表示数十亿的一般搜索或者最后促成搜索到渐进式网页应用。

网站地图xml地图