当ブログ（WordPress）をPWAに対応させたので必要なファイルや導入手順を解説します。
必要なファイル
PWAに必要なファイルは大きく分けて以下の3つ。
- アイコン
- manifest.json
- sw.js
どれも記述するコード量は多くありませんので次以上の項目で詳しく説明していきます。
アイコンの作成
まず、ホームに追加した時に表示されるアイコンファイルを作成しましょう。
必須サイズは192x192pxと512x512pxの2つになります。
このブログではpwa_192.pngとpwa_512.pngというファイルを作成しました。
作成したら任意の名前をつけて、WordPressのインストールディレクトリ（wp-settings.phpなどがある所）やテーマディレクトリなど任意のディレクトリにアップロードしてください。
manifest.jsonの作成
次にmanifest.jsonというjsonファイルを作成し、任意のディレクトリにアップロードします。
名前は任意のものでも構いません。
このファイルでは、アプリ名や起動時に表示するURLなどを設定します。
下記に当ブログのものを記載しますのでコピペ・改変してお使いください。
{
"name": "NullNull",
"short_name": "NullNull",
"description": "フリーランスWeb制作者Simmonの技術情報ブログ.",
"start_url": "/?source=pwa",
"display": "standalone",
"lang": "ja",
"dir": "auto",
"orientation": "any",
"theme_color": "#E8EAF1",
"background_color": "#E8EAF1",
"icons": [
{
"src": "/wp-content/themes/nullnull/assets/img/dist/common/pwa_192.png",
"type": "image/png",
"sizes": "192x192",
"purpose": "any maskable"
},
{
"src": "/wp-content/themes/nullnull/assets/img/dist/common/pwa_512.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any maskable"
}
]
}
各メンバーを簡単に説明します。
- name
- アプリのインストール時に使用されます。
nameかshort_nameのどちらかは必ず指定する必要があります。 - short_name
- ホーム画面に表示されるアプリ名
- description
- アプリの説明
- start_url
- 起動時に表示されるURL
- display
- アプリの起動時に表示されるブラウザーUI。
指定できる値はfullscreen、standalone、minimal-ui、browserの4つ。
通常はstandaloneで問題ないでしょう。 - lang
- 言語指定。
日本語であればjaを英語であればen-USを指定します。 - dir
- テキストの方向。
指定できる値は、ltr（左から右）、rtl（右から左）、auto。日本語はltr（左から右）でOK。アラビア語は逆なのでrtlを指定します。 - orientation
- 画面の向き。
縦向きはlandscape、横向きはportraitを指定します。
使用できる値は、any、natural、landscape、landscape-primary、landscape-secondary、portrait、portrait-primary、portrait-secondary - theme_color
- ツールバーの色
- background_color
- スプラッシュ画面で使用される背景色。
サイトが表示されるまでの間、この色が適用される場合があります。
サイトの背景色と同じ色を指定するとスムーズに遷移しているように見えるのでよいでしょう。 - icons
- ホーム画面に表示されるアイコンを指定します。
必須サイズは192x192pxと512x512pxの2つです。srcにはアップロードしたアイコンのパスを指定してください。
アップロードが完了したらlinkタグで読み込みます。
sw.jsの作成
最後にPWAの核となるService Workerのファイルを作成します。
以下に当ブログのものを記載しますのでコピペ・改変してお使いください。
const CACHE_NAME = 'nullnull-2021-07-25';
const OFFLINE_URL = 'https://nullnull.dev/';
const urlsToCache = ['https://nullnull.dev/'];
const neverCacheUrls = /\/wp-admin|\/wp-login|preview=true|\/cart|ajax|login/;
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('activate', (event) => {
event.waitUntil(
caches
.keys()
.then((keys) =>
Promise.all(
keys.map((key) => {
if (CACHE_NAME !== key) {
return caches.delete(key);
}
})
)
)
.then(() => {
self.clients.claim();
})
);
});
self.addEventListener('fetch', (e) => {
if (!e.request.url.match(/^(http|https):\/\//i)) {
return;
}
if (new URL(e.request.url).origin !== location.origin) {
return;
}
if (neverCacheUrls.test(e.request.url)) {
return;
}
if (neverCacheUrls.test(e.request.referrer)) {
return;
}
if (e.request.referrer.match(/^(wp-admin):\/\//i)) {
return;
}
if (e.request.method !== 'GET') {
e.respondWith(
fetch(e.request).catch(() => {
return caches.match(OFFLINE_URL);
})
);
return;
}
if (e.request.mode === 'navigate' && navigator.onLine) {
e.respondWith(
fetch(e.request).then((response) => {
return caches.open(CACHE_NAME).then((cache) => {
cache.put(e.request, response.clone());
return response;
});
})
);
return;
}
e.respondWith(
caches
.match(e.request)
.then((response) => {
return (
response ||
fetch(e.request).then((response) => {
return caches.open(CACHE_NAME).then((cache) => {
cache.put(e.request, response.clone());
return response;
});
})
);
})
.catch(() => {
return caches.match(OFFLINE_URL);
})
);
});
変更箇所はCACHE_NAME、OFFLINE_URL、urlsToCacheのみでOKです。CACHE_NAMEには任意の文字列を指定します。何か変更を加えたらバージョンを上げましょう。
urlsToCacheには予めキャッシュして置きたいページやファイルのパスを指定します。
このブログではトップページのみ指定しています。
作成が完了したらWordPressのインストールディレクトリにアップロードしましょう。
Service Workerの登録
最後にService Workerを登録する処理をheadタグの中に記述しましょう。
以下に当ブログのものを記載しますのでコピペ・改変してお使いください。
確認・デバッグ方法
PWAのテストにはGoogle Chromeのデベロッパーツールを使います。
チェックしたいサイトを開いた状態で「右クリック」→「検証」をクリックしてデベロッパーツールを表示させます。
一番右に「Lighthouse」という項目がありますのでそこを選択し、「Progressive Web App」にチェック、そして左側にある「Generate report」をクリックし、テストを開始します。
しばらくすると結果が表示されますので、チェックマークが出れば正常にPWAに対応できています。
Manifestファイル、Service Workerがどのように認識されているかもChromeのデベロッパーツールで確認できます。
デベロッパーツールの「Application」を選択すると左側のメニューに「Manifest」と「Service Workers」という項目がありますのでそちらから確認ができます。
