Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

PWAのキャッシュが効きすぎている?
 
共有:
通知
すべてクリア

[解決済] PWAのキャッシュが効きすぎている?

31 投稿
8 ユーザー
27 Reactions
9,697 表示
(@excesssecurity)
Estimable Member Registered
結合: 7年前
投稿: 79
Topic starter  

Cocoonトップページもそうなのですが、1.6.3が最新記事なのに、私のChromeからだと1.6.1が最新記事のままになっています(画像参照)

どのタイミングで閲覧したキャッシュなのか不明ですが、ページによっては最新記事が1.6.2だったり、スマホのChromeではトップページが1.6.2だったりと、端末が違うのに過去閲覧したことがあると、キャッシュが残ってしまっている?

PWAが原因だと思うのですがよくわからず(「PWA キャッシュ」とツイート検索したら同じ現象としか思えないコメントがあった)、一応PWA使用時は私のサイトもキャッシュがおかしくなります(現在未使用)。

どのようにおかしいかは以下の通り。

  • スーパーリロード(Shift+F5)にすると正常になるけど、その表示だけ正常なだけで更新すると戻ってしまう(結局消えていない)
  • 普段使わないFirefoxのアドブロック付きでCocoonを閲覧すると、ちゃんと反映されている(そもそもFirefoxで初めて閲覧したからキャッシュは最新かも)
  • PWA機能を無効化しても、一度でも有効化したあとは消えていない?(実際、当サイトは無効化中なのにキャッシュが消えず、プライベートブラウジングは消える)
  • F12のデベロッパーツール →  Applicationタブの「Clear Storage」→ 「Cache storage」だけチェック→ 「Clear site data」で無理やり消せる

スーパーリロードが機能しないほど強力?なキャッシュですが、上記のように無理やり消す方法はあるようです。

ただ、この方法は自分だけのような気がするので、全ユーザーのキャッシュを強制的に消せるような手段があるのかを質問させてください。

あと、このキャッシュには時間制限があるのでしょうか?

でもこれ、どうやって古いキャッシュがある環境を見せればいいんだろう…… ? 

念のため削除できたのかを確認する用に、私のスマホ版ChromeブラウザにはCocoonの古いキャッシュが残ったまま放置しております。


   
TM_BB reacted
(@excesssecurity)
Estimable Member Registered
結合: 7年前
投稿: 79
Topic starter  

あれ~(゚~゚o)ウゥーン

この投稿もChromeだと反映されなかった……さっき無理やりキャッシュ消したのに!

どうやらFirefoxは問題無く、正常に反映されていました。アドブロックもよくみたら有効化してなかったので関係ないようです。

Chrome限定かもしれませんので、Chromeを使って何らかの更新 → Chromeで閲覧すると反映されてないという状態が再現できるかもしれません。

Google Chrome は最新版です
バージョン: 72.0.3626.119


   
TM_BB reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

PWA使用時は私のサイトもキャッシュがおかしくなります

たしかに。PWA設定(β版)が原因だと私も思ってます。

  • PWA機能を無効化しても、一度でも有効化したあとは消えていない?(実際、当サイトは無効化中なのにキャッシュが消えず、プライベートブラウジングは消える)

これに関してはキャッシュではなく、Cookieを削除すれば問題なく表示されるようになるんですよね。

イコール = 一度もアクセスした事が無い状態に『ユーザー側がすれば』問題ない。って事だったりとも。

 

ただ、この方法は自分だけのような気がするので、全ユーザーのキャッシュを強制的に消せるような手段があるのかを質問させてください。

『この方法は自分だけ』完全にその通りかな、っと私も思ってるんですよね。

 

私は既にCocoonサイトのCookieの削除を行ってるので、フォーラムに関しては問題ありません。Cookie削除を行ってないであろう、ぷっぷさんは現状キャッシュが残っている風に表示されるんだと思います。

ぷっぷさんだけでなく、他のかたも書き込みが見えないから、返信をあきらめる人も当初いた(今はわかりませんが)そんなイメージです。

