【Vue.js】PWAでプリキャッシュ・ランタイムキャッシュを使いオフライン対応

2019/09/08

今回は、PWA化したアプリをオフライン対応するために、プリキャッシュ（PreCache）とランタイムキャッシュ（RuntimeCache）を設定します。
「所得税・住民税・事業税・国保の計算シミュレーション」では、Google Apps Scriptを使いGoogleSpreadSheetをデータベースの代わりに使ってます。ただ、速度があまり出ないのでここにキャッシュを組み込むことでレスポンスを向上させることが一番の目的です。オフラインでも使えるようになりますし。

PWA化した記事から3ヵ月もたってしまいましたが、やっと検証も終わったので、「所得税・住民税・事業税・国保の計算シミュレーション」も入れ替えることができました。

【シミュレーション】所得税・住民税・事業税・国保の計算【フリーランス】

収入と経費を入力するだけで自動計算します。（国民健康保険料（国保）はちょっとだけ追加で操作・入力 ...

https://kawadev.net/calc-tax-insurance/

Contents

1. 環境
2. プリキャッシュとランタイムキャッシュの違い
- 2.1. プリキャッシュ(PreCash)
- 2.2. ランタイムキャッシュ(RuntimeCache)
3. プリキャッシュ(PreCash)の導入
- 3.1. 動作確認
4. ランタイムキャッシュ(RuntimeCache)の導入
- 4.1. handlerの種類
- 4.2. 動作確認
5. まとめ
6. 所得税・住民税・事業税・国保の計算のバージョンアップ
- 6.1. 東京都

環境

Windows 10 Pro
vue cli 3
Node 12.8
@vue/cli-plugin-pwa

プリキャッシュとランタイムキャッシュの違い

プリキャッシュ(PreCash)

アプリのアセット（js,css,imageなど）をキャッシュする際はこちらを利用します。
こちらはあくまでも、アプリのドメインと一緒の場所に配置しているものが対象です。

ランタイムキャッシュ(RuntimeCache)

サードパーティ製のJSやCSSをキャッシュしたい場合や、APIへのリクエストをキャッシュしたい場合はRuntimeCacheを使います。
CDNで参照しているJS・CSSをキャッシュする場合は、プリキャッシュではなくランタイムキャッシュを使用しなければいけません。

プリキャッシュ(PreCash)の導入

@vue/cli-plugin-pwaでPWAを導入したのであれば、とくに設定しなくても自動でキャッシュしてくれます。

必要であれば、ファイルパターンを指定してあげれば良いみたい。
前回の記事からの続きですので、workboxのGenerateSWで進めていきます。

vue.config.js

module.exports = {
  …
  configureWebpack: config => {
    config.plugins.push(
      new GenerateSW({
        cacheId: 'calc-tax-insurance-v3',
        // vue/cli-plugin-pwaを使ってれば不要
        // globPatterns: ['dist/*.{js,png,html,css}']
      })
    )
  }

動作確認

プリキャッシュ無し

当たり前ですがネットワークから取得されてます。

プリキャッシュあり

size部がServiceWorker表示に切り替わりました。

Applicatin-Cache Storageで、precacheされているファイルが確認できます。

オフラインでどうなるか試してみます。
Chromeのデベロッパーツールで、オフラインへの切り替えもできるので、テストも簡単です。

Application-Service Workers内に、Offrine切り替え用の設定があるのでチェックを入れることでオフラインになります。

画面をリロードしてみます。(disc cacheから読まないようにCtrl+F5でスーパーリロードします)

画面切り変わりの一瞬だけChromeのオフライン画面が表示されましたが、アプリの画面が崩れず表示されました。
ネットワークを確認してみると、Service Workerから読み込まれているのが確認できました。問題ないですね！

ランタイムキャッシュ(RuntimeCache)の導入

プリキャッシュの次は、ランタイムキャッシュを組み込みます。
一番の目的は、国保や所得税率の読み込みを行っているのAPI部です。

GenerateSWのruntimeCachingオプションで設定します。

vue.config.js

module.exports = {
  …
  configureWebpack: config => {
    config.plugins.push(
      new GenerateSW({
        cacheId: 'calc-tax-insurance-v3',
        runtimeCaching: [{
          urlPattern: /^https:\/\/script\.google\.com\/macros\/s\/xxxxxxxxxx\/exec/,
          handler: 'staleWhileRevalidate',
          options: {
            cacheName: 'api',
            expiration: {
              maxEntries: 20,
              maxAgeSeconds: 60 * 60 * 24 * 30
            },
            cacheableResponse: {
              statuses: [0, 200]
            }
          }
        }]
      })
    )
  }
}

urlPattern: APIのURLのパターンを指定します。(GASのURL)
handler: キャッシュ戦略。一番重要な部分です。ちなみにstaleWhileRevalidateは、キャッシュから読み込むけど次回用にバックグラウンドで最新を取得しておくという動きになります。
options.cacheName: キャッシュする際のきーとなるもので、他と被らないIDにします。
options.expiration: キャッシュの有効期限。適切に設定しておかないと後で痛い目見ますのできちんと設定しておきます。
options.cacheableResponse.statuses: ここで指定したhttp statusのリクエストをキャッシュします。

cacheableResponse.statusesは、外部js等をキャッシュする場合は指定しておかないといけないみたいです。
試してませんが、404とかがキャッシュされても困るので、きちんと設定しておいた方が無難そう。。

handlerの種類

cacheFirst: キャッシュになければネットワークから取得。
cacheOnly: 動きとしてはcacheFirstになるようですが、インストール時に必ずキャッシュされるものはこちらを選ぶのが良いとのこと。キャッシュにないという状態がないもの。
networkFirst: ネットワークから取得できなければキャッシュを使用。
networkOnly: 常にネットワークから取得。キャッシュされては困るものはこちら。
staleWhileRevalidate：ページ表示時はキャッシュから取得し、裏側でネットワークから最新を取得。