PWA serviceworkerでWebサイトを更新したらキャッシュも更新されるようにしたい
WordPressにてサイトを公開しているのですが、PWAを導入してキャッシュ機能付きでネイティブアプリのように使えるようにしようとしたところ記事を削除してサイトに変化を加えてもキャッシュが更新されずそのままになっています。
ソースコードはこちらのサイトを参考にさせて頂きました。
https://qiita.com/OMOIKANESAN/items/13a3dde525e33eb608ae
Wordpressにて記事を公開したり削除したりした時に自動的にキャッシュが更新されるようにしたいです。
発生している問題・エラーメッセージ
service-worker.js:89 Uncaught (in promise) TypeError: Failed to execute 'put' on 'Cache': Request method 'POST' is unsupported at service-worker.js:89 //タイトルの問題には関係ないかもしれません
該当のソースコード
js
1var CACHE_NAME = "fb-cache-v8-10"; 2var urlsToCache = [ 3 "favicon.ico",//他複数 4]; 5 6const CACHE_KEYS = [ 7 CACHE_NAME 8]; 9 10self.addEventListener('install', function(event) { 11 event.waitUntil( 12 caches.open(CACHE_NAME) // 上記で指定しているキャッシュ名 13 .then( 14 function(cache){ 15 return cache.addAll(urlsToCache); // 指定したリソースをキャッシュへ追加 16 // 1つでも失敗したらService Workerのインストールはスキップされる 17 }) 18); 19 20}); 21 22//ここだけ他のサイトを参考にしました https://yasunari-fujieda.hatenablog.com/entry/2016/08/31/163800 23self.addEventListener('activate', event => { 24 var cacheWhitelist = [CACHE_NAME]; 25 event.waitUntil( 26 caches.keys().then((cacheNames) => { 27 return Promise.all( 28 cacheNames.map((cacheName) => { 29 // ホワイトリストにないキャッシュ(古いキャッシュ)は削除する 30 if (cacheWhitelist.indexOf(cacheName) === -1) { 31 return caches.delete(cacheName); 32 } 33 }) 34 ); 35 }) 36 ); 37}); 38 39 40 41 42 43// サービスワーカー有効化に必須 44self.addEventListener('fetch', function(event) { 45 //ブラウザが回線に接続しているかをboolで返してくれる 46 var online = navigator.onLine; 47 var noCacheList = [ 48//キャッシュしないURLをここに記載 49 ]; 50 //回線が使えるときの処理 51 if(online){ 52 event.respondWith( 53 caches.open(CACHE_NAME).then(function (cache) { 54 return cache.match(event.request).then(function (response) { 55 if (response) { 56 return response; 57 }else{ 58 //ローカルにキャッシュがあればすぐ返して終わりですが、 59 //無かった場合はここで新しく取得します 60 return fetch(event.request.clone()) 61 .then(function(response){ 62 var url = event.request.url; 63 var flg = true; 64 for(var cnt=0;cnt<noCacheList.length;cnt++){ 65 if(url.indexOf(noCacheList[cnt])!=-1){ 66 flg = false; 67 68 } 69 } 70 var cloneResponse = response.clone(); 71 if(response && flg){ 72 //ここ&&に修正するかもです 73 if(response || response.status == 200){ 74 //現行のキャッシュに追加 75 caches.open(CACHE_NAME) 76 .then(function(cache) 77 { 78 cache.put(event.request, cloneResponse) 79 .then(function(){ 80 console.log() 81 }); 82 }); 83 }else{ 84 //正常に取得できなかったときにハンドリングしてもよい 85 return response; 86 } 87 return response; 88 }else{ 89 return response; 90 } 91 }).catch(function(error) { 92 //デバッグ用 93 return console.log(error); 94 }); 95 }}) 96 })); 97 }else{ 98 //オフラインのときの制御 99 event.respondWith( 100 caches.match(event.request) 101 .then(function(response) { 102 // キャッシュがあったのでそのレスポンスを返す 103 if (response) { 104 return response; 105 } 106 //オフラインでキャッシュもなかったパターン 107 return caches.match("") 108 .then(function(responseNodata) 109 { 110 //適当な変数にオフラインのときに渡すリソースを入れて返却 111 //今回はoffline.htmlを返しています 112 return responseNodata; 113 }); 114 } 115 ) 116 ); 117 } 118});
試したこと
console.logを使用してみたところ"activate"の"if (cacheWhitelist.indexOf(cacheName) === -1)"ではじかれているようです。
また、参考にしたサイト(https://qiita.com/OMOIKANESAN/items/13a3dde525e33eb608ae)で掲載されているコードでも試しましたが、こちらでは".map(key => {"のところではじかれているようです。
補足情報
スマートフォン(ios)でも試したところsafariやホーム画面に追加したものでは動いていますが、なぜかchrome系では反映されません。
あなたの回答
tips
プレビュー