vue.js - 如何处理 Vue 渐进式 Web 应用程序

Question

我有一个基本的 CRUD REST API 和一个基本的 Vue 前端。假设我有一个返回所有用户的 API 端点和一个显示那些获取的用户列表的/users前端页面 url 。/users

我想通过 CLI 设置为我的 Vue 应用程序提供离线功能并添加 PWA 支持。

据我了解 PWA，他们的服务工作者是客户端和服务器之间的一个实例。客户端向 service worker 发送一个请求，这个请求决定是进行新的 API 调用还是返回之前缓存的数据。

所以我的用户页面可以在mounted钩子中获取用户列表。如果没有 PWA 支持，我还可以将用户全局存储到 Vuex 商店，以便也从其他页面访问它们。

我想到了多个问题：

• 何时加载缓存数据以及何时发出新的 API 请求？互联网连接是唯一标准吗？（如此处所列https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures#caching_strategies_supported_by_sw-toolbox）
• 当实时数据发生变化并且排队的请求将响应多个错误时，如何处理缓存数据。
• 缓存存储受浏览器和设备操作系统的限制。假设iOS将存储限制为50MB，如何处理？一些带有一些图像的文档很容易通过限制。那么我是否必须决定要缓存什么，不缓存什么？

• 我看过一个运行时缓存示例

  { urlpattern：'api url'，处理程序：'例如 networkfirst'，选项 }

但是我必须在服务工作者配置中硬编码这样的缓存吗？许多 API 端点可能会变得非常混乱。

如果有人能解释 PWA 如何工作以及如何处理它们，那就太棒了。Vue应用需要做什么，如何存储大量数据以及如何处理错误情况。

标签： vue.jsvuexprogressive-web-apps