WordPressサイトを一瞬でPWA化できるという記事が流れてきたので、さっそくこのサイトでも試してみました。
ちなみに使用しているテーマはCocoonです。
あらかじめサイトをhttps対応しておく必要があるようです。
プラグインのインストール
- 管理画面左メニュー「プラグイン」→「新規追加」
- 「PWA for WordPress」で検索
- 「PWA for WordPress」をインストールして有効化
似ている名前で「AMP for WordPress」もあるので間違えないようにしてください。
PWAとAMPの違いは以下のサイトが参考になります。
PWAを有効化
プラグインを有効化した直後の設定ページです。
書いてある手順通りに進めます。
STEP1：マニフェストの構成
| 設定 | 説明 |
|---|---|
| Site Name | アプリケーション名 |
| Short Name | 十分なスペースがない場合に使用されるアプリケーション名 |
| description | アプリケーションの説明 |
| start_url | アプリケーションを起動したときに読み込むURL |
| scope | ナビゲーションの範囲 /app/の場合は/app/や/app/lower/のように/app/以下のみに制限されます |
| Icons | アプリケーションのアイコン |
| theme_color | アプリケーションの既定のテーマ色 |
| background_color | スプラッシュスクリーン等で使用される背景色 |
| display | 表示推奨する表示モード
|
| orientation | 優先するの画面の向き
https://developer.mozilla.org/ja/docs/Web/API/Screen/lockOrientation |
詳細は以下参照
displayをstandalone、orientationをportraitにしてみました。
STEP2：ServiceWorker の構成
| 設定 | 説明 |
|---|---|
| 基本キャッシュ計画 | 高速化もしたいならCache first 頻繁に更新するならOnline first（オフライン時のみキャッシュから） |
| オフラインページ URL | オフライン時に表示するページ |
| キャッシュ有効時間 | キャッシュの有効時間（分） |
| キャッシュ除外URL | キャッシュさせたくないURL（正規表現指定可） |
| 初期キャッシュ | あらかじめキャッシュさせておきたいURL |
| デバッグモード | コンソールに起動やキャッシュ操作などのログを出力するかどうか |
高速化のためにCache first かつ 適度に更新は確認してほしいのでキャッシュの有効時間を60分にしてみました。
状態を確認
動作の確認
Android
Chromeでアクセス
設定したテーマカラーになっていました。
下部に追加メニューが表示され表示されており、ここからホーム画面に追加することができます。
消してしまってもブラウザのメニューから追加できるようです。
タップして起動
起動時に設定したカラーでスプラッシュ画面が表示されます。
JavaScriptも普通に動くので、広告やメニューも動作します。
この点は利用が厳しく制限されているAMPよりも非常に良いですね。
ブラウザではなく一つのアプリケーションのように動作しています。
iPhone
Safariでアクセス
こちらはテーマカラーにはなっていません。
また下部に追加メニューが表示されていません。
上の画像の赤丸から追加します。
タップして起動
スプラッシュ画面は表示されませんでした。
JavaScriptはちゃんと動作するようです。
こちらも一つのアプリケーションのように動作しています。
まとめ
プラグインのインストールと設定だけでPWA化できるのは驚きです。
GoogleもPWAを推しているらしいので試してみてはいかがでしょうか
コメント