WordPressでPWA対応してみた

WordPress

WordPressサイトを一瞬でPWA化できるという記事が流れてきたので、さっそくこのサイトでも試してみました。

WordPressサイトを一瞬でPWA化できる PWA for WordPress【プラグイン紹介】 | バシャログ。
今年の春頃、iOSのServiceWorker対応で、PWA（Progressive Web Apps)がWeb界隈を賑わせましたね。 私は6月にAndroid Bazaar and Conferen
bashalog.c-brains.jp
PWA for WordPress
PWA for WordPress は WordPress サイトを PWA (Progressive Web App) として構成し、PWA のキャッシュを簡単に制御できるプラグインです。
ja.wordpress.org

ちなみに使用しているテーマはCocoonです。

あらかじめサイトをhttps対応しておく必要があるようです。

  1. プラグインのインストール
  2. PWAを有効化
    1. STEP1：マニフェストの構成
    2. STEP2：ServiceWorker の構成
    3. 状態を確認
  3. 動作の確認
    1. Android
    2. iPhone
  4. まとめ

プラグインのインストール

  1. 管理画面左メニュー「プラグイン」→「新規追加」
  2. 「PWA for WordPress」で検索
  3. 「PWA for WordPress」をインストールして有効化

似ている名前で「AMP for WordPress」もあるので間違えないようにしてください。

PWAとAMPの違いは以下のサイトが参考になります。

いまさら聞けないPWAとAMP - Qiita
## 概要 - PWA = モバイルのWEBページでネイティブアプリのようなUXを提供するためのもの - AMP = モバイルのWEBページを高速化するためのもの どちらもGoogleが主軸となって策定されている、モバイルページを...
qiita.com

PWAを有効化

プラグインを有効化した直後の設定ページです。

書いてある手順通りに進めます。

STEP1：マニフェストの構成

設定 説明
Site Name アプリケーション名
Short Name 十分なスペースがない場合に使用されるアプリケーション名
description アプリケーションの説明
start_url アプリケーションを起動したときに読み込むURL
scope ナビゲーションの範囲
/app/の場合は/app/や/app/lower/のように/app/以下のみに制限されます
Icons アプリケーションのアイコン
theme_color アプリケーションの既定のテーマ色
background_color スプラッシュスクリーン等で使用される背景色
display 表示推奨する表示モード

  • fullscreen…画面いっぱい使用されブラウザは表示されません
    iPhoneだと非対応（⇒standalone）
  • standalone…fullscreenとほぼ同様
    ステータスバー（上部の時間や電波の表示）は表示されるようです
    Androidは戻るなどのUIが表示されるようです
  • minimal-ui…ステータスバーやナビゲーション制御のための最小限のUI要素が表示
    iPhoneだとショートカットと同様？
  • browser…ただのショートカット
    fullscreen、standalone、minimal-ui（Android）は一つのアプリケーションのように動作
orientation 優先するの画面の向き

https://developer.mozilla.org/ja/docs/Web/API/Screen/lockOrientation

詳細は以下参照

ウェブアプリマニフェスト
ウェブアプリマニフェストは、 JSON 形式のファイルでアプリケーションについての情報 (名前、作者、アイコン、説明など) を提供するものです。マニフェストは機器のホーム画面にインストールされたウェブサイトの詳細を通知し、ユーザーによりすばやいアクセスと、より豊かな使い勝手を提供します。
developer.mozilla.org

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を推しているらしいので試してみてはいかがでしょうか

コメント

ホーム
トップ