質問編集履歴

2 registerServiceWorker.jsの編集を消す

haritoshi

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はupdatedのところだけ編集しています
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だけ、更新がされないようです。
  • Apache

    2325 questions

    Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

  • Vue.js

    1924 questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • Vue CLI

    108 questions

1 MacとiPhoneのブラウザごとに確認

haritoshi

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.');
     setTimeout(() => {  
       window.location.reload(true);  
     }, 1000);  
   },
   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だけ、更新がされないようです。
  • Apache

    2325 questions

    Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

  • Vue.js

    1924 questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • Vue CLI

    108 questions

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る