One IT Thing

IT業界で飯を食う為の学習系雑記

html5 ionic プチハマリ解決日記

キャッシュされているはずの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, プチハマリ解決日記
-, ,

執筆者:

関連記事

Angularのテンプレート評価式にビット演算を使うとTemplate parse errorが発生する

AngularのテンプレートHTMLでビット演算をすることは禁じられているので代替手段を考えます。 目次1 事象2 原因3 対処 事象 CSSクラスをビット演算で切り替えるテンプレートを書きました。c …

ERROR: Several keys given – pgcrypto does not handle keyring、またはERROR: Corrupt ascii-armor

gpgキーストアに同じUIDで複数の鍵ペアを登録してしまうと、ファイルにexportした際に1ファイルに複数の鍵情報が入ってしまい、1ファイル1鍵を期待しているpgcryptoに怒られます。 目次1 …

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

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

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

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

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  4 twe …

 

shingo.7k24
 

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

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

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