Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

スクリーンショット 2019-08-08 15.02.52.png

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

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

スクリーンショット 2019-08-08 14.54.19.png

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

$ amplify function add

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


$ amplify api add

// lambda functionを選択

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

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

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

終わりに

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

yukitaka13-1110
Web ・Vue, React, Phoenix(Elixir) / Serverless / Single Page Application (SPA) / Progressive Web Application (PWA) 機械学習 ・転移学習 / Fine-tuninig / 物体検知 / Tracking / 画像処理 / 自然言語処理 (NLP)
https://github.com/yukitaka13-1110
quando
未来に向かって行動する「人」を育て、旧態産業を新しい「産業」に生まれ変わらせます。
http://quando.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away