PWA化って知っていますか？自分のサイトをモバイルアプリのようにすることができるっていうあれです。
「あれって言われてもわからんわい！」という方は、前回の記事でPWA（Progressive Web Apps）について詳しく解説してますので、よろしければこちらもご覧ください。知っとるわい！という方はそのまま読み進めてください。
こんな人におすすめ
- PWA for WordPressの使い方を知りたい
- 自分のサイトをPWA化したい
PWA for WordPressについて
PWA for WordPressとは、WordPressのプラグインで、自分のサイトをPWA化できるというものです。
ただし、インストールするだけで良いというわけではなく、少し設定をする必要があります。
他にもPWA化できるプラグインはあるのですが、①表示が日本語で理解しやすい②必要な機能が大体入っている、という理由から、このプラグインがおすすめのようです。安心してガッツリ解説できるってもんです。
※注意
PWA化するには自分のサイトがSSL化していないといけません。サイトURL横に南京錠のような鍵マークがついているか、「https://」から始まっているかを確認してください。
PWA for WordPressの設定方法
PWA for WordPressの使い方を早速紹介していきます。
大枠の手順は以下の通り。
- Manifest（マニフェスト）設定→アイコンのデザインとか
- ServiceWorker（サービスワーカー）設定→キャッシュについてあれこれ
丁寧に最初にこの手順が書いてあるんですよ。WordPressのプラグインって英語表記のものが多いのでいつも困るんですが、これは日本語で書いてあるからとても嬉しい。
使い方
あなたの Web サイトを PWA にするために、このプラグインは二つのファイル、「Manifest」と「ServiceWorker」をサイト内に生成します。
Manifest (マニフェスト) ファイルは Web アプリケーションの構成を保持する json 形式のファイルです。
ServiceWorker は PWA の機能を制御する JavaScript ファイルです。
PWA を開始するには以下のリンクからそれぞれのファイルを構成してください。
Manifest設定
Manifest（マニフェスト）の設定で、アイコンのデザインなどを設定していきましょう。画面をみながら設定していきます。
- Site Name：サイトの名前、PWAを起動する時に出る名前
- Short Name：サイトの省略名、いろんなアプリをみてると、全角7文字くらいはいけそう
- start_url：そのまんま、最初に表示したいURLを入力する、トップページURLでOK
- scope：特に指定しなくて大丈夫
- icons：アプリ化した時のアイコン。サイトアイコンを使うと良いです。画像の拡張子は.pngのみ。持っている画像が.pngではない場合はこちらのサイトで変換しましょう→BANNER KOUBOU
- theme_color / background_color：サイトのイメージカラーを設定しましょう
- display / orientation：fullscreen / anyのままでOK
全て設定が終わったら「マニフェスト設定を保存する」を押して完了！
ServiceWorker設定
次にServiceWorker（サービスワーカー）設定をしていきます。
- 基本キャッシュ計画：Cache firstだと最速で表示されます。
- オフラインページURL：オフライン時に表示する固定ページを作っておく必要があります
- キャッシュ有効時間：毎日更新をするのであればキャッシュ有効時間は1日ぐらいが良いでしょう。
- キャッシュ除外URL：情報が更新される可能性が高いページは入力しておきます
- 強制オンライン優先URL：Online firstにした場合につかいます。最初に表示したいURLを入力する。
- 初期キャッシュ：どうしてもみて欲しいページのURLを入力しておく
- デバックモード：そのまんまOFFで大丈夫。
最後に「キャッシュ設定を保存する」を押して設定完了です。最初の設定画面に戻って、全ての設定のランプが緑になっていたら完了です。お疲れ様でした！
まとめ
PWAの設定はプラグインを使えば意外と簡単でした。いろんなプラグインがある中で、PWA for WordPressは日本語表記なのがなによりありがたい。
PWA化して劇的に閲覧数や収益化に効果があるかと言われたら、サイトコンテンツの質やニーズによるところもありますが、できるならぜひ設定しておきたいですね。
5分くらいで設定は終わるので、ぜひやってみてください。