※たぶん今、フォーラムはPWA機能を無効化にされたと思います。

 

ぷっぷさんの書き込みのとおり『一度でも有効化したあとは消えていない?』現状はその通りの仕様なのかなぁっといったイメージです❦


   
TM_BB and ぷっぷ reacted
たなかま
(@tanakama)
Prominent Member Registered
結合: 7年前
投稿: 600
 

横からすみません。

僕もMacのFireFoxで、このフォーラムの最新が反映されていない状況になっています。

※OSとFireFoxともに最新バージョンです。

添付画像のように、セッション、キャッシュ系、cookie、DB、ローカルストレージなどすべて削除しています。

削除後は最新の状態になりますが、そこから時間が経っても更新が反映されないんですよね。(シークレットモードにすると最新の状態で表示されます)

不思議なことに、Chromeだとストレージ系の削除をしてから、最新の内容が反映されています。

何かしらFireFoxの設定の気がしますが、とりあえずはChromeで見れば問題ないのでご報告だけいたします。(Firefoxだと書き込みもできませんでした)


   
TM_BB and ぷっぷ reacted
(@excesssecurity)
Estimable Member Registered
結合: 7年前
投稿: 79
Topic starter  

かうたっくさんのヒントをもとにCookieも削除してみたのですが、やっぱりChromeは過去のキャッシュを参照しちゃうのか、フォーラムもろとも更新されないようです? 

なんだか、私のChromeとたなかまさんのFirefox、症状似すぎですね……

私のFirefoxは正常に更新されるんだけどな~ ? 正常と過去が入り乱れてるー


   
TM_BB reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

なぜだろ?

ってか、たなかまさん、ぷっぷさん、追加情報ありがとう❦です ? ? ? 


   
TM_BB reacted
TM_BB
(@tm_bb)
Eminent Member Registered
結合: 7年前
投稿: 40
 

みなさま、情報ありがとうございます。

わたしもMacで、メインのブラウザはSafariを使っています。
FireFoxではWordPressを触った事が無いのですが、クライアントのサイト更新にはフォント等をWindowsに近い感じに設定してGoogle Chromeを使用しています。

PWA機能とか難しいことはわかりませんが、Google Chromeで普通にCSS等をいじった場合、Chromeでキャッシュを空にするのが面倒なので、Safariで変更後のサイトを閲覧者として表示後キャッシュを空にすると、Chromeでも変更が反映されます。

わたしだけの珍しい現象かもですが、ついでにご報告させてください。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

ぷっぷさんはWindowsですか?それともMacですか?

私はWindowsでChromeバージョン: 72.0.3626.119(Official Build) (64 ビット)。Cookie削除で絶好調に反映されてる状況です。

状況がマチマチなので、一旦雑にまとめてみる。

  • かうたっく:Windows・ChromeでCookie削除すればバリバリ即反映
  • たなかまさん、MacのFireFox:ダメ
  • たなかまさん、Mac・Chrome、対応すれば反映
  • ぷっぷさん環境、□環境:Chrome:ダメ
  • TM_BBさん、SafariMac・Chromeで即反映しない、時間を置けば大丈夫:反映
  • TM_BBさん、Safariでは…

   
ぷっぷ reacted
(@oomoto)
Reputable Member Registered
結合: 7年前
投稿: 326
 

ボクもMacでクローム(バージョン: 72.0.3626.119(Official Build) (64 ビット))を使ってますが、スーパーリロードをすれば最新の状態になりますね。

あと、会社でウインドウズ7でクロームを使っても同じでした。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

ただ、この方法は自分だけのような気がするので、全ユーザーのキャッシュを強制的に消せるような手段があるのかを質問させてください。

消す方法はちょっと今のところわかりません。
キャッシュを更新するのであれば、以下のようなバージョン文字列をちょっと変更すればキャッシュは更新されると思います(しかしその後更新したキャッシュが残ると思う)。

