2019-07-18 3分 read (About 484 words)

iosのPWAでキャッシュを削除する方法

はじめに

ios の PWA のキャッシュって全然消えなくないですか？？？
まあそれが PWA の良いところだとは思うんですけどせっかくコンテンツを新しくしてもそれがユーザが検知できないのは良くないですよね。

pwaの導入方法(ios, android)

基本的にはこれで OK
PWA 導入までの 3 ステップと、簡単なオフライン対応まで
なんだけど実はこれだけだと ios だとアイコンが反映されない

なので解決策として index.html に以下の行を追加すれば OK

<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script
  async
  src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.9/pwacompat.min.js"
  integrity="sha384-VcI6S+HIsE80FVM1jgbd6WDFhzKYA0PecD/LcIyMQpT4fMJdijBh0I7Iblaacawc"
  crossorigin="anonymous"
></script>

なんか google 様が ios 用にいい感じに色々してくれてるらしい。
神かよ

あとアイコン画像は１枚用意すれば後は
Web App Manifest Generator
で複数サイズ一気に作成できるから便利

参考
初心者がつまづいた、PWA アプリ Safari 版でホームボタンのアイコンが読み込まれない件
 PWACompat: the Web App Manifest for all browsers

以上

reon777

システムエンジニア

福岡県北九州市

投稿

176

カテゴリ

0

タグ

43

iosのPWAでキャッシュを削除する方法

はじめに

pwaの導入方法(ios, android)

タグクラウド

アーカイブ

タグ

アーカイブ

タグ

Your browser is out-of-date!