位置:51电子网 » 电子资讯 » 行业动态

Service Worker现状特征与实践

发布时间:2019/4/1 10:18:39 访问次数:18451



fr70k05_18


高浪涌能力do-5封装

不具有esd敏感性

51电子网公益库存:
LP3203ADJ
LP3204
LP3204-18B5F
LP3300B5F
LP3300B6F
LP3302
MB85RC64VPNF-G-JNERE1
MB87J4030
MB87L2030
MBR5H100MFST1G
MC100LVEL58DR2
MC10H210M
MC14081BDR2
MC3630
LTM8048EY#PBF
M24C16-WMN3TP/S
M24C16-WMN6TP
M25PE16-VMW6TG
M25PE20-VMN6TP
M29W640GB70NA6

电压vrrm 800 v.

rms反向电压vrms 560 v.

直流阻断电压vdc 800 v.

连续正向电流if 70 a.

工作温度tj -55至150°c

储存温度tstg -55至150°c

参数符号fr70k(r)05单位

二极管正向电压1.0

25μa

15毫安



http://gll.51dzw.com/





service worker基本特征无法操作dom只能使用https以及localhost可以拦截全站请求从而控制你的应用与主线程独立不会被阻塞(不要再应用加载时注册sw)完全异步,无法使用xhr和localstorage一旦被 install,就永远存在,除非被 uninstall或者dev模式手动删除独立上下文响应推送后台同步。。。service worker是事件驱动的worker,生命周期与页面无关。 关联页面未关闭时,它也可以退出,没有关联页面时,它也可以启动。




dedicated worker以及shared worker与service worker三者非常重要的区别在于不同的生命周期。对于service worker来说文档无关的生命周期,是它能提供可靠web服务的一个重要基础。

service worker库谷歌在早期有两个pwa的轮子:sw-precachesw-toolbox都有对应的webpack插件,但是请注意,这两个从2016年开始已经不在维护了,因为有了更好的,google官方也推荐大家使用workbox,百度的lavas现在也是在使用该轮子。


另外还有同时支持appcache的 nekr/offline-plugin。

service worker的更新用户首次访问sw控制的网站或页面时,sw会立刻被下载。

之后至少每24小时它会被下载一次。它可能被更频繁地下载,不过每24小时一定会被下载一次,以避免不良脚本长时间生效,这个是浏览器自己的行为。

浏览器会将每一次下载回来的sw与现有的sw进行逐字节的对比,一旦发现不同就会进行安装。但是此时已经处于激活状态的旧的 sw还在运行,新的 sw 完成安装后会进入 waiting 状态。直到所有已打开的页面都关闭,旧的sw自动停止,新的sw才会在接下来重新打开的页面里生效。

在 sw 中的更新可以分为两种,基本静态资源的更新和sw.js 文件自身的更新。但是不管是哪种更新,你都必须要对sw文件进行改动,也就是说要重新安装一个新的sw。

首先假设一种情况,站点现有的sw缓存使用v1来进行命名,即在install的时候,我们使用caches.open('v1')来进行预缓存,这时候旧的资源会全部存在caches里的v1下。

self.addeventlistener('install', function

e.waituntil

caches.open('v1').then(function(cache)

return cache.addall

"index.html"

http://tx168.51dzw.com




现在站点更新了,我们可以简单的把chache里的v1改名为v2,这个时候由于我们修改了sw文件,浏览器会自发的更新sw.js文件并触发install事件去下载最新的文件(更新缓存可以发生在任何地方),这时新的站点会存在于v2缓存下,待到新的sw被激活之后,就会启用v2缓存。

这是一种很简单并且安全的方式,相当于旧版本的自然淘汰,但毕竟关闭所有页面是用户的选择而不是程序员能控制的。另外我们还需注意一点:由于浏览器的内部实现原理,当页面切换或者自身刷新时,浏览器是等到新的页面完成渲染之后再销毁旧的页面。这表示新旧两个页面中间有共同存在的交叉时间,因此简单的切换页面或者刷新是不能使得sw进行更新的,老的sw依然接管页面,新的sw依然在等待。也就是说,即使用户 fr70k05_18知道你的站点更新了,用户自行在浏览器端做f5操作,这时,由于旧的sw还未死亡,所以用户看到的还是旧版本的页面。那么我们如何能让新的sw尽快接管页面呢?

那就是在sw内部使用 self.skipwaiting() 方法。

self.addeventlistener('install', function(e)

e.waituntil

caches.open(cachestoragekey).then(function(cache)

return cache.addall(cachelist)

.then(function()

注册成功跳过等待,酌情处理

return self.skipwaiting()


http://taixin168.51dzw.com/

但是很明显,同一个页面,前半部分的请求是由旧的sw控制,而后半部分是由新的sw控制。这两者的不一致性很容易导致问题,除非你能保证同一个页面在两个版本的sw相继处理的情况下依然能够正常工作,才能够这样做。

也就是说,我们最好能够保证页面从头到尾都是由一个sw来处理的,其实也很简单:

navigator.serviceworker.addeventlistener('controllerchange', () =>

window.location.reload;


我们可以在注册sw的地方监听 controllerchange 事件来得知控制当前页面的sw是否发生了改变,然后刷新站点,让自己从头到尾都被新的sw控制,就能避免sw新旧交替的问题了。但是sw的变更就发生在加载页面后的几秒内,用户刚打开站点就遇上了莫名的刷新,如果你不想被用户拍砖的话我们再来考虑考虑更好的方式。

毫无征兆的刷新页面的确不可接受,让我们来看看百度的lavas框架是怎么做的

当检测到有新的sw被安装之后弹出一个提示栏来告诉用户站点已更新,并且让用户点击更新按钮,不过lavas这个通知栏非常简单(丑),实际应用的话我们可以在上面丰富内容,比如增加更新日志之类的东西,另外这个按钮也不够突出,我曾多次以为我按f5起到的作用和他是相同的,直到我理解了它的原理才发现只能通过点击这个按钮来完成新旧sw的更换。新的sw安装完成时会触发onupdatefound的方法,通过监听这个方法来弹出一个提示栏让用户去点击按钮。

service worker实践我们先从sw的注册开始,官方给的demo里的注册是这样的:

if ('serviceworker' in navigator)

navigator.serviceworker.register('service-worker.js');


但是这样做会有一些问题,页面在首次打开的时候就进行缓存sw的资源,因为sw内预缓存资源是需要下载的,sw线程一旦在首次打开时下载资源,将会占用主线程的带宽,以及加剧对cpu和内存的使用,而且service worker 启动之前,它必须先向浏览器 ui 线程申请分派一个线程,再回到 io 线程继续执行 service worker 线程的启动流程,并且在随后多次在ui线程和io线程之间切换,所以在启动过程中会存在一定的性能开销,在手机端尤其严重。

况且首次打开各种资源都非常宝贵,完全没有必要争第一次打开页面就要缓存资源。正确的做法是,页面加载完以后sw的事。


http://xiangxing.51dzw.com

service worker生命周期register 这个是由 client 端发起,注册一个 serviceworker,这需要一个专门处理sw逻辑的文件parsed 注册完成,解析成功,尚未安装installing 注册中,此时 sw 中会触发 install 事件, 需知 sw 中都是事件触发的方式进行的逻辑调用,如果事件里有 event.waituntil() 则会等待传入的 promise 完成才会成功installed(waiting) 注册完成,但是页面被旧的 service worker 脚本控制, 所以当前的脚本尚未激活处于等待中,可以通过 self.skipwaiting() 跳过等待。activating 安装后要等待激活,也就是 activated 事件,只要 register 成功后就会触发 install ,但不会立即触发 activated,如果事件里有 event.waituntil() 则会等待这个 promise 完成才会成功,这时可以调用 clients.claim() 接管所有页面。activated 在 activated 之后就可以开始对 client 的请求进行拦截处理,sw 发起请求用的是 fetch api,xhr无法使用fetch 激活以后开始对网页中发起的请求进行拦截处理terminate 这一步是浏览器自身的判断处理,当 sw 长时间不用之后,处于闲置状态,浏览器会把该 sw 暂停,直到再次使用update 浏览器会自动检测 sw 文件的更新,当有更新时会下载并 install,但页面中还是老的 sw 在控制,只有当用户新开窗口后新的 sw 才能激活控制页面redundant 安装失败, 或者激活失败, 或者被新的 service worker 替代掉service worker 脚本最常用的功能是截获请求和缓存资源文件, 这些行为可以绑定在下面这些事件上:install 事件中, 抓取资源进行缓存activate 事件中, 遍历缓存, 清除过期的资源fetch 事件中, 拦截请求, 查询缓存或者网络, 返回请求的资源

service worker的由来service worker(以下简称sw)是基于web worker而来的。

众所周知,javascript 是单线程的,随着web业务的复杂化,开发者逐渐在js中做了许多耗费资源的运算过程,这使得单线程的弊端更加凹显。web worker正是基于此被创造出来,它是脱离在主线程之外的,我们可以将复杂耗费时间的事情交给web worker来做。但是web worker作为一个独立的线程,他的功能应当不仅于此。sw便是在web worker的基础上增加了离线缓存的能力。当然在 service worker 之前也有在 html5 上做离线缓存的 api 叫 appcache, 但是 appcache 存在很多缺点。




sw是由事件驱动的,具有生命周期,可以拦截处理页面的所有网络请求(fetch),可以访问cache和indexdb,支持推送,并且可以让开发者自己控制管理缓存的内容以及版本,为离线弱网环境下的 web 的运行提供了可能,让 web 在体验上更加贴近 native。换句话说他可以把你应用里的所有静态动态资源 fr70k05_18根据不同策略缓存起来,在你下次打开时不再需要去服务器请求,这样一来就减少了网络耗时,使得web应用可以秒开,并且在离线环境下也变得可用。做到这一切你只需要增加一个sw文件,不会对原有的代码产生任何侵入,是不是很perfect?

service worker与pwa的现状说起service worker就不得不提起pwa了,service worker做为pwa的核心技术之一,多年来一直被google大力推广,这里简单介绍一下。

通俗来说,pwa就是渐进式web应用(progressive web app)。早在16年初,google便提出pwa,希望提供更强大的web体验,引导开发者回归开放互联网。它弥补了web对比native app急缺的几个能力,比如离线使用、后台加载、添加到主屏和消息推送等,同时它还具备了小程序标榜的“无需安装、用完即走”的特性。

虽然pwa技术已经被w3c列为标准,但是其落地情况一直以来是很让人失望的,始终受到苹果的阻碍,最重要的原因在于pwa绕过apple store审核,直接推给用户。如果普及,这将威胁到苹果的平台权威,也就意味着苹果与开发者的三七分成生意将会落空。

http://tenghaowy.51dzw.com/

所以一直以来safrai不支持mainfest以及service worker这两项关键技术,即使在18年开始支持了,但是对pwa的支持力度也远远低于安卓,具体体现在service worker缓存无法永久保存,以及service worker的api支持不够完善,一个最明显的不同在于安卓版本的pwa会保留你的登录状态,并且会系统级推送消息。而在苹果上,这两点都做不到。也就是说,iphone上的微博pwa,每次打开都要重新登录,而且不会收到任何推送信息。

另外由于某些不可描述的原因,在国内无法使用service worker的推送功能,虽然国内已经有两家公司做了service worker的浏览器推送,但是成熟度还有待调研。

由于目前各版本手机浏览器对service worker的支持度都不太相同,同一个接口也存在差异化还有待统一,之于我们来说,也只能用service worker做一做pc浏览器的缓存了。

随着前端快速发展,应用的性能已经变得至关重要。

如何降低一个页面的网络请求成本从而缩短页面加载资源的时间并降低用户可感知的延时是非常重要的一部分。对于提升应用的加载速度常用的手段有http cache、异步加载、304缓存、文件压缩、cdn、css sprite、开启gzip等等。这些手段无非是在做一件事情,就是让资源更快速的下载到浏览器端。但是除了这些方法,其实还有更加强大的service worker线程(原创 worktile:配图来自网络,权利归原作所有,特别感谢!)



热门点击

推荐电子资讯

Chrome 31:iOS版发布
iOS版Chrome31主要更新: “Autofill”自动填充功能功... [详细]