$service_worker_ver = THEME_NAME.'_20190220_1'; //PWAに変更を加えたらバージョン変更

https://github.com/yhira/cocoon/blob/master/lib/page-settings/pwa-posts.php#L92

やはり、新技術は仕様がわかるまで難しいですね…。β版にしておいて良かったです。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

僕のChrome環境で言えば、クッキーとブラウザキャッシュを削除すれば更新されるようです。
スーパーリロード(Shift + ブラウザのリロードボタン)でも反映されます。


   
(@oomoto)
Reputable Member Registered
結合: 7年前
投稿: 326
 

技術的に実装しているかもしれませんが、

サービスワーカーを使ってキャッシュをコントロールする記事をみつけました。。。。

https://qiita.com/OMOIKANESAN/items/13a3dde525e33eb608ae

 

あと、PWAのキャッシュで苦戦している記事もありました。

 

https://blog.htmlhifive.com/2018/08/27/pwa-cache-update/


   
わいひら reacted
(@oomoto)
Reputable Member Registered
結合: 7年前
投稿: 326
 

今回の減少は、ブラウザーキャッシュ・サーバーキャッシュでもなく

サービスワーカーのキャッシュ機能が反映される続けるのが原因だと思います。

このサービスワーカーをうまくコントロールできればいいのですが、新機能なので意味が分からない・・・・・


   
(@excesssecurity)
Estimable Member Registered
結合: 7年前
投稿: 79
Topic starter  

なんかガチャガチャやってたら、いろいろ解決した(*゚▽゚)

ただしガチャガチャのせいでうろ覚え、あまり自分のサイトのキャッシュ(普通の)をこの時間帯消しまくりたくない&眠いのでとりあえずの適当備忘録。

  • スーパーリロードやCookieを消しても復活するキャッシュが、Cocoonもろとも消せた
  • この時重要なのが、ブラウザのCookie&キャッシュ削除後、いったんブラウザを閉じてから普通の状態閲覧する?(うろ覚えその1)

という状態で、私のChromeは正常になったような……ならなかったらごめんなさい ?

あとかうたっくさん、私はWindows10で、Chromeは同じ最新版です!

そんでもって、私のサイトのサービスワーカーの記述を、わいひらさんの教えてくれた日付を今日のにしてから、Cookieなどの削除をしました。

でも反映されなかったので、私のサイトの普通のキャッシュが邪魔したか、効果があったのかよくわかりません ? (うろ覚えその2)

とりあえず、スマホもChromeのCookieとキャッシュを削除すれば即反映されるようになりました(こっちはCookie削除後にブラウザを閉じなくてもOKだった)。やったね!

あとは今後も更新されるように、古いPWAが残っても困るのでずっと有効化したままでいこうと思います。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

これまでの仕様では、WordPressのインストールディレクトリに以下のPWA関連ファイルが残るようにしていました。

  • cocoon-manifest.json
  • cocoon-service-worker.js

けれど、以下のファイルでPWA機能を無効にしたら上記2つのファイルを削除する仕様にしてみました。
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

https://github.com/yhira/cocoon/commit/e9293bd6c1bbc970ed28cd3494211c7ac85284f3

これだと、マニフェストとサービスワーカーファイルを取得できないので、いけるのかなと思いましたが、ダメみたい…。
手ごわい…。


   
ぷっぷ reacted
(@ところてん)
Active Member
結合: 6年前
投稿: 10
 

これなんかどうでしょう?

https://blog.htmlhifive.com/2018/08/27/pwa-cache-update/


   
わいひら reacted
(@excesssecurity)
Estimable Member Registered
結合: 7年前
投稿: 79
Topic starter  

以下のファイルでPWA機能を無効にしたら上記2つのファイルを削除する仕様にしてみました。

上記zipファイルを適用させたあとに無効化しましたが消えず、有効に戻しました ? 

そもそも、以下のPWA記事の文言を思いっきり見ていたのに、動作確認を怠った私が悪いので、とりあえずは有効化したまま更新待ち?のような使い方でごまかします!

