从依赖网络的 Web 应用程序到独立于网络的 Web 应用程序

Question

我是一名全栈 Web 开发人员，目前我主要使用前端框架（如 angular）和后端框架（如 Spring Boot）构建单页应用程序。

通常我的 Web 应用程序（假设它是一个 CRUD）的设计如下： 假设我在更新页面上并更新了一个实体。然后向后端发出更新数据库中实体的请求。当后端响应说一切正常时，您的实体已更新（状态代码 200），我浏览下一页，这是带有 url 的读取页面，例如entityName/{id}我通过url将实体的 id 传递到下一页。然后在读取页面上我得到那个 id，向后端发出请求，检索实体数据并显示它们。

当用户失去与互联网的连接时就会出现问题，因此无法向后端发出请求，因此数据无法显示到 ui 或更新。

另一种设计是这样的：我在更新页面上，我更新了我的实体。向后端发出请求，但状态也保留在客户端。因此，假设连接丢失，我仍然可以转到阅读页面并显示更新后的实体。此外，由于状态/数据保存在客户端，我不必向后端发出第二个请求以从 id 获取实体，因为实体位于客户端。在用户在应用程序上花费的时间期间，连接恢复并向服务器发出更新请求以同步数据库和客户端中的数据。

在我看来，第二种方法对用户来说更方便，因为 ui 不太依赖向后端发出的请求来显示其信息，从而使其更加流畅和令人愉快。

我很清楚第一种方法正在使用中。我是这样开发的，所以我的问题是：是否可以从第一个设计转到第二个设计，如果是，用什么技术？

为了实现第二种设计，我会做的是使用服务（使用 angular 实现时）跨组件共享数据。通过这种方式，应用程序的状态可以保存在客户端。但也许有更好的方法。我听说过 NgRx 库来管理应用程序的状态。这是在客户端管理应用程序状态的正确方法吗？

还有第二个问题是确保在连接丢失时无法发出的请求在连接恢复时发出。所以我想知道：是否可以使用一种工具来对请求进行排队并在连接恢复时重新运行它们？我有渐进式 Web 应用程序和服务工作者的概念，但只有概念（就像我知道服务工作者可用于缓存与服务器交换的数据），我想知道这是否是解决此问题的方法？

我在等待你对我的帖子的评论。我希望它不会太长。提前致谢。

Answer 1

\n

此外，由于状态/数据保存在客户端，因此我不必向后端发出第二个请求以从 id 获取实体，因为该实体位于客户端

\n

\n\n

这完全取决于你对 BE 的信任程度。如果由于某种原因发生错误（令牌过期/注销？数据在另一个客户端上更新？），这种方法可能会变得更加复杂。

\n\n

\n

是否有可能从第一个设计转向第二个设计？如果可以，可以使用什么技术？

\n

\n\n

您可以将您的应用程序设为 PWA 并使用Service Worker。我在这里找到了一个很好的指南。如果博客出现故障，它会通过缓存中的资源和字体ngsw-config.json，然后触及 API 缓存。最终结果可能如下所示：

\n\n

{\n  "$schema": "./node_modules/@angular/service-worker/config/schema.json",\n  "index": "/index.html",\n  "assetGroups": [\n    {\n      "name": "app",\n      "installMode": "prefetch",\n      "resources": {\n        "files": [\n          "/favicon.ico",\n          "/index.html",\n          "/manifest.webmanifest",\n          "/*.css",\n          "/*.js"\n        ]\n      }\n    }, {\n      "name": "assets",\n      "installMode": "lazy",\n      "updateMode": "prefetch",\n      "resources": {\n        "files": [\n          "/assets/**",\n          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"\n        ]\n      }\n    }\n  ],\n  "dataGroups": [{\n    "name": "api-freshness",\n    "urls": [\n      "/timeline"\n    ],\n    "cacheConfig": {\n      "strategy": "freshness",\n      "maxSize": 100,\n      "maxAge": "3d",\n      "timeout": "10s"\n    }\n  },\n    {\n      "name": "api-performance",\n      "urls": [\n        "/favorites"\n      ],\n      "cacheConfig": {\n        "strategy": "performance",\n        "maxSize": 100,\n        "maxAge": "3d"\n      }\n    }\n  ]\n}\n

\n\n

“对于网络优先策略，它\xe2\x80\x99s新鲜度，对于缓存优先\xe2\x80\x94性能”

\n\n

\n

这是在客户端管理应用程序状态的正确方法吗？

\n

\n\n

您可以使用 NgRx 缓存您的应用数据，但您需要确保缓存始终是最新的。理想情况下，您使用一些 websocket 来检测 BE 更改，但您也可以进行轮询。

\n\n

然而，如果您需要的只是离线功能，PWA 感觉是您的最佳选择。

\n\n

\n

是否可以使用能够对请求进行排队并在连接恢复时重新运行它们的工具？

\n

\n\n

此功能称为后台同步，是 Service Worker 的一项功能。话虽这么说，我发现了这个悬而未决的问题。你可以尝试这个，但感觉像是一个黑客。 \n如果由我决定，我会创建一个可观察数组，当连接恢复时会调用这些数组，直到有更好的 pwa 支持为止

\n