Pwa错误考虑api缓存而不是db？
Pwa wrong to consider api cache instead of db?
我正在构建一本特定的书 reader，例如应用程序。
主页调用 api/booksList 并接收包含每本书信息的 json 数组，例如：
[ { id: server_db_id, title: "title test", sum: 10 , date: ... }
]
在请求后对其进行缓存，因此我不会将图书列表保存到 indexedDB、localStorage 或其他存储中。如果我需要一本特定的书，我只需再次调用 api 书单并过滤它。那是糟糕的设计吗？ （本书将超过 200 项）
当用户打开这本书时，它会调用 /api/book/book_id 并缓存它，打开的书响应是一个 json 书行列表，例如：
[
{
id: ...
content: "This is line...lore ipsum..."
....
}
]
我将 api 响应放在 vue 数据变量中，组件被正确渲染
我没有使用任何类型的处理程序来使它保持离线状态。为了检测用户是否已经打开这本书，我只是调用 api，检查是否发生错误或响应正文是否有内容。
这是一个错误、错误或愚蠢的决定吗？这会达到配额限制 api 或其他类型的限制吗？ pwa的"gods"会对我竖起手指说：WAAAT。 （我一开始没有使用 indexedDB，因为它需要一些模型处理，如果可能的话，我想让事情变得更简单）
我自己正在研究这个并得出结论，目前我将采用这种方法，我使用 cache 资产，js, css, html 等基于他们的匹配路线。
然后说到数据，例如json 请求等。最好将它们存储在 indexedDB（或等效的）中，这实际上不需要模型或模式本身。
请参阅 Jake Archibald 的 IndexedDB-Promise 库https://github.com/jakearchibald/idb它真的很容易让你头脑清醒。
尽管 Jake 和 Addy 都表示这不是事实上的规则，因此您可以最终决定什么对您最有利。
阅读此内容以获得更好的说明
- https://developers.google.com/web/ilt/pwa/live-data-in-the-service-worker
- https://medium.com/dev-channel/offline-storage-for-progressive-web-apps-70d52695513c
它帮助我更好地决定如何继续前进。
还有推荐
- 查看 PWA 培训：https://developers.google.com/web/ilt/pwa
- 工作箱：https://developers.google.com/web/tools/workbox（这大大加快了我的开发速度！）
- Codelab：https://codelabs.developers.google.com/（搜索 PWA）
这里的指南非常擅长带您完成所需的一切。
祝你的 PWA 好运
随想（编辑）
尽管基于我看到的一些示例和指南，但让我质疑这一点的一件事是，数据存储是以更临时的方式处理的。例如，如果 PWA 调用 API，我遇到了两种方法，您可以在其中管理应用程序或服务工作者中的缓存数据，例如如果您的 API 调用获取 JSON 在应用程序中失败，它可以恢复为在 indexedDB 中获取数据，希望在您的应用程序第一次调用 API 时预缓存该数据。
或者您可以使用 self.addEventListener('fetch', (event) => { ad-hoc stuff here }) 这是您可以匹配资产或数据请求并使用缓存或 indexedDB 响应劫持响应的地方。这避免了在您的应用中处理离线数据的需要。
第一种方法让我感到不安，所以我将在服务工作者中使用 addEventListener 方法，因为这就是它的用途，而且我的应用程序不必担心这个。
我正在构建一本特定的书 reader，例如应用程序。
主页调用 api/booksList 并接收包含每本书信息的 json 数组，例如：
[ { id: server_db_id, title: "title test", sum: 10 , date: ... }
]
在请求后对其进行缓存，因此我不会将图书列表保存到 indexedDB、localStorage 或其他存储中。如果我需要一本特定的书，我只需再次调用 api 书单并过滤它。那是糟糕的设计吗？ （本书将超过 200 项）
当用户打开这本书时，它会调用 /api/book/book_id 并缓存它，打开的书响应是一个 json 书行列表，例如：
[
{
id: ...
content: "This is line...lore ipsum..."
....
}
]
我将 api 响应放在 vue 数据变量中，组件被正确渲染
我没有使用任何类型的处理程序来使它保持离线状态。为了检测用户是否已经打开这本书，我只是调用 api，检查是否发生错误或响应正文是否有内容。
这是一个错误、错误或愚蠢的决定吗？这会达到配额限制 api 或其他类型的限制吗？ pwa的"gods"会对我竖起手指说：WAAAT。 （我一开始没有使用 indexedDB，因为它需要一些模型处理，如果可能的话，我想让事情变得更简单）
我自己正在研究这个并得出结论，目前我将采用这种方法，我使用 cache 资产，js, css, html 等基于他们的匹配路线。
然后说到数据，例如json 请求等。最好将它们存储在 indexedDB（或等效的）中，这实际上不需要模型或模式本身。
请参阅 Jake Archibald 的 IndexedDB-Promise 库https://github.com/jakearchibald/idb它真的很容易让你头脑清醒。
尽管 Jake 和 Addy 都表示这不是事实上的规则，因此您可以最终决定什么对您最有利。
阅读此内容以获得更好的说明
- https://developers.google.com/web/ilt/pwa/live-data-in-the-service-worker
- https://medium.com/dev-channel/offline-storage-for-progressive-web-apps-70d52695513c
它帮助我更好地决定如何继续前进。
还有推荐
- 查看 PWA 培训：https://developers.google.com/web/ilt/pwa
- 工作箱：https://developers.google.com/web/tools/workbox（这大大加快了我的开发速度！）
- Codelab：https://codelabs.developers.google.com/（搜索 PWA）
这里的指南非常擅长带您完成所需的一切。
祝你的 PWA 好运
随想（编辑）
尽管基于我看到的一些示例和指南，但让我质疑这一点的一件事是，数据存储是以更临时的方式处理的。例如，如果 PWA 调用 API，我遇到了两种方法，您可以在其中管理应用程序或服务工作者中的缓存数据，例如如果您的 API 调用获取 JSON 在应用程序中失败，它可以恢复为在 indexedDB 中获取数据，希望在您的应用程序第一次调用 API 时预缓存该数据。
或者您可以使用 self.addEventListener('fetch', (event) => { ad-hoc stuff here }) 这是您可以匹配资产或数据请求并使用缓存或 indexedDB 响应劫持响应的地方。这避免了在您的应用中处理离线数据的需要。
第一种方法让我感到不安，所以我将在服务工作者中使用 addEventListener 方法，因为这就是它的用途，而且我的应用程序不必担心这个。