WordPressにPWAを実装する方法【Googleも推奨】

サイトの表示速度を上げたい。コードの圧縮化や画像の最適化など出来る範囲でやってみたけど、他に表示速度を上げられる方法は何があるかな?

 

こんな方に特におすすめしたいのが、「WebサイトのPWA化」です。

 

PWA(プログレッシブウェブアプリ)とは、Webサイトをアプリ化させる仕組みのことです。

 

2016年頃から既に登場していた仕組みで、有名な導入事例を挙げると「Twitter」「Instagram」「Pinterest」「SUUMO」「日経電子版」ですね。誰もが一度は聞いた事のある名前だと思います。

 

サイトをPWA化すると、PWAの仕様によりサイトの表示速度が爆上がりします。

 

まず、PWA実装におけるメリットとデメリットについて言及して、それからサイトへの実装方法について解説していきますね。

 

実装自体はとても簡単で、『今月からWordPress始めたよー』という初心者でも出来るレベルですよ。

 

 

WordPressにPWAを実装する方法【Googleも推奨】

PWAとは?

 

PWA(プログレッシブウェブアプリ)とはProgressive Web Appsの略で、Webサイトをアプリのように使えるモバイル向けの仕組みです。

 

「ネイティブアプリとWebページの良い所取りした仕組みを作ろう」という経緯のもと開発された、Webページの利便性とネイティブアプリの利便性を両方兼ね揃えたハイブリットな機能です。

 

ネイティブアプリとは
App Storeなどのアプリストアからインストールして使用するタイプのアプリのこと。ブラウザ上で開くWebページと比べて、「動作が速い」「カメラなどのスマホ機能との連携が可能」「オフラインでも利用できる」 等の特徴がある。

 

PWAを実装するとどうなる?

 

スマホで閲覧していたサイトをブックマークするとき、主に「サイトURLを端末に保存するやり方」と「ホーム画面に追加するやり方」の2つがありますよね。

 

PWAを実装することで大きく変わるのは、後者の「ホーム画面に追加する」方です。具体的に言うと、ホーム画面へアイコンを追加した後の動作(操作感)が違ってくるのです。

 

習うより慣れろの精神で、試しに僕のブログをホーム画面に追加してみてください。このサイトは既にPWA化させていますので。

 

 

通常通りスマホからサイトを閲覧している時は、上にアドレスバーが表示され、下にはタブバーが開いているはずです。

 

 

ですが、PWA化したサイトをホーム画面に追加して、追加したアイコンからサイトを起動させるとこのようになります↓

 

 

見て分かる通り、ブラウザでの閲覧時にはあったアドレスバーとタブバーの表示がなくなっていますよね。

 

まるでアプリのようになっていますが、これがサイトをアプリ化するPWAの仕組みというわけです。

 

PWA実装におけるメリット・デメリット

 

PWA実装のメリット
  1. キャッシュを利用するため、サイトの表示速度が大幅に速くなる
  2. オフライン化(インターネットが繋がらない環境化)でも閲覧できるのでユーザビリティが向上する
  3. ホーム画面に追加されたアイコンをタップするだけでサイトにアクセスできるので、リピート訪問がしやすくなる

 

大まかなメリットについては、ざっとこんなところです。

 

何より、サイト表示速度が大幅に速くなるのがデカイ。

 

なぜ速くなるのかと言えば、キャッシュという、一度訪問したサイトのデータを端末に保存する仕組みを使うからです。

 

キャッシュがあれば、2回目の訪問時には端末に保存されたデータからサイトを表示させられるので、サーバーからデータをダウンロードするよりも表示速度が高速になるのです。

 

読み込み速度が高速になるだけではなく、オフライン化でもアクセスが可能になるので、例えば電波の繋がらないような地下に居ようが無人島に居ようが問題無くサイトを閲覧できます。

 

加えて、わざわざブラウザを開いてサイトを表示させなくても、ホーム画面のアイコンをタップするだけでアクセスできるのは利用者視点では有り難いはずです。

 

PWA実装のデメリット
iOSではまだ完全に対応していない

 

主なデメリットというか、現時点での改善点としては「Androidは完全対応しているが、iOSは一部使えない機能があるなど制限がある」ことです。

 

具体的には、「Webサイト閲覧時に、ホーム画面へ追加することを訴求するバナーやプッシュ通知が表示されない」というものです。

 

加えて、ブラウザ上によくある「前のページに戻るボタン」も表示されません。

 

バージョン11.3からPWA対応が始まったものの、まだまだ不完全なリリースとなっているのが現状ですね。

 

上に挙げた機能はiOSでは使えないですが、バージョン11.3以上であればさほど問題無く動作するので安心してください。

 

PWAの実装方法

 

さて、肝心のPWA実装方法についてです。

 

実装方法は「手動をコードを打ち込む方法」「WordPressプラグインを使う方法」の2つがあります。

 

手動と聞くとなんだか難しそうですが、プログラミングが全くできない僕でも実装できたので大丈夫です。なぜなら、コードをコピペするだけで実装できるからです。

 

また、プラグインでの実装だと、寝てても出来るレベルです。

 

