Android webview ServiceWorker解析

超、凢脫俗 2022-11-10 05:59 468阅读 0赞

#### 一、ServiceWorker 的能力 ####

ServiceWorker 是一个注册在指定源和路径下的事件驱动 Worker。官方入门文档提到它能提供丰富的离线体验，周期的后台同步，消息推送通知，拦截和处理网络请求，和管理资源缓存。这些技术细节我们在后续的文章逐一进行分析，现在我们先看看这些能力的意义。

1.  丰富的离线体验

很多文档都会提到，ServiceWorker 能提供丰富的离线体验，但大家可能会想，我们好像很少需要离线的业务，甚至一些高政策风险的业务，连主文档都不允许缓存，那离线是否就没有实际意义了呢？  
有实际意义的离线，一般不是指断开网络能访问，而是指在用户想访问之前，能提前把资源加载回来。离线并不是一直都断开网络，而是在网络连接良好的情况下，能把需要的资源都加载回来。一些比较糟糕的做法是在 WiFi 网络下把整个 App 客户端的资源都拉下来，这样其实很多资源是用户不需要的，浪费了用户的网络和存储。ServiceWorker 提供了更好更丰富的离线技术，Push + Fetch + Cache 这些技术结合能够提供非常完美的离线体验。比如，在某应用的小程序页面发版时，推送消息给应用客户端，客户端唤起页面的 ServiceWorker，去将需要用到的资源提前 Fetch 回来。

1.  消息推送通知

ServiceWorker 的消息推送，其实是提供了一种服务器与页面交互的技术。消息推送，在 Native 或 Hybird App 已经比较常见。很多 Hybird App 里面其实还会有一些 Web 页面，在没有 ServiceWorker 消息推送之前，消息是推送不到页面的。消息能推送到页面，意味着页面提前知道要发生的一些事情，能提前把这些事情做好。

1.  管理资源缓存

Web标准中提供了很多存储相关的 H5 API，比如，Application Cache，Local Storage等。但这些 API 都不是非常好用，主要原因在于给予页端的控制权太少，页端还是不能完全控制每一个资源请求的存储，或多或少会有一些趟不过的坑。ServiceWorker Cache API 的出现彻底改变了这一局面，让页面可以方便的操作每一个资源的存储。

1.  拦截资源请求

一般来说，基于 Webview 的客户端拦截网络请求，都会基于 WebViewClient 的标准的 shouldInterceptRequest 接口。那么 ServiceWorker 的请求在 Webview 还能不能拦截呢？WebViewClient 的标准的 shouldInterceptRequest 接口无法拦截 ServiceWorker 的请求，但 Chrome 49.0 提供了新的 ServiceWorkerController 可以拦截所有 ServiceWorker 的请求。另外，页端可以监听 Fetch 事件，通过 FetchEvent.respondWith 返回符合期望的 Response，即页端也能拦截 Response。

1.  发起资源请求

在 ServiceWorker 之前，页面一般通过 XMLHttpRequest 发起资源请求，但 XHR 有一定的局限性，比如，它不像普通请求那样支持 Request 和 Response 对象，也不支持 Streaming Response，一些跨域的场景也限制较多。而这些恰好是 ServiceWorker 的能力所在，Fetch API 支持 Request 和 Response 对象，也支持 Streaming Response，Foreign Fetch 还具备跨域的能力。  
看了上面的能力，是不是觉得和 Native Apps 的能力很像？不错，ServiceWorker 对标的就是Native App，它的能力还在不断的扩展中，比如，Navigation Preload。

#### 二、ServiceWorker 的意义 ####

Progressive Web Apps，一种能给 Web 带来令人惊叹的用户体验的新方式。里面提到三种最核心的用户体验。

Reliable：即使在不确定的场景下（比如，网络不稳定，用户停留时间不确定），依然能提供可靠的Web服务。  
Fast：提供极速流畅的用户体验。  
Engaging：提供与 Native App 一致的用户体验。  
我们看看 ServiceWorker 是否可以很好的达到上述要求？

Background Sync 技术在页面已被关闭，或用户已退出应用，甚至用户已重启手机，它都能保证同步请求能正确地被触发，这就是提供可靠服务的一个例子。

Fetch 技术和 Cache 技术能让页面完全控制资源请求和响应，提供了 HTTP Cache 层面操控缓存的能力，只要合理使用几乎能保证在页面加载之前，能把需要的资源都提前加载回来，把联网体验转换为离线体验，能极大的提升页面性能。

Web Push 技术让页面服务器与页面交互成为可能，与 Fetch 技术结合可以提前让页面更新资源，与 Web

Notifications 结合可以在需要的时候及时通知到用户。  
我们相信，在不远的将来，很可能会有更加强大的技术加入到 ServiceWorker，例如让页面操控渲染流程的技术。