ネットワーク依存のWebアプリからネットワーク非依存のWebアプリへ

私はフルスタックのWeb開発者であり、現在は主に角のようなフロントエンドフレームワークとスプリングブートのようなバックエンドフレームワークを使用して単一ページアプリを構築しています。

通常、私のWebアプリの設計（CRUDだとしましょう）は次のとおりです。更新ページにいて、エンティティを更新するとします。次に、データベース内のエンティティを更新するリクエストがバックエンドに送信されます。バックエンドが応答してすべてが問題ないことを通知すると、エンティティは更新されました（ステータスコード200）次のページに進みます。これはentityName/{id}、エンティティのIDをURLを介して次のページに渡す場所など、URLを含む読み取りページです。次に、読み取りページでそのIDを取得し、バックエンドにリクエストを送信し、エンティティデータを取得して表示します。

この問題は、ユーザーがインターネットへの接続を失ったときに発生するため、バックエンドへのリクエストを実行できず、その結果、データをUIに表示したり、更新したりできません。

他のデザインはこれです：私は更新ページにいて、エンティティを更新します。リクエストはバックエンドに対して行われますが、状態もクライアント側で保持されています。したがって、接続が失われたとしましょう。読み取りページに移動して、更新されたエンティティを表示できます。さらに、状態/データはクライアント側に保持されるため、エンティティがクライアント側に存在するため、IDからエンティティを取得するためにバックエンドに2番目のリクエストを行う必要はありません。ユーザーがアプリに費やした時間の間に接続が回復し、更新要求がサーバーに対して行われ、データベースとクライアント側のデータが同期されます。

UIは、バックエンドに送信された情報を表示するための要求にあまり依存しないため、2番目の方法の方がユーザーにとって便利であるように思えます。

最初のアプローチが使用されていることはよく知っています。私はこのように開発しているので、私の質問は次のとおりです。最初の設計から2番目の設計に移行することは可能ですか。

2番目の設計を実装するには、サービスを使用してコンポーネント間でデータを共有します（angularで実装する場合）。このようにして、アプリの状態をクライアント側で保持できます。しかし、もっと良い方法があるかもしれません。アプリケーションの状態を管理するNgRxライブラリについて聞いたことがあります。クライアント側でアプリケーションの状態を管理するのに正しい方法ですか？

また、接続が失われたときに作成できなかった要求が、接続が戻ったときに作成されることを確認するという2番目の問題もあります。そして私は疑問に思います：接続が戻ったときに要求をキューに入れて再実行できるツールを使用することは可能ですか？プログレッシブウェブアプリとService Workerの概念はありますが（Service Workerを使用してサーバーと交換されるデータをキャッシュできることを知っているような）概念しかありません。それがこの問題を解決する方法かどうか疑問に思いますか？

私の投稿に対するあなたのコメントを待っています。それが長すぎないことを願っています。前もって感謝します。

さらに、状態/データはクライアント側に保持されるため、エンティティがクライアント側に存在するため、IDからエンティティを取得するためにバックエンドにその2番目のリクエストを行う必要はありません

これは、BEをどれだけ信頼できるかに完全に依存します。何らかの理由でエラーが発生した場合（期限切れのトークン/サインアウトしたか？別のクライアントでデータが更新されたか？）、このアプローチは非常に複雑になる可能性があります。

最初のデザインから2番目のデザインに移行することは可能ですか？

潜在的には、アプリをPWAにしてService Workerを使用できます。私はここでこれのための良いガイドを見つけました。ブログがダウンした場合、ブログはでのアセットとフォントのキャッシュを通過しngsw-config.json、次にAPIキャッシュを修正します。最終的な結果は次のようになります。

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

「ネットワークファーストの戦略では、キャッシュファーストのパフォーマンスが新鮮です。」

クライアント側でアプリケーションの状態を管理するのに正しい方法ですか？

NgRxを使用してアプリデータをキャッシュできますが、キャッシュが常に最新であることを確認する必要があります。理想的には、BEの変更を検出するためにいくつかのWebソケットを使用しますが、ポーリングを実行することもできます。

ただし、必要なのがオフライン機能だけである場合、PWAは適切な方法です。

リクエストをキューに入れ、接続が回復したときに再実行できるツールを使用できますか？

この機能はバックグラウンド同期と呼ばれ、Service Workerの機能です。そうは言っても、私はそれにこの未解決の問題を見つけました。あなたはこれを試すことができますが、それはハックのように感じます。それが私次第である場合、接続が戻ってきたときに呼び出されるオブザーバブルの配列を作成します。