wordpressのサイトをPWA化させてみよう

皆さまごきげんよう。
秋の日は釣瓶落とし。気がつけば日が落ちるのも随分早くなってきましたね〜
( ==)旦シミジミ。

さてそんな秋の夜長に、最近話題のwebサイトのpwa化にチャレンジしてみましたので、本日はその備忘録でございます。

目次
1.アイコン画像を作りwordpressに設置する
2.manifest.jsonファイルを設置する
3.serviceWorker.jsを設置する
4.header.phpにファイルを読み込む記述をする
5.ホーム画面に追加してみる
6.追記

PWA化を始める前に、そもそも「Progressive Web Apps」略してPWAとは何ぞや?というとことで調べてみました。

プログレッシブWebアプリケーション(PWA)は、HTML、CSS、JavaScriptなどの一般的なWebテクノロジーを使用して構築された、Webを通じて配信されるモバイルアプリの一種です。
機能には、オフラインでの作業、プッシュ通知、およびデバイスハードウェアアクセスが含まれ、モバイルデバイス上のネイティブアプリケーションと同様のユーザーエクスペリエンスを作成できます。
Webアプリケーションとして知られるWebページまたはWebサイトの一種であるため、開発者やユーザーがApple App StoreやGoogle Playなどのデジタル配信システムを介してWebアプリをインストールする必要はありません。
Wikipediaより

要約すると、webサイトをPWA化することで、ホーム画面にインストール、プッシュ通知など「アプリのような」機能を、アプリストアを介さずに持たせることができる、といったところでしょうか。

これが、何と目次の1〜4までの4ステップで出来ちゃいます。では順を追って見てみましょう。

1.アイコン画像を作りwordpressに設置する

アイコンは 192px*192px と 512px*512px の2サイズのpngファイルを用意し、それぞれpwa-192.png、pwa-512.pngなどわかりやすい名前を付けます。
私はとりあえずこんな感じのものを作ってみました。


これらのアイコン画像を、WordPressをインストールしたディレクトリにアップロードします。(wp-admin や wp-content フォルダなどと同じ階層です)

2.manifest.jsonファイルを設置する

先ほどアイコン画像を置いた同じ階層に下記の内容をmanifest.jsonという名前を付けてアップロードします。


{
    "name": "freyja's rumblings",
    "short_name": "freyja",
    "description": "デザインやプログラミングについての備忘録ブログ",
    "start_url": "/?utm_source=homescreen&utm_medium=pwa",
    "display": "standalone",
    "lang": "ja",
    "dir": "auto",
    "orientation": "any",
    "theme_color": "#faf0e6",
    "background_color": "#ff00ff",
    "icons": [
        {
            "src": "/pwa-192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "/pwa-512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ]
}

(↑は私の例です。ご自分のサイトに合わせて変更して下さい。)

それぞれの簡単な説明です。

name:アプリの名前
short name:ホーム画面に表示される名前
description:アプリの説明
start_url:最初に表示されるページのurl、通常はトップページ
display:表示モード。一般的なアプリならstandaloneかminimal-ui。他にゲーム系ならfullscreen、ブラウザと全く同じにしたいならbrowserなど
lang:言語
dir:テキストの方向
orientation:画面の向き
theme_color:ステータスバーに使用される色
background_color:起動画面の背景色
icons:アイコンの指定

3.serviceWorker.jsを設置する

同じく、先ほどアイコン画像を置いた同じ階層に下記の内容をserviceWorker.jsという名前を付けてアップロードします。

serviceworkerは、ホームアイコンへのpush通知やキャッシュの設定など、PWAの様々な機能を記述するファイルになります。
今回はホームアイコンを追加するのみなので、以下の記述だけにしております。

const CACHE_NAME = 'freyja_ver_1';
self.addEventListener('fetch', function(event) {
});

4.header.phpのheadタグ内に記述する

header.phpのheadタグ内に、先ほど作成したmanifest.jsonの読み込みと、Service Workerへの登録の記述をします。


<link rel="manifest" href="/manifest.json">
<script>
document.addEventListener('DOMContentLoaded', function() {
 if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
   navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
     console.log('ServiceWorker registration successful with scope: ', registration.scope);
   }, function(err) {
     console.log('ServiceWorker registration failed: ', err);
   });
  });
 }
}, false);
</script>

iOSはpwaへの対応が不完全だそうなので、続けてhead内に以下の記述も加えておきます。


<!-- pwa-iOS対策 -->
<meta name="apple-mobile-web-app-title" content="sitename">
<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="/pwa-512.png" sizes="512x512">

5.ホーム画面に追加してみる

では実際に試してみます。まずスマホのブラウザで自分のサイトを表示させます。
アイコンからホーム画面に追加をタップします。iphoneではこんなボタンです。



すると…


アイコンがホーム画面に追加されました。
お~、アプリっぽい!ちょっと感動(笑)

アイコンから起動してみると…


最上部にアドレスバーの代わりにステータスバーというのが現れております。

無事pwa化成功です!\(^^)/

最後に、今回はこちらのwebサイト様に大変お世話になりました。ありがとうございます!m(__)m

●【コピペでOK】WordPressをPWA対応させる方法(プラグインなし)

● WordPress を PWA に!ホーム画面への追加機能を実装

6.追記

(2019.12.1)

pwa化をした後に、cssでサイトのデザインを変更したり、テーマを変更したりすることもありますよね。何か変更を加えた時は、serviceWorker.jsのconst CACHE_NAME = ‘freyja_ver_1’; の所も、サイトに変更を加えた都度、ver_2、ver_3…という風にバージョン名もアップしてくださいね!これを忘れていたら、アイコンからサイトに行った時に表示がおかしくなってしまい焦りました。(´ω`。)

冒頭でも申し上げた通り、pwaはApple App StoreやGoogle Playなどのデジタル配信システムを介してWebアプリをインストールする必要がありません。

もし、あなたのサイトのお客様がモバイル端末のホーム画面にアイコンを追加してくれたなら…リピーターが増える↑滞在時間が伸びる↑直帰率が下がる↓などが期待できます。これはやらない理由が見当たりませんよね(^^)

今すぐにでも取り入れられるwebサイトのpwa化、是非皆さんも試してみて下さいね♪

コメントを残す