[Vue.js] iOS Safari のPWAを常に最新の状態に保つようにする [Amplify]

3187 ワード
JavaScript iOS PWA amplify Vue.js JavaScript テキストリンク

iOS Safari の PWA のキャッシュが強すぎる

キャッシュが強いというよりはリロードをしてくれないので変更を検知してくれません
（2019/08現在）

外からどうにかすることができないので中からなんとかするかSafariのUpdateを待つしかありません。

中から強制的にリロードする

window.location.reload(true)

これを使えば内部でリロードを発生させることが可能。
setIntervalと組み合わせて1日毎にリロードさせるコードをApp.vueに記述することで一応実現可能

App.vue
created () {
    setInterval(() => {
      window.location.reload(true)
    }, 24*60*60*1000)
  }

デプロイされた時だけリロードする

毎日リロードすると新しいバージョンはロードされるが、

  • いらないリロードが発生してしまう
  • Intervalの分だけ反映が遅れてしまう

という欠点がある。

なので新しいバージョンがデプロイ成功時のみ反映するようにしたい

Amplify Consoleのメール通知機能

現在、Amplify Consoleを用いてデプロイしています。
そこで何かしらデプロイ情報と紐付けられるものがないかと探してみたところ、メール通知機能があることに気付きました。
デプロイ成功時にあらかじめ登録しておいたメールアドレスに送信されるようになっています。

アプリケーション側で受信メールを監視する仕組みがあれば必要な時にだけリロードすることを実現できます。

構成は以下の図の通りです。

詳しくは書きませんが流れとしては

$ amplify function add

// 適当にfunctionを作成
// Expressを使って実装


$ amplify api add

// lambda functionを選択

LambdaではExpressを使ってAPI実装
それをAmplify側で叩けるようにAPIを追加する

これと同じようなことを以下のサイトでやられているのでそちらを参考にしてもらえると有り難いです。
余裕があれば書こうと思っています。

[DevelopersIO] Amplify で お問い合わせフォーム を作ってみた

終わりに

9月頃には完全に対応するという噂があるのでそれを期待しましょう
もっとスマートに実現できるよ！とかそもそも可能だよって場合は教えていただけると嬉しいです！