haritoshi score 72
2019/05/25 16:33 投稿
| VueとPWAで作ったサイトのキャッシュを新しいファイルがあった場合に自動更新したい |
| ### 前提・実現したいこと |
| 現在、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は |
| Vue CLI3にてPWAを有効にした時に作成されるregisterServiceWorker.jsは編集していません。 |
| ```javascript |
| /* 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だけ、更新がされないようです。 |
haritoshi score 72
2019/05/25 16:32 投稿
| VueとPWAで作ったサイトのキャッシュを新しいファイルがあった場合に自動更新したい |
| ### 前提・実現したいこと |
| 現在、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はupdatedのところだけ編集しています。 |
| ```javascript |
| /* 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だけ、更新がされないようです。 |
