【THE THOR】ページが更新されない!原因判明【PWAの設定方法・注意点】

みなさんこんにちは。

旅ブロガーのJonyとAi(@10to1_travel)です。

私たちのブログがある時を境いに更新されなくなってしまいました。

  • 新記事を書いても「新着記事」にアップされない
  • カスタマイズが反映されない
  • リライトしても反映されない
 
Jony
あれれ??何でや!?
 
Ai
えー何何??不具合??
原因が不明だよー!

最近したこと&考えられる原因は以下の通りです。

考えられる原因

  • 新しくインストールしたプラグイン
  • WordPressのアップデート(5.6)
  • Google コアアップデート(2020年12月)
  • PWAの有効化

プラグインの設定見直し & 再インストール → 効果なし

WordPressのキャッシュ消去プラグインの導入 → 効果なしと言うより THE THORにはキャッシュ機能があるのでオススメしない

Googleのキャッシュ消去 → 消去した直後は反映されるがその後また残る

PWAの無効化 → 解決!!

そうなんです!

記事のタイトルにもある通り、この PWA機能が原因だったんです!

っと言ってもこれは THE THORの不具合でも何でもありません。
むしろ有効に使えばとても良い機能です。

そこで今回はページが更新されなかった原因の PWAについてお話します。

関連記事

みなさんこんにちは。 THE THOR(ザ・トール)ユーザーの JonyとAi(@10to1_travel)です。 私たちはまだブログを始めて1年経たないほどの「THE THOR初心者」です。 なぜ権威性も実績も[…]

【THE THOR】ページが更新されない原因はPWA 機能

今回私たちのブログのページが更新されなかった原因は THE THORに搭載されてる PWA機能が原因でした。

結果、PWA機能を無効にするとページは無事 更新してくれました。

※中には PWA機能を無効にしただけではキャッシュが消えないと言う報告もありましたが、今のところ正常に機能してます。

そもそもこの PWA機能とは何でしょう?

THE THORのPWA 機能とは?

THE THORの PWA(Progressive Web Apps)機能とは、簡単に言うと、モバイル端末上であなたのサイトがまるでスマホ アプリのように使える機能です。

これは Googleが提唱して、普及に力を入れてる機能です。
この機能が THE THORには備わってます。

私たちもさっそく PWA機能を有効にすると、モバイル上でアプリをダウンロードするような仕様になり、画面上にアプリの様にアイコンが出現しました。

 
Jony
すげー!感動やな♪
 
Ai
しかも読み込みが速い!
ストレスフリー♪

つまりあなたの Webサイトをスマホ用にアプリ化できる機能と考えてください。

THE THORでPWA 機能を設定するメリット

THE THORで PWA機能を設定するメリットです。

  • サイトの表示速度が速くなる
  • オフラインでも記事を読むことができる
  • アプリ化できる

何と言っても注目は「サイトの表示速度の高速化」です。

PWA機能は簡単に言うと、Webブラウザのキャッシュを利用してページを素早く表示させる機能です。

キャッシュを利用するので一度読み込んだデータを再度読み込む必要がなくなり、結果サイトスピードを上げることができます。

私たちも PWA機能を有効にすることにより、サイト速度の点数をモバイル・PC共に +10点も向上させることができました。

さらにキャッシュを利用するので一度読み込んだページは「オフライン」でも読み込むことができます。

サイトの表示速度が速くなれば、ユーザーのストレスも減り、離脱率や PV数の向上にも繋がります。

サイトもアプリの様になるので、気軽にあなたのサイトにアクセスすることができるようになりますね。

THE THORのPWA 機能 設定方法

THE THORの PWAを設定する方法はとても簡単です!

PWA機能を有効にする

外観 → カスタマイズ → PWA設定[THE] → PWA機能設定

と進み、「PWA機能を有効化するか選択」の部分を有効にして完了です。

ホーム画面のアイコン下テキスト」はアイコンの下のタイトルですので好きなタイトル(ほとんどはブログの名前)を入れてください。

PWAのアイコンを設定する

PWAのアイコン設定です。

これはスマホ画面にアプリとして表示された時のアイコンを設定できます。

サイズは

  • 72px × 72px 
  • 192px × 192px
  • 512px × 512px

とありますが、全て同じアイコンで大丈夫です。

今回の原因!THE THORのPWA 機能の注意点

THE THORの PWA機能の注意点です。

ここが今回の本題です!

今回のポイントは、「PWA機能はキャッシュを利用する」と言う部分です。

これによりサイトの表示速度は速くなりますが、
PWA機能の有効化 以降、以下の問題が発生することが分かりました。

  • カスタマイズが反映されない
  • 新着記事が反映されない
  • リライトしても反映されない

正確には反映されないのではなく、古いキャッシュのデータを使用するのでそれ以降のデータが表示されないのです。

カスタマイズが反映されないのはよく耳にしますが、新着記事やリライトが反映されないのはびっくりしました。

しかもモバイルだけでなく、PCも同じことが起こりました。

※ ブラウザのキャッシュを消去すれば一応「更新」はされます。

これが今回の原因です。

そして注意点として THE THORのマニュアルページにも以下の掲載がありました。

サイト作成初期のまだカスタマイズが済んでいない時期にPWAを有効にしてしまうと「カスタマイズが反映ししない・カスタマイズが進まない」と悩んでしまうことになりますので、PWAはサイト作成が済んでから有効にすることをおすすめします。

しかし、このブログに訪問してくれた方にひとりずつ「キャッシュの消去」をお願いするなんてあり得ませんよね。

しかもこの PWAで生み出したキャッシュは普通の「キャッシュの消去」では消えません。

とても厄介ですね。

結論として、PWAはオフにすることを強くオススメします!

【THE THOR】PWA 機能でページが更新されない原因 まとめ

今回は THE THORの PWA機能でページが更新されない原因をまとめました。

私たちの場合は PWA機能を無効化することにより問題は解決されました。

ですが、それでもキャッシュが残り、ページが更新されない人もいるようです。

PWA機能はとても便利な機能ですが、今の段階ではまだ設定は見送った方が良さそうですね。

 
Ai
でも Google、THE THOR共にさらにアップグレードして完璧に使えるようになったらいいね♪

最後まで読んでいただきありがとうございます。

おわり