私は少数派の読者であり、少数派になってから 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 ページのアドレスにアクセスするだけで、Chrome はページの読み込み後に追加のプロンプトを表示します。もし表示されない場合（iOS の Safari など）、ブラウザの「その他」をクリックして、直接デスクトップに追加する必要があります。
PC では、Chrome の右上（ウェブリンクの最右端）にダウンロードボタンがあります。クリックすると、コンピュータのデスクトップに追加されます。アンインストールする場合は、デスクトップのショートカットを削除するだけではなく、PWA ページを開いてからアンインストールボタンをクリックする必要があります。