techa1008

ROCKET NOTE

2018.02.21

簡単なPWAを作成する

PWA(Progressive Web Apps)は、GoogleによるwebアプリのUXをネイティブアプリのそれに近づけるプロジェクトで、これが普及すればアプリストアを通さずにアプリをインストールできるようになります。

以下のように普通のHTMLを用意するところから始めます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>簡単なPWAを作成する(デモ)</title>
	<link rel="manifest" href="./manifest.json">
	<link rel="stylesheet" href="./css/main.css">
</head>
<body>

<div class="wrap">
	<h1>ROCKET NOTE</h1>
	<img src="./images/main.png" alt="">
	<p>techa1008が運営するブログ。おもにwebデザインに関して、知ったこと、やったことを記録。</p>
	<div class="btn_set">
		<a href="http://techa.sakura.ne.jp/rocket-note/" class="btn">Go</a>
	</div>
	<div class="copyright">
		<small>&#169; techa1008</small>
	</div>
</div>

</body>
</html>

「./css/main.css」はレイアウト用のCSS、「./images/main.png」は適当な画像です。今回の話と直接関係ないので詳細は割愛します。

さて、これをPWAにしていきます。

まずは、上記HTMLのhead要素内にある「manifest.json」を用意します。manifest.jsonはアプリの情報を記述するためのファイルになります。

{
	"name":"PWA Test",
	"short_name":"PWATEST",
	"start_url":"./",
	"orientation":"any",
	"display":"standalone",
	"background_color":"#fff",
	"icons":[
		{
			"src":"images/app-icon-192.png",
			"sizes":"192x192",
			"type":"image/png"
		}
	]
}

name
アプリの名称。ホーム画面に追加する時に表示される名前。

short_name
アプリの名称。ホーム画面上で表示される名前。

start_url
アプリ起動時にアクセスするURL。相対パスで指定する必要があるかも?

orientation
端末の向きを指定。anyは縦、横ともに許可。

display
ChromeのUIをどの程度使うかを指定。standaloneはUIをほぼ使わないモード。displayについてこちらで試しています

background_color
アプリロード時のみに使用される背景色。

icons
アプリのアイコン。ここではindex.htmlと同じ階層に「images」というフォルダを作成して、その中に「app-icon-192.png」という画像を保存しました。

次に、Service Workerというスクリプトを使用します。

先のHTMLのbody閉じタグ直前に、以下のJavaScriptを追加します。

<script>
// Service Worker対応ブラウザ
if ('serviceWorker' in navigator){

	// Service Workerを登録
	navigator.serviceWorker.register('./sw.js').then(function(registration){

		// とりあえず何もしません

	});

}
</script>

Service Workerの設定は、見ての通りsw.jsという外部JavaScriptファイルを作成してそこに記述します。

// インストール
self.addEventListener('install', (event) => {

	// とりあえず何もしません

});

// 起動
self.addEventListener('activate', (event) => {

	// とりあえず何もしません

});

// ネットワークリクエスト
self.addEventListener('fetch', (event) => {

	// とりあえず何もしません

});

これで完成です。実際にデモページを作成しました。

Android端末のGoogle Chromeでページにアクセスすると、インストールするかどうか聞かれます。

あるいは、右上メニュー「ホーム画面に追加」からもインストールできます。

ちなみに、見ているページがPWAに対応していない(Service Workerが登録されていない)場合もこのメニューは存在しますが、その場合は単にブックマークをホーム画面に作成するだけです。

「ホーム画面に追加」を選ぶと確認のポップアップが出るので、追加します。

追加できたら、ネイティブなアプリと同様にホーム画面にショートカットアイコンが作成されます。

起動してみると、スプラッシュ画面が表示されて、最初に見たページと同じ内容を確認することができます。

問題なくリンクもたどることができます。

なお、インストール済みで、再度インストール用のページにアクセスすると、メニューが「ホーム画面に追加」から「{ アプリ名 }を起動」に変わっているのがわかります。

アンインストールは、ネイティブのそれとまったく同じです。