PWA実装前にやるべきこと
PWA実装前に「サイトをHTTPS化」させておく必要があります。これはPWA実装に関わらず、今時のサイトはHTTP化させるのが当たり前なので、必ず対応させておくようにしましょう。

 

手動で実装する方法

 

一部コードをカスタマイズする必要があるものの、作業の90%はコードをコピペするだけなので思った以上に楽です。

 

PWA化させるのに必要な作業は、下記の4工程+@です。

 

  1. 「PNGアイコン」の作成とアップロード
  2. 「manifest.json」の作成とアップロード
  3. 「serviceWorker.js」の作成とアップロード
  4. テーマの「header.php」の<head>タグ内にコードを記述する

※iOSの場合、別途「header.php」の<head>タグ内にmetaタグを指定する

 

manifest.jsonは、ホーム画面に追加するアイコン全般に関する仕様を指定するためのファイルです。

 

serviceWorker.jsは、PWA実装において必要な「Service Worker」を使えるようにするためのファイルです。

 

難しく考える必要はなく、上記2つのファイルを作成してFTPソフトを使ってサーバーにアップロードするだけでOKです。

 

まずはホーム画面に追加されるアイコンの作成です。作成するサイズと、作成した画像に付けるファイル名は以下の通りです。

 

サイズ 画像ファイル名
48 x 48px pwa-48.png
72 x 72px pwa-72.png
96 x 96px pwa-96.png
144 x 144px pwa-144.png
168 x 168px pwa-168.png
192 x 192px pwa-192.png
256 x 256px pwa-256.png
512 x 512px pwa-512.png

 

必ず指定のファイル名で保存を!
画像ファイル名は必ず表通りの名前で作成してください。ファイル名が違うとコードで呼び起こせなくなるためです。

 

この中で必須のサイズは「192×192px」と「512×512px」です。これだけは必ず作成するようにしましょう。

 

アイコンを作成したら、WordPressをインストールしたディレクトリと同じ階層にpwa-imagesという名前でフォルダを作成し、その中にPNGアイコンのファイルをアップロードしてください。

 


 

次は、「manifest.json」の作成です。

 

メモ帳を起動して、以下のコードをコピペしましょう。

 


{
“name”: “FirstLayout”,
“short_name”: “FirstLayout”,
“description”: “WordPressのカスタマイズを紹介”,
“start_url”: “/?utm_source=home-screen&amp;utm_medium=pwa”,
“display”: “standalone”,
“theme_color”: “#161825”,
“background_color”: “#FFFFFF”,
“icons”: [
{
“src”: “pwa-images/pwa-48.png”,
“sizes”: “48×48”,
“type”: “image/png”
}, {
“src”: “pwa-images/pwa-72.png”,
“sizes”: “72×72”,
“type”: “image/png”
}, {
“src”: “pwa-images/pwa-96.png”,
“sizes”: “96×96”,
“type”: “image/png”
}, {
“src”: “pwa-images/pwa-144.png”,
“sizes”: “144×144”,
“type”: “image/png”
}, {
“src”: “pwa-images/pwa-168.png”,
“sizes”: “168×168”,
“type”: “image/png”
}, {
“src”: “pwa-images/pwa-192.png”,
“sizes”: “192×192”,
“type”: “image/png”
}, {
“src”: “pwa-images/pwa-256.png”,
“sizes”: “256×256”,
“type”: “image/png”
}, {
“src”: “pwa-images/pwa-512.png”,
“sizes”: “512×512”,
“type”: “image/png”
}
] }

 

ファイル作成時の注意点
必ず文字コードを「UTF-8」形式にして保存してください。

 

一部コードをあなたのサイトに合わせてカスタマイズする必要があります。変更箇所を表に纏めたので、それを参考にカスタマイズしてください。

 

コード 説明
name ホーム画面への追加を促すバナーに表示される名前。通常はサイト名を指定する。文字数の目安は半角で12文字以内。
short_name ホーム画面のアイコン下に表示される名前。長いと「…」となって省略されるので、5~6文字程度が良さげ。
description Webアプリの説明を指定。サイトのキャッチフレーズと同じ内容で指定してOK。
start_url ホーム画面から起動した時に、最初にアクセスするURL。通常は、トップページ(フロントページ)を指定。
display 表示モードを指定。ゲームアプリに適する「fullscreen」、一般的なアプリに適する「standalone」、最低限のUIが追加される「minimal-ui」、ブラウザと全く同じ表示をする「browser」の4つから指定。通常は「standalone」か「minimal-ui」を選択する。
theme_color ステータスバー(最も上部にあるバー)の色を指定。
background_color 起動画面の背景色を指定。Googleはサイトの背景色と同じ色の指定を推奨しているが、それはWebサイト版とアプリ版の色を揃えることでスムーズな遷移を表現できるため。
icons ホーム画面や起動画面などで使用されるアイコンを指定。192×192が必須のサイズ。

 

色コード参考サイト
「theme_color」と「background_color」に入れる色コードは、HTML,CSS カラーコード一覧表|背景色や文字色の設定 を活用してみてください。

 

