モバイルデバイスの普及に伴い、ますます多くの人々がモバイルデバイスでウェブページを閲覧するようになりました。ユーザーエクスペリエンスを向上させるために、多くのウェブサイトが PWA（プログレッシブウェブアプリケーション）機能を実装しています。
hexo-pwa プラグインのインストール#
Hexo ブログでは、hexo-pwa プラグインを使用して PWA 機能を実現することができます。まず、以下のコマンドをコマンドラインに入力してインストールする必要があります：
npm install hexo-pwa --save
注意：このステップで私のブログはエラーが発生するため、最終的にアンインストールしましたが、多くのチュートリアルでこのステップが含まれています。
hexo-service-worker プラグインのインストール#
ターミナルに以下のコードを入力します：
npm install hexo-service-worker --save
manifest.json ファイルの設定#
PWA 機能の中心は manifest.json ファイルです。このファイルにはアプリケーションの名前、アイコン、テーマカラーなどの情報が含まれており、ブラウザはこれらの情報に基づいてアプリケーションのアイコンを表示し、アプリケーションのショートカットを作成します。
このファイルでは、アプリケーションのさまざまな情報を指定する必要があります。
Hexo ブログのルートディレクトリに新しいフォルダsource/を作成し、その中にmanifest.jsonという名前のファイルを作成することができます。
または、次のツールを使用して直接生成することもできます：Need help building your headless eCommerce storefront?。
以下は例です（私の例）：
{
"theme_color": "#f69435",
"background_color": "#f69435",
"display": "fullscreen",
"scope": "/",
"start_url": "/",
"name": "\u957f\u8857\u77ed\u68a6",
"short_name": "\u957f\u8857\u77ed\u68a6",
"description": "\u6b64\u8def\u5c71\u9ad8\u8def\u8fdc\uff0c\u6211\u53ea\u5269\u53e3\u888b\u73ab\u7470\u4e00\u7bc7",
"icons": [
{
"src": "/img/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/img/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/img/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/img/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
ここで、nameはアプリケーションの名前を指定し、short_nameはアプリケーションの短い名前を指定します。iconsはアプリケーションのアイコンを指定し、start_urlはアプリケーションのホームページのアドレスを指定します。theme_colorはアプリケーションのテーマカラーを指定し、background_colorはアプリケーションの背景色を指定します。displayはアプリケーションの表示方法を指定します。
sw.js ファイルの設定#
PWA 機能には、Service Worker（サービスワーカー）を使用してオフラインキャッシュなどの機能を実現する必要があります。Hexo ブログのルートディレクトリに新しいフォルダsource/sw.jsを作成し、その中にsw.jsという名前のファイルを作成することができます。このファイルには、オフラインキャッシュなどの機能を実現するためのいくつかのコードを記述する必要があります。以下は例です：
const cacheName = 'my-cache';
self.addEventListener('install', event => {
event.waitUntil(
caches.open(cacheName).then(cache => {
return cache.addAll([
'/',
'/index.html',
'/css/style.css',
'/js/script.js',
'/images/logo.png'
]);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
ここで、cacheNameはキャッシュの名前を指定し、installイベントでは、キャッシュにキャッシュするリソースを追加することができます。fetchイベントでは、キャッシュからリソースを取得し、キャッシュに必要なリソースがない場合はネットワークから取得します。
ブログのデプロイとテスト#
設定が完了したら、ブログをサーバーにデプロイし、PWA 機能が正常に動作するかどうかをテストすることができます。まず、以下のコマンドをコマンドラインに入力して静的ページを生成します：
# キャッシュのクリア / 静的ページの生成 / ローカルプレビュー
$ hexo clean && hexo g && hexo s