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

{
    "name": "SimoSimo",
    "short_name": "SimoSimo",
    "description": "爆速WordPressテーマ「Godios.」開発者、Simmonのブログ。このブログでは主に、デザインやプログラミングについて書いています。",
    "start_url": "/?utm_source=homescreen&utm_medium=pwa",
    "display": "standalone",
    "lang": "ja",
    "dir": "auto",
    "orientation": "any",
    "theme_color": "#6a5f80",
    "background_color": "#ffffff",
    "icons": [
        {
            "src": "/pwa_192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "/pwa_512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ]
}

const CACHE_NAME = 'simosimo_ver_1';
const urlsToCache = [
    '/',
    '/wp-content/themes/godios-child/images/site-icon.png',
    '/wp-content/themes/godios-child/images/ogp-rectangle.png',
    '/pwa_512.png',
    '/wp-content/uploads/2018/05/site-logo.min_.png',
    '/wp-content/uploads/2018/05/godios-link-banner.png',
    '/wp-content/uploads/2018/05/godios-link-banner-160x160.png',
    '/wp-content/uploads/2018/05/godios-link-banner-320x320.png',
    '/wp-includes/js/jquery/jquery.js',
    '/wp-includes/js/jquery/jquery-migrate.min.js',
    '/wp-content/themes/godios/js/godios.min.js',
    '/wp-content/themes/godios/js/god.min.js',
    '/wp-content/themes/godios-child/js/god-dispatcher.js',
    '/wp-content/themes/godios/js/god-custom.min.js'
];

self.addEventListener('install', function(event) {
    // インストール処理
    event.waitUntil(
        caches.open(CACHE_NAME)
        .then(function(cache) {
            console.log('Opened cache');
            return cache.addAll(urlsToCache);
        })
    );
});

self.addEventListener('activate', function(event) {
    const cacheWhitelist = [CACHE_NAME];

    event.waitUntil(
        caches.keys().then(function(cacheNames) {
            return Promise.all(
                cacheNames.map(function(cacheName) {
                    if (cacheWhitelist.indexOf(cacheName) === -1) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

self.addEventListener('fetch', function(event) {

    // 管理画面はキャッシュを使用しない
    if (/\/wp-admin|\/wp-login|preview=true/.test(event.request.url)) {
        return;
    }

    // POSTの場合はキャッシュを使用しない
    if ('POST' === event.request.method) {
        return;
    }

    // 管理画面にログイン時はキャッシュを使用しない
    console.log(event);

    event.respondWith(
        caches.match(event.request)
        .then(function(response) {
            // キャッシュがあったら、そのレスポンスを返す
            if (response) {
                return response;
            }

            // 重要：リクエストをcloneする。リクエストはStreamなので
            // 一度しか処理できない。ここではキャッシュ用、fetch用と2回
            // 必要なのでリクエストはcloneしないといけない
            const fetchRequest = event.request.clone();

            return fetch(fetchRequest,{credentials: 'include'}).then(
                function(response) {
                    // レスポンスが正しいかをチェック
                    if (!response || response.status !== 200 || response.type !== 'basic') {
                        return response;
                    }

                    // 重要：レスポンスを clone する。レスポンスは Stream で
                    // ブラウザ用とキャッシュ用の2回必要。なので clone して
                    // 2つの Stream があるようにする
                    const responseToCache = response.clone();

                    caches.open(CACHE_NAME)
                        .then(function(cache) {
                            cache.put(event.request, responseToCache);
                        });

                    return response;
                }
            );
        })
    );
});

<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) {
					// Registration was successful
					console.log('ServiceWorker registration successful with scope: ', registration.scope);
				}, function(err) {
					// registration failed
					console.log('ServiceWorker registration failed: ', err);
				});
			});
		}
	}, false);
</script>
<!-- manifest.jsonのtheme_colorと同じ色を指定します -->
<meta name="theme-color" content="#6a5f80"/>

<!-- 以下はiOS用のコードです -->
<!-- ホーム画面に表示されるアプリ名 -->
<meta name="apple-mobile-web-app-title" content="SimoSimo">
<!-- URLバーの非表示 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- ステータスバーのスタイル（default / black / black-translucent） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- アイコンの指定 -->
<link rel="apple-touch-icon-precomposed" href="/pwa_512.png" sizes="512x512">