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

当ブログ(WordPress)をPWAに対応させたので必要なファイルや導入手順を解説します。

必要なファイル

PWAに必要なファイルは大きく分けて以下の3つ。

  • アイコン
  • manifest.json
  • sw.js

どれも記述するコード量は多くありませんので次以上の項目で詳しく説明していきます。

アイコンの作成

まず、ホームに追加した時に表示されるアイコンファイルを作成しましょう。
必須サイズは192x192pxと512x512pxの2つになります。
このブログではpwa_192.pngpwa_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
アプリのインストール時に使用されます。nameshort_nameのどちらかは必ず指定する必要があります。
short_name
ホーム画面に表示されるアプリ名
description
アプリの説明
start_url
起動時に表示されるURL
display
アプリの起動時に表示されるブラウザーUI。
指定できる値はfullscreenstandaloneminimal-uibrowserの4つ。
通常はstandaloneで問題ないでしょう。
lang
言語指定。
日本語であればjaを英語であればen-USを指定します。
dir
テキストの方向。
指定できる値は、ltr(左から右)、rtl(右から左)、auto。日本語はltr(左から右)でOK。アラビア語は逆なのでrtlを指定します。
orientation
画面の向き。
縦向きはlandscape、横向きはportraitを指定します。
使用できる値は、anynaturallandscapelandscape-primarylandscape-secondaryportraitportrait-primaryportrait-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_NAMEOFFLINE_URLurlsToCacheのみでOKです。
CACHE_NAMEには任意の文字列を指定します。何か変更を加えたらバージョンを上げましょう。

urlsToCacheには予めキャッシュして置きたいページやファイルのパスを指定します。
このブログではトップページのみ指定しています。

作成が完了したらWordPressのインストールディレクトリにアップロードしましょう。

Service Workerの登録

最後にService Workerを登録する処理をheadタグの中に記述しましょう。
以下に当ブログのものを記載しますのでコピペ・改変してお使いください。


確認・デバッグ方法

PWAのテストにはGoogle Chromeのデベロッパーツールを使います。

チェックしたいサイトを開いた状態で「右クリック」→「検証」をクリックしてデベロッパーツールを表示させます。
一番右に「Lighthouse」という項目がありますのでそこを選択し、「Progressive Web App」にチェック、そして左側にある「Generate report」をクリックし、テストを開始します。

Google ChromeでのPWAテスト手順

しばらくすると結果が表示されますので、チェックマークが出れば正常にPWAに対応できています。

Google Chrome PWAテスト結果

Manifestファイル、Service Workerがどのように認識されているかもChromeのデベロッパーツールで確認できます。

デベロッパーツールの「Application」を選択すると左側のメニューに「Manifest」と「Service Workers」という項目がありますのでそちらから確認ができます。

Google Chrome 「Manifest」、「Service Workers」の確認

参考