2022.1.10 更新
皆さまごきげんよう。
本日は、webサイトのpwa化をやってみましょう。
目次
1.アイコン画像を作りwordpressに設置する
2.manifest.jsonファイルを設置する
3.serviceWorker.jsを設置する
4.header.phpにファイルを読み込む記述をする
5.ホーム画面に追加してみよう
6.追記
PWA化を始める前に、そもそも PWA （Progressive Web Apps）とは何ぞや？というとことで調べてみました。
プログレッシブ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化成功です！(^^)v
最後に、今回はこちらのwebサイト様に大変お世話になりました。ありがとうございます！m(__)m
●【コピペでOK】WordPressをPWA対応させる方法（プラグインなし）
● WordPress を PWA に！ホーム画面への追加機能を実装
6.追記
(2020.2.1)
pwa化をした後に、cssでサイトのデザインを変更したり、テーマを変更したりすることもありますよね。
何か変更を加えた時は、serviceWorker.jsのconst CACHE_NAME = ‘freyja_ver_1’; の所も、サイトに変更を加えた都度、ver_2、ver_3…という風にバージョン名もアップしてください。
私はこれを忘れていたため、アイコンからサイトに行った時に表示がおかしくなってしまい焦りました。
冒頭でも申し上げた通り、pwaはApple App StoreやGoogle Playなどのデジタル配信システムを介してWebアプリをインストールする必要がありません。
もし、あなたのサイトのお客様がモバイル端末のホーム画面にアイコンを追加してくれたなら…リピーターが増える、滞在時間が伸びる、直帰率が下がる、などが期待できます。これはやらない理由が見当たりませんよね(^^)
今すぐにでも取り入れられるwebサイトのpwa化、是非皆さんも試してみて下さいね♪