PWA機能は現在β機能となっています。PWAはブラウザーなどキャッシュの扱いに影響が出ます。なので仮に問題があったとしてもキャッシュを操作して対応できる方はご利用ください。
現在のところ、しっかりと動作確認できる方のみの利用をおすすめします。利用するにしても、あまり収益とかに関係ないサブサイトとかでお試しください。

引用:PWA設定を行ってモバイル環境の高速化を行う方法 | Cocoon

あと、ところてんさんのURL提示は、すでにoomotoさんがしているようです ? 


   
わいひら reacted
(@oomoto)
Reputable Member Registered
結合: 7年前
投稿: 326
 

この記事2書いてますが、シークレットウインドウでブラウザーを使えば、その都度サービスーカーのキャッシュを削除するらしいですよ〜

https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja

 


   
わいひら reacted
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

lib / page-settings / pwa-posts.php を軽く見たところ、私であれば cocoon-service-worker.js の activate と fetch の部分を変更します。activate は少し手を加えるだけ、fetch は全面的に書き換えます。

私が自前で PWA を実装するのであれば、プラグインの Super Progressive Web Apps とほぼ同じ書き方をします。このプラグインは GitHub で公開されていて、sw.php の 160 行目からが service-worker.js の部分です(ちなみにライセンスは GNU)。

https://github.com/SuperPWA/Super-Progressive-Web-Apps/blob/master/public/sw.php#L160

こんな風に activate と fetch 部分を変更すると、不具合は解消するはずです。

それと、気になる点が 1 つあります。いわゆる「オフラインページ」がないことです。

ネットに接続していない環境で、端末にキャッシュがないページにアクセスすると、おそらく現在の Cocoon では何も表示されないように思えます。それではまずいので、「オフラインページ」を表示するのが一般的です。「オフラインページ」は、マニフェストの start_url と同じページにすることが多いです。

Super Progressive Web Apps であれば、fetch の中で設定しています。

今は忙しくて、コードを変更し検証する時間が取れません。口を挟んでおいて申し訳ありませんが、わいひらさんに全部丸投げします。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

Akiraさんありがとうございます!

とりあえず取り急ぎ、Super Progressive Web Apps を参考に、オンラインではキャッシュ更新が動作するように修正してみました(オフラインはまだ未対応)。

とりあえず以下のような仕様にしました。

  • 何かしらの投稿・固定ページが更新されたら、サービスワーカーのバージョンが変わりキャッシュが更新。
  • 投稿が更新されるまではキャッシュを維持

修正版はこちら。

https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

適用するには、アップデート後はCocoon設定を再保存するか、投稿・固定ページでの更新が必要です。

もしかしたら1度スーパーリロード(Shift+ブラウザーのプリロードボタン)する必要があるかも。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

ページキャッシュプラグインを利用している場合は、キャッシュの削除も必要です。


   
(@oomoto)
Reputable Member Registered
結合: 7年前
投稿: 326
 

キャッシュが更新されるようになりました!


   
わいひら reacted
(@ところてん)
Active Member
結合: 6年前
投稿: 10
 

わいひらさんお疲れ様です!PWAのキャッシュがこんなに頑固なものだとは思いもしませんでした…w

また以前、利用していたテンプレートに付いていたPWAの機能では色々とアップデート対応されていていくつか細かい補正もありましたのでよろしければこちらも参考にしてくださいませ~

Chrome71以降のPWA のキャッシュを有効にしてる時に ServiceWorkers が上手く動作しなくなってたときの修正ポイント: https://developers.google.com/web/updates/2018/10/tweaks-to-addAll-importScripts

JETPACKを使って画像を CDN にしたら PWA が動かないときアイコン画像が外部にあっても対応する修正ポイント: https://thk.kanzae.net/dev/wp-themes/luxeritas/t9785/


   
わいひら reacted
(@excesssecurity)
Estimable Member Registered
結合: 7年前
投稿: 79
Topic starter  

