web-dev-qa-db-ja.com

シングルページアプリケーションでアプリケーションのバージョン変更を検出する

今日、ここで質問が出されましたが、明確な答えはありません。

すべてのリソースファイル(CSSとJavascript)を連結して縮小し、「マスターページ」で宣言するとします。

複数ページのアプリでは、CSSファイルが変更されると、次のフルページの読み込み時に再充電されます。

シングルページアプリでは、ユーザーは何日も作業を続けることができ、CSSファイルが宣言されているメインページを再充電することはありません。 Ctrl-F5が発行されるまで、ユーザーには変更が表示されません。

私は誰かがすでにこれを考えていて、共有する経験を持っていると確信しています:)

私にとって、WebSocketを使用することはオプションではありません。 1つ目はやり過ぎであり、2つ目はすべてのクライアントがテクノロジーをサポートしているわけではないためです。同じ理由がすべてのWebSocketフォールバックに当てはまります...このため、サーバーにアクセスし続けることはありません。

だから、誰かアイデアはありますか? :)

ところで、特定のソリューションに役立つ場合は、AngularJSを使用しています。

ありがとう!

29
AlexCode

私はこれと同じ問題を乗り越えてきました。意見が分かれており、あなたの基準に応答しない可能性がある私の解決策:

フロントアプリとサーバーアプリをパッケージ化するとき、フロントアプリの現在のバージョンを含む構成ファイルを共有します。

フロントサイド:ルート変更の75%が暗黙的にWebサービスを呼び出します(ルート変更解決)。 SOサーバーを呼び出すたびに、フロントアプリのクライアントバージョンを含むカスタムHTTPヘッダー(またはGET/POSTパラメーター)を含めます。

サーバー側:フロントアプリバージョン(ユーザーのブラウザーにあるもので、ユーザーが最後にSPAを更新/ロードしたときにロードされたもの)を共有構成ファイルのフロントアプリバージョンと比較します:

  • バージョンが一致する場合:私は何もしません。
  • バージョンが一致しない場合は、カスタムHTTPステータスエラーコード(418など)を送信します

次にフロントサイド:418エラーコードをインターセプトしてアプリ全体の強制更新を行う応答インターセプターを追加しました

それでおしまい。基本的に、フロントアプリのバージョンが最新であるかどうかを「チェック」するイベントは、ルート変更です(ajax経由でWSを呼び出します)。ただし、5分ごとに専用のWSを呼び出す無限の$ intervalを追加することもできます...必要に応じてコードを追加できます。

お役に立てれば ;)

28
Cétia

$ routeサービスとプロバイダーを介したAngularJSのルーティングを使用しているとすると、変更が必要な重要な変更がある場合は、_$routeChangeSuccess_イベントを使用してサーバーリクエストを実行できます。存在する場合は、window.location.reload()を実行してページを更新し、更新されたすべてのリソースとhtmlを取得できます。

次のプロセスは、実装方法に応じて変更できます。

1。アプリのバージョンを示す構成ファイルをサーバーにセットアップします。ファイルごとに異なるバージョンを割り当てることもできますが、すべてのリソースファイルを連結しているため、構成でバージョンオプションを制限することができます。

2。必要なすべての情報(サーバーからのファイルのバージョン)と、サーバーへのサーバー要求を実行してサービスに保存されている現在のファイルバージョンと照合するメソッドを含むサービスを作成します。

3$ routeChangeSuccess イベントを使用して、ステップ2で作成したサービスを使用してサーバー要求を実行します(要求が変更があったことを確認してから、window.location.reload()を介してページを強制的に再読み込みします。

2
ryeballar

私はここにも答えとして私の最終的な考えを追加することにしました:

今のところ、削減されたソリューションを選びました。

このアプリケーションと対話するのは(今のところ)唯一の「プロキシサービス」であるため、すべての応答のhttpヘッダーにアプリケーションバージョンを追加しました。新しいバージョンを受け取ると、ユーザーに通知するポップアップが表示され、ページ全体が更新されます...

このソリューションは、独自の「プライベート」サービスを持たないアプリケーションでは機能しません。

1
AlexCode