コンテンツへスキップ

PWAの基礎知識(その5)「Web App Manifestの使い方」

by : 2018/07/12

PWA(Progressive Web App)という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。

今回はそんなPWAの基礎になる、Web App Manifestについて紹介します。

利用できるブラウザについて

Web App Manifestはまだ仕様が確定しておらず、一部のWebブラウザでしか使えません。Google Chromeはデスクトップ(アイコンのみ)、スマートフォンともに利用できます。また、iOSのSafariでは11.3からサポートを開始しています。デスクトップで利用できるのはEdgeくらいのようです。

要件

技術的には以下が必須になります。

  • HTTPSサイトである
  • Service Workerを使っている
  • マニフェストファイルを配置している

Service Workerを使っている

Service Workerを使ってオンライン上のファイルをキャッシュします。まずWebブラウザ側のJavaScriptでService Worker用のJavaScriptを読み込みます。

if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('./sw.js', {
scope: './'
})
.then((reg) => {
if(reg.installing) {
console.log('Service Worker をインストール中です');
} else if(reg.waiting) {
console.log('Service Worker をインストールしました');
} else if(reg.active) {
console.log('Service Worker は有効です');
}
})
.catch((error) => {
// registration failed
console.log('登録失敗:', error);
});
}

view raw
index.js
hosted with ❤ by GitHub

Service Worker用のJavaScriptではキャッシュしたいファイルを読み込みます。

self.addEventListener('install', e => {
// インストール時に実行
e.waitUntil(
caches.open('mismith').then(cache => {
return cache.addAll([
'/',
'/client.js',
'/style.css'
])
.then(() => self.skipWaiting());
})
);
});

view raw
index.js
hosted with ❤ by GitHub

マニフェストファイルを設置している

マニフェストファイルは manifest.json という名前で作られることが多いようです。このファイルをHTMLのheadタグ内で読み込みます。

<link rel="manifest" href="/manifest.json">

view raw
index.html
hosted with ❤ by GitHub

内容は次のようになります。縦向きで、アプリのようなUIで表示されます。また、テーマカラーであったり、スプラッシュスクリーンの背景色なども指定できます。

{
"display": "standalone",
"short_name": "hifiveTodo",
"name": "hifiveTodo",
"orientation": "portrait",
"icons": [
{
"src": "launcher-icon-1x.png",
"type": "image/png",
"sizes": "48×48"
},
{
"src": "launcher-icon-2x.png",
"type": "image/png",
"sizes": "96×96"
},
{
"src": "launcher-icon-3x.png",
"type": "image/png",
"sizes": "192×192"
}
],
"start_url": "./index.html",
"background_color": "#e1efde",
"theme_color": "#e1efde"
}

view raw
index.json
hosted with ❤ by GitHub

これをWebサイト上に配置します。

サイトを表示する

Google Chromeの場合は5分以上置いてアクセスするとインストールバナーが表示されるとあります。しかし体感としてはもっと空けるか、Webブラウザの設定を変更した方が良いのではないかと思います。

表示して少し経つとバナーが表示されます。

こういう小さいバナーの場合もあります。

バナーをタップすると、インストールの確認が出ます。

インストールするとホーム画面上にアイコンが表示されます。

アプリと同じなので、コンテクストメニューがブックマークとは異なります。

アイコンをタップするとアプリが表示されます。アプリのアイコンで192pxのものを用意しておくとスプラッシュスクリーンが表示されるようです。Service Workerを使っていますのでオフラインでも使えます。


Web App Manifestはまだブラックボックスな動作もあります(バナーが表示されるタイミングや再表示させる方法など)。アプリを一度アンインストールした後、再度インストールする方法も明文化されていません。

とは言え、Webアプリをネイティブアプリ化できるのは面白い技術で、通常のアプリストアを頼らない配布も便利です。業務アプリなどでも使えそうです。

From → HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。