【WordPress】自サイトを簡単にPWA化する【プラグイン無し】

pwa化とは?

最近よく聞くpwaとは普通のwebサイトをアプリのように出来るもので、
「Progressive Web Apps(プログレッシブ ウェブ アプリ)」の略です。
ストアからのアプリのインストールが不要で、容量などを気にすることなくホーム画面に追加することが出来ます。
WordPressではプラグインもいくつかありますが、今回はプラグインなしでサイトをpwa化する方法を紹介します。

pwa化のメリット

このpwa化では、

ホーム画面にインストールできる(アイコン付き)
プッシュ通知
アドレスバーを隠して表示
オフラインで動作


といったことが出来るようになります。
webアプリのためブラウザによって対応状況は変わってきてしまいますが、pwaを実装することによって、サイトのコンテンツをキャッシュでき、表示速度を高速化することが出来るようになります。
表示スピードが遅いとユーザーの離脱率が高くなってしまいます。
またオフラインでの利用が可能になることによってネット環境が不安定でもサイトを閲覧でき、ユーザーにとって利用しやすいサイトを作ることが出来ます。

pwa化のみですぐに評価は上がりませんが、ユーザーの満足度が向上しGoogleの評価に繋がればSEOにも良い影響が出るものと思われます。

PWAの導入準備

用意するファイルは

manifest.json
ServiceWorkers.js
アイコン画像(192x192)
アイコン画像(512x512)


こちらの4つを作成し、headerに読み込みのコードを書きました。

それぞれのファイルの中身

さいとに実装したコード内容は以下になります。

manifest.json

{
    "name": "WEBサイトの名前",
    "short_name": "WEBサイトの名前の略",
    "description": "WEBサイトの説明",
    "start_url": "/",
    "display": "standalone",
    "lang": "ja",
    "dir": "auto",
    "orientation": "any",
    "theme_color": "#E8EAF1",
    "background_color": "#E8EAF1",
    "icons": [
        {
            "src": "/images/pwa_192.png",
            "type": "image/png",
            "sizes": "192x192",
            "purpose": "any maskable"
        },
        {
            "src": "/images/pwa_512.png",
            "type": "image/png",
            "sizes": "512x512",
            "purpose": "any maskable"
        }
    ]
}

manifest.jsonはテーマフォルダの中にpwa1フォルダを作り置いています。画像はテーマフォルダ内のimageフォルダです。

ServiceWorkers

const CACHE_NAME = 'サイト名';
const OFFLINE_URL = 'サイトのURL';
const urlsToCache = ['サイトのURL'];
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);
            })
    );
});

manifest.jsonのstart_urlを「/」にし、Service Workersのファイルの置く階層をルートディレクトリ( wp や wordpress というサブディレクトリがつかない階層)にしておきます。

header


manifest.jsonの読み込み

<link rel="manifest" href="https://サイトのURL/pwa1/manifest.json">
<meta name="theme-color" content="#E8EAF1">
<meta name="apple-mobile-web-app-title" content="sitetitlle">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

Service Workersの読み込み

<script>
if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
        navigator.serviceWorker.register('/ServiceWorker.js').then(
            function (registration) {
                console.log('ServiceWorker registration successful with scope: ', registration.scope);
            },
            function (err) {
                console.log('ServiceWorker registration failed: ', err);
            }
        );
    });
}
</script>

Service Workersのキャッシュ

    <script>
navigator.serviceWorker.getRegistrations().then(function(registrations) {
  for(let registration of registrations) {
    registration.unregister();
  }
});
caches.keys().then(function(keys) {
  let promises = [];
  keys.forEach(function(cacheName) {
    if (cacheName) {
      promises.push(caches.delete(cacheName));
    }
  });
});
</script>

まとめ

wordpressサイトのpwa化は必要なファイルを用意し、正しい階層に置くことが出来れば簡単にサイトをアプリ化出来ます!
ユーザーにとって快適なサイト作りを心掛け、Googleの評価へつながれば上位表示が目指せます!
アプリのように簡単にアクセスができ、高速で見たいページが見られるようになるpwa化を是非試してみてください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です