Clever Geek Handbook

本番環境でのPWAの更新

ServiceWorkerをインストールしたら、ドメインを変更する時が来たという冗談を聞いたことがありますか？ここで、その意味と、PWAが必要であると判断した場合の対処方法について説明します。





このまたはこのServiceWorkerのタイプとその操作方法に関する指示にはほとんど注意が払われていません。そして、このような記事は、使用する前に最初に読むものだと確信しています。しかし、そのような記事の後、焼きたてのPWAがようやく本番環境に登場し、ユーザーがデスクトップに別のアイコンを追加する機会を得た瞬間、あなたが戻ってこないポイントを過ぎたことを知っています。





あなたの許可を得て、私はService Worker（以下、SW）の説明とその仕組みについては詳しく説明しません。Habréはすでにこれについての良い記事を持っています。具体的にどのSWを使用しているかは関係ありません。create-react-appを使用している可能性があります。これは、WorkboxライブラリがSWを担当していることを意味します。おそらく、いくつかのトリッキーなキャッシュ戦略を使用して、SWを自分で実装しました。スタックはそれほど重要ではありません。同じCRAドキュメントには、必要なのは1行を変更して、アプリのような動作のすべての喜びを得るだけであると書かれています。あなたは書い.register()



て結果を期待しています。そして、あなたはそれを手に入れるでしょう。





次に不満を持っている顧客から、このオレンジ色のボタンの色を変更するか、最終的にフライングフォーカスのバグを解決するように求められたとき、驚くべき状況に陥ることになります。リポジトリに修正プログラムがあり、コンテナがアセンブルされており、nginxは確実に最新バージョンを配布していますが、クライアントは何らかの理由でまだ不満を持っています。そうそう、私たちは今PWAです。





-ページを更新してください。どうして役に立たないのですか？CTRL + Rの場合はどうなりますか？





それで、必死のページ更新が役に立たず、クライアントがまだモックのオレンジ色のボタンを見ている場合はどうすればよいですか？





SWはデスクトップアプリケーションのように動作しようとすることを覚えておくことが重要です。





デスクトップアプリケーションがどのように更新されるかを覚えておきましょう。新しいインストーラーをダウンロードし、古いバージョンを削除して、再インストールします。のみ、その後、ユーザは、アプリケーションの新しいバージョンを受け取ります。





SW.





SW : installing, waiting active. Active - , SW. installing waiting SW active. installing SW , . waiting , SW ( ). .





SW, , - . SW , . . , . , .





, , "". , SW : , , , . , SW . , .





SW installing, waiting active. - . , .





, , .





№1: SW

( ) - SW. SW skipWaiting()



, . SW . "" .

: , . , skipWaiting()



, , .





№2: SW

, . navigator.serviceWorker



controllerchange



, SW . installing.

skipWaiting()



, . :





navigator.serviceWorker.addEventListener('controllerchange',  ()  => window.location.reload());

SW , .

, , . , , . .





№3:

, , SW , - - .





controllerchange



, , , .

, SW, ServiceWorkerRegistration



. .register()



, . API . , update()



, SW . , .





(active) SW navigator.serviceWorker.controller



active . (waiting) (installing) SW.





SW postMessage()



, iframe , API. SW . SW. 





addEventListener('message', ev => {  
  if (ev.data === 'skipWaiting') return skipWaiting();
});

Workbox CRA, .





次に、待機中のSWの外観を追跡する必要があります。私の意見では、一部のガイドに記載されているように、インストールステータスでSWに毎回反応するのではなく、SW登録オブジェクトがフィールドでtrueを返すまで待つ方がよいと思いますwaiting



。これにより、更新が遅くなりますが、SWを初めてインストールしたときにモーダルがトリガーされません。





保留中のSWを待った後、ユーザーが更新を確認できるモーダルウィンドウを呼び出します。確認後、skipWaiting()



上記のように呼び出して強制的にページをリロードします。障害が発生した場合、更新は延期されます。私の場合のコードは次のようになります。





//   
const askUserToUpdate = reg => {
  return Modal.confirm({
    onOk: async () => {
      //    
      navigator.serviceWorker.addEventListener('controllerchange', () => {
        window.location.reload();
      });

      //   
      if (reg && reg.waiting) {
        reg.waiting.postMessage({ type: 'SKIP_WAITING' });
      }
    },

    onCancel: () => {
      Modal.destroyAll();
    },
    icon: null,
    title: ' !






More articles:


All Articles