質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Google サイト

Google サイトは、Google社が提供する無料のホームページ作成ツールです。プログラミングやデザインなどの知識がなくても、ブラウザから容易にWebページを作成することが可能。新たなページの追加も簡単でページ数には制限がありません。

PWA(Progressive Web Apps)

PWA(Progressive Web Apps)は、アプリのようなWebサイトを指します。仕様が異なる様々なデバイスで表示でき、インストールも不要。さらに訪問し続けることでユーザーについて学び、強力なPWAとなります。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

キャッシュ

キャッシュはドキュメントやデータを一時的に保管するもので、アクセス処理時間を短くするために使用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

2133閲覧

PWA serviceworkerでWebサイトを更新したらキャッシュも更新されるようにしたい

taka12

総合スコア2

Google サイト

Google サイトは、Google社が提供する無料のホームページ作成ツールです。プログラミングやデザインなどの知識がなくても、ブラウザから容易にWebページを作成することが可能。新たなページの追加も簡単でページ数には制限がありません。

PWA(Progressive Web Apps)

PWA(Progressive Web Apps)は、アプリのようなWebサイトを指します。仕様が異なる様々なデバイスで表示でき、インストールも不要。さらに訪問し続けることでユーザーについて学び、強力なPWAとなります。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

キャッシュ

キャッシュはドキュメントやデータを一時的に保管するもので、アクセス処理時間を短くするために使用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/06/18 11:54

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系では反映されません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問