コードをコピペしてカスタマイズしたら、ファイル名をmanifest.jsonにして、WordPressがインストールされているディレクトリと同じ階層内にアップロードしましょう。

 

 

続いて「serviceWorker.js」の作成です。

 

メモ帳を起動して、以下のコードをコピペしましょう。

 


self.addEventListener(‘fetch’, function(event) {
});

 

上記のコードは「Service Worker」を起動させるために最低限必要なコードなので、プッシュ通知機能およびオフライン機能も実装されません。

 

つまり、これらの機能を実装したい際は、「serviceWorker.js」にコードを書けば良いということですね。

 

され、コードをコピペしたらファイル名をserviceWorker.jsにして、先ほど「manifest.json」をアップロードした同じディレクトリ内にアップロードしましょう。

 

 

  1. 「PNGアイコン」の作成とアップロード
  2. 「manifest.json」の作成とアップロード
  3. 「serviceWorker.js」の作成とアップロード

 

これらの3工程が完了したら、PWA実装まであともう一息です。

 

最後は、テーマの「header.php」の<head>タグ内に、下記のコードを貼り付ける作業です。全てコピペでOKです。

 

これで、manifest.jsonの読み込みとService Workerの登録が行えます。

 

header.phpの編集に関して
親テーマのheader.phpへ記述するとアップデートの際に初期化されてしまうので、子テーマのheader.phpへ記述するようにしましょう。子テーマにheader.phpが無いという場合は、WordPressの子テーマにファイルを追加する方法と注意点 | リュウセイブログを参考にファイルを追加してください。

 


<link rel=”manifest” href=”<?php echo home_url( ‘/’ ); ?>manifest.json”>
<script>
if (‘serviceWorker’ in navigator) {
window.addEventListener(‘load’, function() {
navigator.serviceWorker.register(‘/serviceWorker.js’).then(function(registration) {
console.log(‘serviceWorker registed.’, registration.scope);
}, function(err) {
console.log(‘serviceWorker error.’, err);
});
});
}
</script>

 

以上でPWAの実装は終わりですが、iOSはPWAにまだ完全に対応していないので、manifest.json に記載した内容が反映されません(2021年4月時点)。

 

ですが、下記の4つは、別途「header.php」の<head>タグ内にmetaタグで指定することで反映されます。

 

  1. ホーム画面のアイコン下に表示されるサイト名
  2. ブラウザの UI の非表示
  3. ステータスバーの色
  4. ホーム画面に表示されるアイコン

 

記述するコードは↓

 


<meta name=”apple-mobile-web-app-title” content=”<?php bloginfo( ‘name’ ); ?>”>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>
<link rel=”apple-touch-icon-precomposed” href=”アイコンのURL”>

 

これも一部自身のサイトに合わせてコードをカスタマイズする必要がありますが、簡単です。

 

コード 説明
1行目「?php bloginfo( ‘name‘ )」 ホーム画面のアイコン下に表示されるサイト名の指定です。これもあまり長いと「…」となって省略されるので、short_nameで指定したものと同じで良いかと思います。
2行目「content=”yes“」 ブラウザのUIの非表示に関する記述です。特に変更は要りません。
3行目「content=”black“」 ステータスバーの色の指定です。default・black・black-translucentから選択します。
4行目「href=”アイコンのURL“」 ホーム画面に追加される時のアイコンの指定です。作成した192×192pxのPNGアイコンをメディアにアップロードして、そのURLをここに挿入すればOKです。

 

以上です。

 

iOSのPWA対応については、iOSの11.3からのPWA対応でできるようになったこと| by Takeshi Amano | Mediumをご参照ください。

 

プラグインで実装する方法

 

丸投げする形になりますが、当サイトは手動による方法でPWA化させたので、プラグインを使用する方法については【Google推奨】WordPressをPWAに対応させよう! – ジャム! – フロントエンド専門Webメディアを参考にしてみてください。

 

ここで解説した手動でのやり方では、「オフラインでの閲覧」に対応できません。

 

ですが、Super Progressive Web Appsを使えば簡単にオフラインに対応できますし、その他のPWA機能も豊富なので使い勝手が良いとの評判です。

 

 

まとめ

 

今回は、手動でPWA化させる方法とプラグインを使ってPWA化させる方法の2つを解説しました。

 

プラグインの方がより充実した設定ができますが、あまりプラグインを入れたくない場合や、最低限のPWA実装で良い場合は手動の方でも構いません。

 

Google Lighthouseはサイト改善の要|SEOにも対応 | リュウセイブログにてご紹介した「Google Lighthouse」を活用することで、PWA最適化に関するヒントを得られます。合わせてご参考ください。

 

それでは、ここまで読んでいただきありがとうございました。

チャオ(・∀・)

 

PS.

サイトのキャッシュ設定によっては、手動での実装が上手くいかない可能性があります。その場合、プラグインでの実装を試すか、キャッシュ設定を見直してみてください。

 

また追記していきますね。

 

PPS.
記事が参考になったら、ぜひRSS登録お願いします!毎日更新しているので、RSSとの相性バツグンですよ(・∀・)♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です