html5 ionic trouble shooting

キャッシュされているはずの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, trouble shooting
-, ,

執筆者:

関連記事

org.apache.poi.ooxml.POIXMLException: Strict OOXML isn’t currently supported, please see bug #57699

目次1 事象2 原因3 対処4 まとめ 事象 以下のExcelファイルをApache POIで読み込んだ際に発生。 mojikiban.ipa.go.jp  5 Tweets 4 Users …

Metabaseの登録データベース削除時に入力を求められて消せない

分析対象として登録したデータベースを一覧から削除する際に入力値を求められ、何を入れていいか分からずプチはまりました。 結論から述べると入力する文字は「delete」でした。 事象 Metabase(v …

Chrome75に実装された「Web Share API Level 2」を使ってみた

(2019/06現在、個人的な感想としては実戦投入はまだ早い印象でした) Webアプリにシェア機能を付けたい時があります。OSネイティブAPIを呼べないWebアプリではsharer.jsやremote …

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

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

Javascriptでコンパスを作ってAndroid、iPhoneが向いている方角を特定

普段は意識しなくても、AndroidもiPhoneも自然データをデジタルに変換するセンサーの塊です。 加速度センサー重力センサージャイロセンサー地磁気センサー気圧センサー照度センサー温度センサー位置セ …

 

shingo.nakanishi
 

東京在勤、1977年生まれ、IT職歴2n年、生涯技術者として楽しく生きることを目指しています。デスマに負けず健康第一。