Service Worker 是运行在浏览器背后的独立线程，可以处理网络请求。作为一种 JavaScript 文件，它根据事件驱动其相关工作。例如，当安装完成后触发 install 事件，或者当网络请求发出时触发 fetch 事件。它允许开发者控制网络请求，如何响应，包括缓存管理等，这为开发高响应性和离线有效的 web 应用程序提供了强大的能力。
HTTP 请求的全过程如下：用户或者 JavaScript 代码发出 HTTP 请求，Service Worker 拦截此请求，然后基于程序的逻辑决定如何响应。根据迟延，带宽，请求类型等情况，Service Worker 可以直接查询缓存并返回结果，或者把请求发送到网络并等待成功的响应，甚至是预先读取并缓存某些资源。如果遇到网络不稳定的情况，如断网或者服务器错误等，Service Worker 也可以回应给用户或者 JavaScript 代码不同的响应体，例如返回客户端正在离线的警告，或者返回某个预定义的 HTTP 错误。
PWA （Progressive Web Apps）设计之初就是为了让 web 应用程序能够像 native 应用程序一样体验。所以，我们可以在 Service Worker 中进行资源预加载和缓存，在断网或者网络不稳定的情况下仍然保持应用的功能和可用性。504 error 是服务器网关超时错误，它通常在服务器端问题或者网络问题使服务器无法完成用户请求的时候发生。但在 PWA 的设计中，这是一种比较罕见的情况。因为在 Service Worker 中，我们一般会对请求的资源进行缓存，当断网或者网络不稳定时，我们会从缓存中读取资源进行页面渲染。然而，如果遇到以下情况，我们还是可能看到 504 error。
新用户第一次访问我们的 PWA 应用，但是在 Service Worker 安装并完成资源预加载这个过程中发生了网络断网或者服务器错误，此时 Service Worker 尚未完成资源的缓存。然后用户试图访问某些还未被缓存的资源，此时我们可能会看到 504 error。
对于一些动态内容或者需要实时更新的资源，比如实时新闻，股票数据等，我们可能不会在 Service Worker 中进行预加载和缓存。如果用户在断网或者网络不稳定的情况下试图访问这些内容，我们可能会看到 504 error。
对于一些涉及用户操作和结果的请求，例如表单提交，如果这个操作需要实时的服务器响应，即使在断网或者网络不稳定的情况下，我们也无法从缓存中获取到任何有用的内容。此时，我们可能会看到 504 error。
以上情况都是在必要的网络请求无法完成的情况下引发的，而这种情况正是我们希望通过 PWA 能够尽量避免的。所以，我们在设计 PWA 的时候，不仅要考虑到如何利用 Service Worker 进行资源预加载和缓存，更要针对不同的内容和功能，设计出更合理的网络请求策略，并考虑到网络异常情况下的用户体验。
网友评论