私は少数派の読者であり、少数派になってから 419 日が経ちました。
少数派からは多くのことを学び、自分の視野を広げることができました。そのため、少数派のアプリは私の携帯電話でよく使用するアプリの一つです。昨年、携帯電話を Android に変えた後、Android のアプリが長い間更新されていないことに気付きました。Android クライアントは常に「年季の入った修理不可能な状態」にありますが、iOS クライアントは常に更新され、UI や新機能が追加されています。これには非常にうらやましさを感じます。
しかし、少数派が 3 月 31 日に公開した記事では、彼らが Android クライアントについて説明し、より優れた解決策を提案しています。
昨年、少数派のウェブサイトが改装された後、新しいデザインに合わせた少数派 iOS クライアント 2.0 が最近公開されました。残念ながら、開発能力が非常に限られているため、Android プラットフォームの多様なモデルへの適応と互換性の問題は本当に頭を悩ませており、少数派の Android クライアントは以前から「年季の入った修理不可能な状態」にありました。
幸いなことに、少数派は Android クライアントに対して「より優れた解決策」を見つけました - プログレッシブウェブアプリ（以下 PWA と略します）。PWA は、コンテンツの完全な表示を保証しながら、クライアントアプリケーションよりも軽量で、ウェブ版よりも機能が強力な新しい体験を提供し、Android、iOS、Windows など、複数のプラットフォームに対応しています。
PWA という概念については初めて知りましたので、興味津々で Google で調べ始めました...
PWA について#
PWA は、Google が 2016 年に提案し、2017 年に正式に導入され、2018 年に大きな進展を遂げた概念です。Google、Microsoft、Apple など、世界の主要なブラウザメーカーが PWA 技術をサポートすることを発表しています。
PWA は、Progressive Web App の略で、日本語では「渐進的 Web アプリ」と訳されます。その目的は、さまざまな Web 技術を使用して、ネイティブアプリに近いユーザーエクスペリエンスを実現することです。
既存の Web アプリとネイティブアプリの比較を見ると、オフラインキャッシュ、没入型体験などの差がありますが、これらの差を埋めるために、既に実装されている Web 技術を使用して、ネイティブアプリに近いユーザーエクスペリエンスを実現することができます。
公式の発言は以上ですが、私自身の体験を少し話しますと、PWA はウェブページをブラウザの外殻から取り除いたもので、ほぼアプリのような形式でモバイルデスクトップ上に存在します。通常のウェブページをデスクトップに追加するのとは異なり、ローカル通知の機能やキャッシュの機能もあります。さらに、Android、iOS、Windows など、複数のプラットフォームに対応しています。私にとっては、起動時にロゴが表示されるので、非常に魅力的です。
自分のブログを PWA にする#
少数派の PWAを体験した後、自分のブログを PWA にすることはできないかと考えました。インターネットで情報を調べた後、意外にも簡単な手順だとわかりました。以下に私自身の手順を説明します。
manifest.json の追加#
まず、manifest.json というファイルを作成します。このファイルは、アプリのアイコンや名前などの情報を設定するためのものです。以下に私の設定を共有しますが、詳細な設定についてはMDNを参照してください。
{
"dir": "ltr",
"lang": "ja",
"name": "Magren's Blog",
"short_name": "Magren's Blog",
"theme_color": "##ffffff",
"background_color": "##d4d4d4",
"display": "standalone",
"start_url": "./index.html",
"icons": [
{
"src": "avatar152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "avatar192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "avatar384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "avatar512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}
次に、HTML ファイルに追加する必要があります。もしブログを持っている場合は、テーマフォルダを探してください。
<link rel="manifest" href="manifest.json" />
Service Worker の追加#
Service Worker は、ページのキャッシュやオフライン、バックグラウンド通知などを実現するための API です。ただし、これは私の個人ブログなので、通知機能は追加していません。
まず、ブラウザが Service Worker をサポートしているかどうかを確認し、サイトの Service Worker を登録するための関数を呼び出します。Service Worker は、私たちのアプリ内に存在する JavaScript ファイルです。
以下のコードを HTML のページに追加します。
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/sw.js', {scope: '/'})
.then(function (registration) {
// 登録成功
console.log('ServiceWorker registration successful');
})
.catch(function (err) {
// 登録失敗:(
console.log('ServiceWorker registration failed');
});
});
}
</script>
次に、sw.js（Service Worker）を追加します。ここではキャッシュするパスやキャッシュする静的ファイルのリストを定義することができます。このリストは Webpack プラグインで生成することもできますが、ここではホームページのみをキャッシュしています。
// Service Workerのイベントを監視
self.addEventListener('install', function (event) {
var homePage = new Request('index.html');
event.waitUntil(
// ホームページをリクエストし、キャッシュに保存する
fetch(homePage).then(function (response) {
// cache-homePageというキャッシュを作成
return caches.open('cache-homePage').then(function (cache) {
return cache.put(homePage, response);
});
}));
});
// ページのリクエスト
self.addEventListener('fetch', function (event) {
event.respondWith(
fetch(event.request).catch(function (error) {
// リクエストが失敗した場合、キャッシュからキャッシュされたページを返す
return caches.open('cache-homePage').then(function (cache) {
return cache.match('index.html');
});
}));
});
// ホームページのリフレッシュ
self.addEventListener('refreshHomePage', function (response) {
return caches.open('cache-homePage').then(function (cache) {
// リフレッシュ後のページをキャッシュに保存する
return cache.put(offlinePage, response);
});
});
最後に#
最後に、PWA の使用方法について説明します。モバイルデバイスでは、サポートされているブラウザ（Chrome や Xiaomi のデフォルトブラウザなど）で PWA ページの URL にアクセスするだけで、Chrome はページの読み込み後に追加のプロンプトを表示します。ただし、（iOS の Safari などの）表示されない場合は、ブラウザの「その他」を手動でクリックし、デスクトップに追加する必要があります。
PC では、Chrome の右上隅（ウェブリンクの最右端）にダウンロードボタンがあります。クリックすると、コンピュータのデスクトップに追加されます。アンインストールする場合は、デスクトップのショートカットを削除するだけではなく、PWA ページを開いてからアンインストールボタンをクリックする必要があります。