html5 ionic issue closed

キャッシュされているはずのServiceWorker資源にオフラインアクセス出来ない(Workbox + ionicons)

投稿日:2019年12月8日 更新日:

そのHTTPリクエストしたファイル資源、ひょっとしてURLパラメータついてたりしませんか?

事象

ionic3(SPA)でWorkboxを使ったServiceWorkerキャッシュを行ったが、オフラインだとキャッシュされているはずのioniconsアイコンが表示されない。

(左)オンライン (右)オフライン。ネットワークが繋がっていないと、HOME左のハンバーガーアイコンが表示されません。

(*)オフラインの再現はChromeデベロッパーツールで以下の設定を行っています。

ブラウザのcacheストレージにはionicons周りの資源(eot、svg、ttf、woff2、woff)はキャッシュされている状態。

オフライン時のネットワークを見てみるとionicons周りだけServiceWorkerキャッシュから取れていません。

原因

ionic側からは「v=3.0.0-alpha.3」URLパラメータを付けてionicons.woff2などを取りに行っているが、キャッシュした資源の名前にはそんなURLパラメータは付いていない為。

対処

WorkboxのServiceWorkerが資源を取りに行く際、URLパラメータを無視するオプションがあるのでそれを使用してリクエストにv=パラメータがある場合は切り取るようにします。

workbox-cli設定jsに以下を追加。

module.exports = {

    (snip)

    // ionicons対応(リクエスト時のURLパラメータを除外)
    ignoreURLParametersMatching: [/^v$/],

またはWorkboxのServiceWorker定義JSで直接以下を追加。

workbox.precaching.precacheAndRoute(self.__precacheManifest, {
  "ignoreURLParametersMatching": [/^v$/]   <- 追加
});

これで「ionicons.woff2?v=3.0.0-alpha.3」ではなく「ionicons.woff2」でキャッシュリクエストが走り、オフラインでもioniconsが表示されるようになります。

(この件でハマった orz)Workboxの設定詳細はこちらから。

-html5, ionic, issue closed
-, ,

執筆者:

関連記事

git push時に「error: RPC failed; result=22, HTTP code = 501」エラー

目次1 事象2 原因3 対処 事象 オンプレGitLabへのgit push時に掲題のエラーが発生してpushに失敗します。 原因 git push時の1ファイル最大サイズは1Mbyteの為。 git …

IndexedDBにストアしたオブジェクトのキー値を部分的に更新する

目次1 はじめに2 課題3 より良い方法4 まとめ5 補足 はじめに IndexedDBは「key : value」でレコードを保存するキーバリューストアです。 バリューには「単値」または「Javas …

Typescript3.0以下の環境で発生する「Cannot find name ‘unknown’」に対処する

目次1 事象2 原因3 対処4 まとめ 事象 Typescript2.3.4を使っている息の長いWebシステムでnpm installをし直し、tscビルドし直したらトランスパイルエラーが発生。「un …

ローカルネットワーク内のHTTP通信が2回に1回交互にタイムアウトするようになった原因

目次1 事象2 調査3 解決4 その後 事象 ある日突然、オフィスのローカル開発環境でHTTP通信が異常なほど遅くなり、タイムアウトするようになりました。 その後F5でリロードすると普通にレスポンスが …

ブラウザから起動したカメラの撮影画像をjavascriptで圧縮【Compressor.js】

「モバイル用Webアプリで撮影したカメラ画像のファイルサイズが大きすぎる・・・」 そんな悩みは無いですか? 昨今カメラ会社の経営が傾くほどスマホのカメラ性能が向上、それに応じて年々ファイルサイズも増大 …

 

shingo.nakanishi
 

東京在勤、職歴2n年中年ITエンジニアです。まだ開発現場で頑張っています。

19歳(1996年)から書き始めたアウトプット用プライベートWeb日記数が5,000日を超え、残りの人生は発信をして行きたいと思い、令和元日からこのサイトを開始しました。勉強と試行錯誤をしながら、自分が経験したIT関連情報を投稿しています。

私と同じく、今後IT業界で生計を立てて行きたいと考えている方や、技術共有したいけど仲間が居なくて孤独、といった方と一緒に成長、知識共有して行けたら楽しいな、と思っています。