VueとPWAで作ったサイトのキャッシュを新しいファイルがあった場合に自動更新したい

Question

前提・実現したいこと

現在、Vueにて作成したサイトをapacheで配信しています。Vue CLI3の初期設定にてPWAを有効にし、「production」としてbuildした後のフォルダをapacheで配信するという設計です。
今回、サイトをアップデートすることになり、viewを書き換えて再びbuildを行いました。しかし、一度サイトにアクセスしているユーザーのブラウザには前回のjsやcssが残っているため、ブラウザにてキャッシュを削除しないと新しいviewに変更されません。

• 現在キャッシュされているjs等のファイルが更新されていた時に、再キャッシュ
• package.jsonのversionを参照して上がっていた場合再キャッシュ

等の設定がVueCLI3にて作成したWebアプリケーションでできないか探しています。

PWAの設定

Vue CLI3にてPWAを有効にした時に作成されるregisterServiceWorker.jsは編集していません。

/* eslint-disable no-console */

import { register } from 'register-service-worker';

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log(
        'App is being served from cache by a service worker.\n'
        + 'For more details, visit https://goo.gl/AFskqB',
      );
    },
    registered() {
      console.log('Service worker has been registered.');
    },
    cached() {
      console.log('Content has been cached for offline use.');
    },
    updatefound() {
      console.log('New content is downloading.');
    },
    updated() {
      console.log('New content is available; please refresh.');
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.');
    },
    error(error) {
      console.error('Error during service worker registration:', error);
    },
  });
}

環境毎に検証

現在、PCのchrome、safari、iPhoneのChrome、Safari、Google検索にて確認を行いましたが、
iPhoneのSafariだけ、更新がされないようです。

Answer 1

iOS Safariのバグが原因ぽいですね。

• Vue PWA doesn't update on iOS #2945
• [iOS] Safari is using memory cache instead of service worker #1744

vue.config.jsにて下記のオプションを設定すると直るみたいですが、アクセスするたびに最新のサービスワーカーをダウンロードする仕様になってしまうので、あくまで暫定的な対処になります。

module.exports = {
  pwa: {
    workboxOptions: {
      skipWaiting: true
    }
  }
}

Comments

[haritoshi]

なるほど！
ありがとうございます
このissueを追ってみることにします