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
-, ,

執筆者:

関連記事

B2BスマホアプリをGooglePlay、AppStoreに公開することを安易にお勧め出来ない7つの理由とその対策

商材の性質やシーンに応じてスマホアプリをGooglePlayやAppleStoreのようなストアに公開することがマイナスに働くこともあります。 商材として価値の有る電子データをお持ちの商社さんとアプリ …

ionic-cli 5からcordovaを使ったハイブリッドアプリプロジェクトの作成方法が変わった

久しぶりにハイブリッドアプリを作ろう、ついでにionicとcordovaも最新にしよう。と作業を開始したら今までの手順と違って若干困惑した話です。 プロジェクト新規作成時にcordovaを使うか聞かれ …

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

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

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

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

Android、iPhoneが向いている方向をWeb地図上で表現してみる(leaflet.js使用)

前回Javascriptでコンパス機能を実装して、Android、iPhoneの背面が向いている方角が数値(0~360:0が北)で分かるようになりました。 One IT Thing  9 P …

 

shingo.nakanishi
 

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