上記zip適用後、PCの方ではキャッシュの扱いが普通のものとほぼ変わらず、何も考えなくても快適になりました!

スマホの方はCookieとキャッシュ削除をしたら、PWAの方にも反映されてました!

PCの方はすでにリアルタイム反映状態だったので私の環境では調べられませんが、スマホはCookieとキャッシュを自分で削除する必要がある状態には変わりありませんでした。

この部分が「オフラインページ」のことでしたら無視してください ? 

貴重な検証チャンスなのに、スーパーリロード試す前にCookie&キャッシュ削除先にやっちゃったオラァ( っ・∀・)≡⊃ ゚∀゚)・∵.

CocoonもスマホChromeからリアルタイム反映を確認しました!

でもPWA無効化中かな? とりあえず私のサイトも真似して無効化に変更中です。

超イイ感じ ? 


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

皆様、動作確認ありがとうございます。
とりあえずオンラインでは、うまくキャッシュが更新されるようになったようで安心しました^^

「オフラインページ」は、マニフェストの start_url と同じページにすることが多いです。

一応、オフラインページも実装してみました。
https://github.com/yhira/cocoon
start_urlと同じということなので、offlinePageも同じにしてみました。これで良かったのだろうか。
https://github.com/yhira/cocoon/commit/e077cc57f0aa911c7ee92f096b50206f6cc6dc78

貴重な検証チャンスなのに、スーパーリロード試す前にCookie&キャッシュ削除先にやっちゃったオラァ( っ・∀・)≡⊃ ゚∀゚)・∵.

多分ですが、更新が反映されるコードに切り替わらないので、スーパーリロードしないと、多分反映されなかったと思います。


   
Akira and ぷっぷ reacted
(@oomoto)
Reputable Member Registered
結合: 7年前
投稿: 326
 

オフラインでも出来ました!!!

AdSenseの恐竜始めてみました(笑)


   
(@excesssecurity)
Estimable Member Registered
結合: 7年前
投稿: 79
Topic starter  

すごーい!完全体だー!
ちゃんと更新系(設定変更とか)をした後にPWAでも反映されてるし、新たにまた更新をしてPWAを起ち上げたままで標準の更新(画面を上から下へスワイプ)しても反映されてる(*゚▽゚)
もちろんスマホChromeも上記の状態に!
過去作成した更新されないPWAは、上記zip適用後、「PWAを有効化していなくても」勝手に更新されたようです。
これでずっと更新されなかったPWAユーザーさんは、勝手に更新されたはずかな ? 

PCはなぜかプライベートブラウジングじゃない普通の状態の方のキャッシュが過去のものになってたので(私の環境だけだと思う)、チャンスを活かしてスーパーリロードをしてみたら、その後もリアルタイム配信されるように!

現在は何も問題がないので、私のサイトは有効化しています ? 

すっごいありがとうございます ? 


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

oomotoさん、ぷっぷさん、動作確認ありがとうございます!
うまくいったんですね!これも、皆さんが動作確認してくれたおかげです。
加えて、Akiraさんの情報がなければ、多分直せませんでした。
助かりました。ありがとうございます ? 

当サイトは、フォーラムにキャッシュが残ってしまうなど影響があったので、PWAは無効にしていたのですが、先程有効にしてみました。
キャッシュ更新も修正して、フォーラムページでPWAも無効にしたので、これで多分大丈夫と思うのですが。
しばらくPWAを有効にしたまま、様子を見たいと思います。


   
ぷっぷ reacted
たなかま
(@tanakama)
Prominent Member Registered
結合: 7年前
投稿: 600
 

フォーラムの方も、僕の環境で最新の内容が反映されるようになりました。

ありがとうございます!


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

フォーラムも大丈夫なんですね。
ご確認ありがとうございます!

とりあえず、このトピックはキャッシュ問題が解決したということでクローズしておこうと思います。


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました