热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

关于前端:Service-worker-简介

Serviceworkers实质上充当Web应用程序、浏览器与网络(可用时)之间的代理服务器。这个API旨在创立无效的离线体验,它会拦挡网络申请并依据网络是否可用采取来适当的动作、更新来自服务器的的资源。它还提供入口以推送告诉和拜访后盾同步API。

Service workers 实质上充当 Web 应用程序、浏览器与网络(可用时)之间的代理服务器。这个 API 旨在创立无效的离线体验,它会拦挡网络申请并依据网络是否可用采取来适当的动作、更新来自服务器的的资源。它还提供入口以推送告诉和拜访后盾同步 API。

Service worker 的概念和用法

Service worker 是一个注册在指定源和门路下的事件驱动 worker。它采纳 Javascript 管制关联的页面或者网站,拦挡并批改拜访和资源申请,细粒度地缓存资源。你能够齐全管制利用在特定情景(最常见的情景是网络不可用)下的体现。

Service worker 运行在worker上下文,因而它不能拜访 DOM。绝对于驱动利用的主 Javascript 线程,它运行在其余线程中,所以不会造成阻塞。它设计为齐全异步,同步API(如 XHRlocalStorage)不能在 service worker 中应用。

出于平安考量,Service workers 只能由 HTTPS 承载,毕竟批改网络申请的能力裸露给中间人攻打会十分危险。在 Firefox 浏览器的用户隐衷模式,Service Worke不可用。

留神:Service workers能够更粗疏地管制每一件事件,反对当操作出错时终止操作

留神:Service workers大量应用 Promise,因为通常它们会期待响应后持续,并依据响应返回一个胜利或者失败的操作。Promise 非常适合这种场景。

注册

应用 ServiceWorkerContainer.register() 办法首次注册 service worker。如果注册胜利,service worker 就会被下载到客户端并尝试装置或激活(见下文),这将作用于整个域内用户可拜访的 URL,或者其特定子集。

下载、装置和激活

此时,你的服务工作者( service worker )将恪守以下生命周期:

  1. 下载
  2. 装置
  3. 激活

用户首次拜访 service worker 管制的网站或页面时,service worker 会立即被下载。

之后,在以下状况将会触发更新:

  • 一个返回作用域内页面的导航
  • 在 service worker 上的一个事件被触发并且过来 24 小时没有被下载

无论它与现有 service worker 不同(字节比照),还是第一次在页面或网站遇到 service worker,如果下载的文件是新的,装置就会尝试进行。

如果这是首次启用 service worker,页面会首先尝试装置,装置胜利后它会被激活。

如果现有 service worker 已启用,新版本会在后盾装置,但不会被激活,这个时序称为 worker in waiting。直到所有已加载的页面不再应用旧的 service worker 才会激活新的 service worker。只有页面不再依赖旧的 service worker,新的 service worker 会被激活(成为active worker)。

你能够监听 InstallEvent,事件触发时的规范行为是筹备 service worker 用于应用,例如应用内建的 storage API 来创立缓存,并且搁置利用离线时所需资源。

还有一个 activate 事件,触发时能够清理旧缓存和旧的 service worker 关联的货色。

Servcie worker 能够通过 FetchEvent 事件去响应申请。通过应用 FetchEvent.respondWith 办法,你能够任意批改对于这些申请的响应。

留神: 因为 oninstallonactivate 实现前须要一些工夫,service worker 规范提供一个 waitUntil 办法,当 oninstall 或者 onactivate 触发时被调用,承受一个 promise。在这个 promise 被胜利 resolve 以前,功能性事件不会散发到 service worker。

其余应用场景

Service workers 也能够用来做这些事件:

  • 后盾数据同步
  • 响应来自其它源的资源申请
  • 集中接管计算成本高的数据更新,比方地理位置和陀螺仪信息,这样多个页面就能够利用同一组数据
  • 在客户端进行 CoffeeScript,LESS,CJS/AMD 等模块编译和依赖治理(用于开发目标)
  • 后盾服务钩子
  • 自定义模板用于特定URL模式
  • 性能加强,比方预取用户可能须要的资源,比方相册中的前面数张图片

