PWAを実装してみる

PWAはProgressive Web Appsの略で、WebページでネイティブアプリのようなUXを提供できる仕組みです。
今回はサンプルページを作成して、PWAを簡単に実装してみます。

実装方法

まずはサンプルページを作成してみます。

index.html

<h1>1ページ目</h1>
<ul>
	<li><a href="index2.html">2ページ目</a></li>
	<li><a href="index3.html">3ページ目</a></li>
</ul>

index2.html

<h1>2ページ目</h1>
<ul>
	<li><a href="index.html">1ページ目</a></li>
	<li><a href="index3.html">3ページ目</a></li>
</ul>

index3.html

<h1>3ページ目</h1>
<ul>
	<li><a href="index.html">1ページ目</a></li>
	<li><a href="index2.html">2ページ目</a></li>
</ul>

各ページ間を遷移できるだけの簡単なものです。

次にService Workerのファイルを作成します。
Service Workerはバックグラウンドで実行されるスクリプトで、必要なファイルのキャッシュやプッシュ通知などの設定が行えます。
今回はconsoleのみ記述します。

service-worker.js

self.addEventListener('install', function(e) {
  console.log('install');
});

self.addEventListener('activate', function(e) {
  console.log('activate');
});

self.addEventListener('fetch', function(e) {
  console.log('fetch');
});

最後にmanifest.jsonファイルを作成します。
manifest.jsonはアイコンや起動時の設定などを指定できるファイルで、今回は以下のように設定しました。

manifest.json

{
  "name": "cly7796.net PWA sample",
  "short_name": "PWA",
  "icons": [{
    "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }],
  "start_url": "./index.html",
  "display": "standalone"
}

アイコン画像も各サイズ用意して、指定したパスの位置に配置しています。

これでファイルの用意は一通り完了しましたので、最初に用意したHTMLファイルに読み込みの記述を追加します。
各HTMLのhead内にmanifest.jsonの読み込みなどを追加します。

head

<link rel="manifest" href="./manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="cly7796.net PWA sample">
<link rel="apple-touch-icon" href="./icons/icon-152x152.png">

Service Workerが登録されるように記述を追加します。

<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('./service-worker.js')
    .then(function() { console.log('Service Worker Registered'); });
}
</script>

これで実装は完了です。
HTTPS対応が必要なので、今回はGitHub Pagesで公開するようにします。
公開したページがこちらになります。
　

確認方法

PCで確認する場合、chromeのデベロッパーツールを使用します。
該当ページにアクセスしてデベロッパーツールを開き、ApplicationパネルのManifestペインを選択します。
manifest.jsonに記載した情報が表示されますが、この中のAdd to homescreenをクリックします。

ブラウザ上に以下のメッセージが表示されるので、追加をクリックします。

ショートカット追加のアラートが表示されるので、作成をクリックします。

chrome://appsにアクセスすると、ショートカットが追加されています。
またはデスクトップにもショートカットアイコンが追加されます。

ショートカットを選択すると、以下のようにPWAでサンプルページを表示できました。

今回は簡単に作っただけなのでPWAらしい機能は何も試せていませんが、そのうち色々な機能を試せればなと思います。
　

【参考サイト】

• はじめてのプログレッシブ ウェブアプリ
• Service Worker の紹介  |  Web  |  Google Developers
• PWA 入門 〜iOS SafariでPWAを体験するまで〜 2018年6月版 – Qiita