web-dev-qa-db-ja.com

iOSでPWAを自動更新する（またはキャッシュをクリアする）方法はありますか？

私はiOSでAndroidで簡単に機能するものと格闘してきました。新しいバージョンがある場合にPWAを自動更新することです。私はこれがiOSでさえ可能であるとは全く確信していません。私はvue.jsとQuasarを使用してアプリをビルドしましたが、すべてAndroidでそのまま使用できます。以下は、現在iOSバージョンでの状況が（醜く、ひどい）ものである方法です：

  1. 自分のサーバーのバージョンをチェックして、自分のアプリ（indexedDB）に保存されている現在のサーバーと比較して、新しいバージョンがあることを通知することができます。ここまでは順調ですね。
  2. ユーザーに手動でサファリキャッシュをクリア（!!）させる以外に、アプリからPWAキャッシュをプログラムでクリアする方法や、別の方法で強制的にアップロードする方法を理解する方法はありません。

したがって、この時点で私の質問は次のとおりだと思います。

  1. 新しいバージョンが利用可能になったときに、誰かがiOS（11.3以降）のPWAを自動更新できるようになりましたか？
  2. PWA内から（Safari）アプリのキャッシュをクリアする方法はありますか？

更新するために、アプリの外でいくつかの手順を実行して更新する必要があることをユーザーに通知することは、信じられないほどひどいユーザーエクスペリエンスですが、何かを見逃していない限り、iOSが現時点で立っているようです。誰かがこの仕事をしたことがありますか？

iosvue.jsprogressive-web-appsquasar-framework
8
Stephen

何週間も何週間も検索した後、ようやく解決策を見つけました。

  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()
      }
    })
  }
}
_

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

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

18
Stephen