将来 service workers 可能用来做更多使web平台靠近原生利用的事。 值得关注的是,其余规范也能并且将会应用 service worker,例如:

  • 后盾同步:启动一个service worker即便没有用户拜访特定站点,也能够更新缓存
  • 响应推送:启动一个service worker向用户发送一条信息告诉新的内容可用
  • 对工夫或日期作出响应
  • 进入天文围栏

接口

  • Cache

示意用于 Request/Response对象对的存储,作为ServiceWorker生命周期的一部分被缓存。

  • CacheStorage

示意Cache对象的存储。提供一个所有命名缓存的主目录,ServiceWorker能够拜访并保护名字字符串到Cache对象的映射。

  • Client

示意 service worker client 的作用域。一个 service worker client 能够是浏览器上下文的一个文档,也能够是一个由流动worker管制的SharedWorker

  • Clients

示意一个Client对象容器,是拜访以后源的流动service worker clients的次要路径。

  • ExtendableEvent

扩大被散发到 ServiceWorkerGlobalScopeinstallactivate 事件时序,作为 service worker 生命周期的一部分。这会确保任何功能型事件(如FetchEvent)不被散发到 ServiceWorker,直到它更新了数据库架构、删除过期缓存项等等当前。

  • ExtendableMessageEvent

ServiceWorker 上触发的音讯事件的事件对象(当在 ServiceWorkerGlobalScope 上从另一个上下文接管到通道音讯时)——缩短了此类事件的生命周期。

  • FetchEvent

传递给 ServiceWorkerGlobalScope.onfetch 处理函数的参数,FetchEvent 代表一个在 ServiceWorkerServiceWorkerGlobalScope 中散发的申请动作。它蕴含对于申请和响应的后果信息,并且提供 FetchEvent.respondWith() 办法,这个办法容许咱们提供任意的响应返回到管制页面。

  • InstallEvent

传递给 oninstall 处理函数的参数,InstallEvent 接口代表一个在 ServiceWorkerServiceWorkerGlobalScope 中散发的装置动作,作为 ExtendableEvent 的子事件,它保障诸如 FetchEvent 的功能性事件在装置过程中不会被散发。

  • NavigationPreloadManager

提供应用 Service Worker 治理资源预加载的办法。

  • Navigator.serviceWorker

返回一个 ServiceWorkerContainer 对象,能够提供入口用于注册、删除、更新以及与在相干 document 中 ServiceWorker 通信的对象。

  • NotificationEvent

传递给onnotificationclick 处理函数的参数,NotificationEvent 接口代表在 ServiceWorkerServiceWorkerGlobalScope 中散发的单击事件告诉。

  • ServiceWorker

示意一个service worker。多个浏览的上下文(例如pages,workers等等)都能通过雷同的ServiceWorker 对象相关联。

  • ServiceWorkerContainer

提供一个在网络生态中把 service worker 作为一个整体的对象,包含辅助注册,反注册以及更新服务工作者,并且拜访 service worker 的状态以及他们的注册信息。

  • ServiceWorkerGlobalScope

示意 service worker 的全局执行上下文。

  • ServiceWorkerMessageEvent

蕴含对于一个发送给以 navigator.serviceWorker 为指标的事件信息。

  • ServiceWorkerRegistration

示意service worker的注册。

  • ServiceWorkerState

与它本人的 ServiceWorker 的状态相关联。

  • SyncEvent

传递给同步函数的参数,SyncEvent 接口代表在 ServiceWorker 里ServiceWorkerGlobalScope 散发的同步动作。

  • SyncManager

提供一个接口用于注册和返回SyncRegistration对象。

  • WindowClient

示意在浏览器上下文中记录的service worker客户端的作用域,被流动的工作者管制。是 Client 对象的非凡类型,蕴含一些附加的办法和可用的属性。

学习乏味的常识,结识乏味的敌人,塑造乏味的灵魂!

大家好!我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢送关注,心愿大家多多指教!


推荐阅读
  • flowable工作流 流程变量_信也科技工作流平台的技术实践
    1背景随着公司业务发展及内部业务流程诉求的增长,目前信息化系统不能够很好满足期望,主要体现如下:目前OA流程引擎无法满足企业特定业务流程需求,且移动端体 ... [详细]
  • 搭建Windows Server 2012 R2 IIS8.5+PHP(FastCGI)+MySQL环境的详细步骤
    本文详细介绍了搭建Windows Server 2012 R2 IIS8.5+PHP(FastCGI)+MySQL环境的步骤,包括环境说明、相关软件下载的地址以及所需的插件下载地址。 ... [详细]
  • Windows下配置PHP5.6的方法及注意事项
    本文介绍了在Windows系统下配置PHP5.6的步骤及注意事项,包括下载PHP5.6、解压并配置IIS、添加模块映射、测试等。同时提供了一些常见问题的解决方法,如下载缺失的msvcr110.dll文件等。通过本文的指导,读者可以轻松地在Windows系统下配置PHP5.6,并解决一些常见的配置问题。 ... [详细]
  • 如何在服务器主机上实现文件共享的方法和工具
    本文介绍了在服务器主机上实现文件共享的方法和工具,包括Linux主机和Windows主机的文件传输方式,Web运维和FTP/SFTP客户端运维两种方式,以及使用WinSCP工具将文件上传至Linux云服务器的操作方法。此外,还介绍了在迁移过程中需要安装迁移Agent并输入目的端服务器所在华为云的AK/SK,以及主机迁移服务会收集的源端服务器信息。 ... [详细]
  • 本文介绍了在Windows环境下如何配置php+apache环境,包括下载php7和apache2.4、安装vc2015运行时环境、启动php7和apache2.4等步骤。希望对需要搭建php7环境的读者有一定的参考价值。摘要长度为169字。 ... [详细]
  • 本文介绍了Windows操作系统的版本及其特点,包括Windows 7系统的6个版本:Starter、Home Basic、Home Premium、Professional、Enterprise、Ultimate。Windows操作系统是微软公司研发的一套操作系统,具有人机操作性优异、支持的应用软件较多、对硬件支持良好等优点。Windows 7 Starter是功能最少的版本,缺乏Aero特效功能,没有64位支持,最初设计不能同时运行三个以上应用程序。 ... [详细]
  • Imtryingtofigureoutawaytogeneratetorrentfilesfromabucket,usingtheAWSSDKforGo.我正 ... [详细]
  • 安装mysqlclient失败解决办法
    本文介绍了在MAC系统中,使用django使用mysql数据库报错的解决办法。通过源码安装mysqlclient或将mysql_config添加到系统环境变量中,可以解决安装mysqlclient失败的问题。同时,还介绍了查看mysql安装路径和使配置文件生效的方法。 ... [详细]
  • 本文介绍了在Python3中如何使用选择文件对话框的格式打开和保存图片的方法。通过使用tkinter库中的filedialog模块的asksaveasfilename和askopenfilename函数,可以方便地选择要打开或保存的图片文件,并进行相关操作。具体的代码示例和操作步骤也被提供。 ... [详细]
  • Java序列化对象传给PHP的方法及原理解析
    本文介绍了Java序列化对象传给PHP的方法及原理,包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用,以及代码执行序列化所需要的权限。最后指出,序列化会将对象实例的所有字段都进行序列化,使得数据能够被表示为实例的序列化数据,但只有能够解释该格式的代码才能够确定数据的内容。 ... [详细]
  • 本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目,以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数,以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ... [详细]
  • 20211101CleverTap参与度和分析工具功能平台学习/实践
    1.应用场景主要用于学习CleverTap的使用,该平台主要用于客户保留与参与平台.为客户提供价值.这里接触到的原因,是目前公司用到该平台的服务~2.学习操作 ... [详细]
  • 如何用UE4制作2D游戏文档——计算篇
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了如何用UE4制作2D游戏文档——计算篇相关的知识,希望对你有一定的参考价值。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • phpcomposer 那个中文镜像是不是凉了 ... [详细]
author-avatar
i92202502907823
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有