web-dev-qa-db-ja.com

Safariでの新しいリリースの後、私のPWA Webアプリは古いバージョンを表示し続けます（ただし、Chromeでは正常に動作します）。

Angular 5.に基づいてPWAとサービスワーカーを既存のWebアプリに追加しました。最初のリリースではすべてが正常に見えます。ただし、更新プログラムをリリースしようとすると、奇妙なことが起こります。

Chromeを使用するPCでは、問題はありません。リリースごとに、新しいバージョンに更新するように警告するアラートを受け取りました。これは素晴らしいことです。

ただし、このアラートはiOSでは欠落しています。これはおそらく、iOSが自動更新をまだサポートしていないためです。 iOSでChromeを使用すると、手動で更新した後に新しいバージョンを取得できます（場合によっては数回更新する必要があります）。しかし、Safariブラウザーは通常新しいバージョンを表示しません。ページを更新し続けると、最終的に新しいバージョンが表示されますが、閉じて再度開くと元に戻ります。遊びながら、新しいバージョンにアクセスする唯一の方法は、最初にSafariキャッシュを手動でクリアすることです。通常のユーザーに受け入れられます。

IOSではPWAのサポートが制限されていることを理解していますが、これがiOSで得られるものの中で最も多いのでしょうか？自動更新がなければ、iOSユーザーはどのようにして新しいリリースを知り、それを更新できますか？

iossafariservice-workerpwa
10
newman

私は答えを見つけて投稿しました here ですが、繰り返します：

数週間と数週間の検索の後、私は最終的に解決策を見つけました：

  1. サーバーにバージョン文字列のチェックを追加し、アプリに返します。

  2. Localtstorage（IndexedDB）で検索し、見つからない場合は追加します。見つかった場合はバージョンを比較し、サーバー上に新しいバージョンがある場合はダイアログを表示します。

  3. このダイアログを閉じると（ボタンに「更新」というラベルが付けられます）、window.location.reload(true)が実行され、新しいバージョン文字列がlocalstorageに保存されます

出来上がり！アプリが更新されました！私はそれがこんなに簡単なものになったとは信じられません。どこにも解決策が見つかりませんでした。お役に立てれば。

2019年9月の更新：

上記の手法にはいくつかの問題がありました。特に、PWAサービスワーカーメカニズムをバイパスし、リロードによって新しいコンテンツがすぐに読み込まれないことがありました（現在のSWではページが解放されないため）。すべてのプラットフォームで動作するように見えるこれに対する新しいソリューションがあります：

_forceSWupdate () {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations().then(function (registrations) {
      for (let registration of registrations) {
        registration.update()
      }
    })
  }
}
_

そして、サービスワーカー内で、更新がある場合はダイアログを表示し、そこからlocation.reload(true)を実行します。これにより、常にアプリがすぐに更新されます（skipWaitingおよびclientsClaimディレクティブを登録に追加したという重要な注意事項があります）。

これはすべてのプラットフォームで同じように機能し、プログラムで更新を確認するか、サービスワーカーがそれを行うのを待つことができます（ただし、確認する時間はプラットフォーム、デバイス、その他の不明な要因によって大きく異なります。通常は24以下何時間も。）

11
Stephen