THE THORに搭載されているPWAとは一体どんな機能なのか？使い方について知りたいと思っていませんか？
私はサイト立ち上げからだいぶ時間が経ってから設定しましたが、これには設定する前に知っておいて良かった〜！と思えるちょっとした理由が…記事内で説明してありますので確認してみてくださいね。
それはさておき、THE THORのPWA機能を利用するには、プラグイン導入の必要がなく、標準装備されていてることから、 実際には設定ボタンを押すだけで済みます。
今回はTHE THORのPWAについて、くわしく解説しながら設定方法もご紹介していきますね。
THE THORに搭載されているPWAを詳しく！
はじめに「THE THORのPWAとは一体どんなものなのか？」という初心者の方のために、かんたんな説明とメリット・デメリットをお伝えしていきますね。
PWA（Progressive Web Apps）とは、サイトをスマホ上のホーム画面に追加して、アプリのように使える仕組みのことで、これはPWAの技術である強力なキャッシュによって、サイト表示が高速化されることで実現されているのです。
THE THORは最先端のWordPressテーマですが、PWA機能もスマホからの閲覧ユーザーが増加していることに着目し、いち早く搭載されています。
また、PWAはGoogleも推奨している機能であり、普及を目指している機能なので、今からしっかり取り入れておきましょう。
PWAを実装したスマホ画面
通常サイトをブラウザで開くと、どうしても上下にブラウザメニューが表示されて、気にならないと言えばならないですが、PWAの画面と比べると邪魔だと感じませんか？
↑Chomeで開いた画面
PWAを実装すると、邪魔なブラウザメニューが表示されないので、スッキリして画面上下いっぱいにサイトを見ることができるのです！
↑PWAで開いた画面
PWAのメリット3つ
まずはPWAのメリットですが、以下の3つがあります。
- ページ表示速度の高速化
- オフラインでも閲覧可能
- サイトをアプリ化できる
ページの表示速度の高速化
キャッシュには、ユーザーが閲覧したページを保存しておき、次に閲覧するときは前回よりも素早く表示させる働きがあります。
サイト表示の高速化で得られるメリットは多いため、サイト運営者にとっては本当にありがたいですね。
オフラインでも閲覧可能
キャッシュを利用することで、ページ情報を端末に保存できるため、ネットにつながってないオフラインでも閲覧できてしまいます。
一時的にネットが繋がらないなど、さまざまな場面でオフライン環境に遭遇したとき役立つでしょう。
サイトをアプリ化できる
そしてPWAの最大のメリットともいえるのが、スマホ上でサイトを起動すると、アプリのように閲覧できる点です。
PWAを利用することで、読者はホーム画面のアイコンからサイトを開いて閲覧することになるので、その間はWebブラウザ上の別サイトへの移動はされにくくなくなります。
なので、いくつものページをストレスフリーで見てもらえる上に、閲覧数アップにも期待ができますね。
PWAのデメリット
キャッシュが強力すぎて変更データが反映されない
どういうことかというと、一度PWAを有効にしてしまうと、PWAを無効にしてもキャッシュデータが残ってしまうため、カスタマイズしたデータがすぐに反映されないという不具合が生じてしまうのです。
しかも、通常のキャッシュ削除方法ではクリアできないという問題点があるものの、かわりにPWAのキャッシュを削除すれば解消できるので安心してくださいね。
この後説明する「PWA機能設定」の画面からクリアできますよ！
「THE THOR無料サポート」受付中！質問、疑問etc…どんな些細なことでもOK！お問い合わせはこちらからお気軽にどうぞ！
PWA機能の設定方法
では早速PWAを設定していきますが、まずPWA機能を利用するには、サイトをSSL化していなければなりません。
まだSSL化を行っていない方は、エックスサーバーを使って説明していますので、下の記事を参考にしてくださいね。
SSL化が済んだら、【外観】→【カスタマイズ】へすすみましょう。
次に【PWA設定［THE］】をクリックします。
次の画面で「PWA設定機能」と「アイコンの設定」という２つの項目が出てきますので、それぞれクリックして設定していきます。
PWA機能設定
まずはPWA機能設定ですが、【PWA機能設定】をクリックすると【PWA機能を有効化するか選択】のボックスがありますので、【有効】と変更します。
【ホーム画面のアイコン下テキストを入力】にはブログ名を入力しましょう。
ちなみに一番下の【PWAのキャッシュをクリアする】は、先ほどデメリットでお伝えした問題を解消するときに使います。
リライトやカスタマイズした際や、ページ情報が更新されないときは利用しましょう。
アイコンの設定
次に、一旦【PWA設定［THE ]】に戻り【アイコンの設定】をクリックすると、アイコン設定項目が3つありますので、それぞれ適正サイズの画像を登録しましょう。
PWAの設定は以上で完了となります。
この後、サイトを「ホーム画面に追加」すると、アイコンが出現するので、クリックしてPWAの画面が表示されるか確認してみましょう。
まとめ
ここまでTHE THORのPWAについて、くわしく解説しながら設定方法もご紹介してきました。
まとめると、PWA機能を有効にするとキャッシュの利用ができるようになり、ページ表示速度が速くなってユーザーがページ移動しやすくなります。
多少のデメリットはあるものの、SEOとユーザーファースにつながる大きなメリットがあるので、利用しない手はないでしょう。
設定はかんたんなので、あなたもある程度サイトができあがってきたら、ぜひ設定してみてくださいね！
今回の記事でなにかわからないことはありませんでしたか？質問や相談、感想や雑談などなんでも受け付けているので、どうぞお気軽にメールくださいね↓
