Skip to content

bengle/Service-Worker-Cookbook

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

65 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

介绍

《Service Worker Cookbook》中介绍了一系列在现代网站开发中引入service worker和如何实践的例子。

打开浏览器的开发者工具,在console中就可以查看fetch事件以及service worker各种api的详细信息。

贡献

这本书是由Mozilla发起,很多象你一样的开发者贡献完成,所有的源码都可以在github上面找到,欢迎大家贡献代码和提交request。

缓存章节中用到的图片都可以在lorempixel.com上找到。

大纲

网络和缓存

用service worker从网络上获取即时的数据,但是如果网络拥堵响应不及的时候,它会用缓存的数据替代网络数据。

纯缓存

介绍service worker如何在fetch事件中始终返回缓存中的数据。

缓存与更新

介绍使用service worker读取缓存数据快速响应请求,同时从网络更新缓存数据。

缓存、更新与刷新

介绍使用service worker读取缓存数据快速响应请求,从网络更新缓存数据,而且当网络请求的数据响应之后自动更新网站界面。

嵌入式回调

介绍service worker在资源缺失情况下提供嵌入式内容回调的使用方案。

推送与信息获取

使用service worker发送一个推送消息请求,以及接受一条消息推送时获取内容。

推送信息

使用service worker发送一条附带信息的推送消息,我们的例子会教你如何发送或接收一个字符串,但是实际上我们可以从推送消息中提取各种格式的数据,例如:String, ArrayBuffer, Blob, JSON。

推送富文本

使用service worker推送富文本消息,可以定义消息的语言,振动模式以及关联的图片等。在https://notifications.spec.whatwg.org/#api 上你可以查看所有可以设置的参数,例如:可以从通知激活一组操作。

简单推送使用

使用Web Push API最简单的例子,推送一条消息给用户,即使在你的页面没有打开的情况下。

消息推送的tag

使用tag标记推送消息,将旧的消息替换为新的。这样可以向用户推送最新的消息,还可以将多个消息折叠为一个推送消息。

消息推送相关指标

消息推送在不同浏览器下指标配置实践,包含:发送可见或不可见的消息,浏览器选项卡打开和关闭情况下的不同表现,点击推送消息和不点击分别会发生什么。

消息推送在客户端使用

当用户点击一个推送事件出发的消息时,service worker是如何控制客户端的。你可以切换聚焦该应用的选项卡,甚至关闭它再重新打开。

推送订阅

介绍如何使用消息推送的订阅管理。

即时声明

介绍如何在无需等待navigation事件的情况下,让service worker立即控制页面。

消息代理

介绍service worker是如何和页面通信的,并教你如何用service worker代理不同页面间的消息传递。

请求远端资源

介绍两种servie worker加载远程资源的标准用法,其中一种方法是将service worker作为代理中间件使用。

实时流程图

介绍如何使用service worker实现Mozilla开发者网站上提供的工作流程图的例子,这个例子运行期间会在屏幕上打印出service worker运行的所有步骤日志。

离线回调

本章介绍在用户离线环境下如何用service worker从缓存中获取数据替代网络环境下要获取的内容。

离线状态

介绍如何用service worker缓存用户的关键资源,并告知用户在离线环境下可以得到同在线环境一样的用户体验。

JSON数据缓存

本案例介绍了在service worker装载期间获取JSON文件并将所有资源添加到缓存的操作,同时这个例子中还用到了service worker即时声明快速激活。

本地下载

本案例介绍如何让用户“下载”在客户端生成的文件。

虚拟服务器

本案例介绍如何使用service worker当作远程服务器。

API分析

本案例用来显示API使用日志,例子中介绍如何使用service worker收集API使用情况并实时异步上传这些内容,从而达到显示这些使用日志而不会干扰到UI层效果。

负载均衡

本案例介绍如何使用service worker控制网络逻辑,以根据服务器情况动态选择最佳服务提供者。

缓存压缩

本案例介绍如何从zip文件缓存内容。

依赖注入

本案例使用service worker充当依赖注入器,解决避免高级组件复杂的线性依赖问题。

Request Deferrer

本案例实现了一个类似发件箱的缓存区,可以在离线情况下将请求加入队列,以便在重新获取连接后执行操作。

缓存和网络的请求

本案例介绍从缓存或者网络返回应用网络请求的方法。

渲染仓库

本案例是NGA的一项提案,缓存插值模版内容,以避免在连续请求时获取模型和渲染的时间消耗。

About

Service Worker入门翻译

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •