WebサイトのPWA対応で必要なこと まとめ

PWA（Progressive Web Apps）という仕組みで、モバイル向けWebサイトをスマートフォン用のアプリとして扱えるようにできるらしいので、自身が管理しているWebサイトをこのPWAとやらに対応してみました。

PWAのメリットは冒頭にも述べた通り、モバイル向けのWebサイトをちょっとしたひと手間でスマートフォン用のアプリとして扱えるようになることです。

わざわざ、iOS/Android用にストアでアプリを公開するといった手間がいらず、アプリを起動した時にブラウザのアドレスバーを消したりして、ネイティブアプリに近い見た目として使用することができます。

実際にPWAに対応したWebサイトをホーム画面に追加後、スマートフォンで開くと以下のような表示となります。

スッキリしていてネイティブアプリのようですね。

デメリットは認知度が低い点で、Webサイトをホーム画面に追加するという習慣があまりないので、今のところは、やらないよりはいい、というレベルなのかな、と思います。

以下、WebサイトのPWA対応でやったことの内容になります。

PWAに対応するためには、まず「manifest.json」を用意します。

「manifest.json」の中身は以下の通り。

{
  "name": "P-Arts Board",
  "short_name": "PAB",
  "theme_color":"#000000",
  "background_color":"#ffffff",
  "start_url": "/",
  "display": "fullscreen",
  "icons": [
    {
      "src": "images/pab-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/pab-384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/pab-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

それぞれの項目について簡単に説明します。

name	アプリ起動時のスプラッシュ画面下部に表示
short_name	スマートフォンのホーム画面に表示される名称
theme_color	アプリ起動後の上部ステータスバーの色
background_color	アプリ起動時のスプラッシュ画面の背景色
start_url	開始URL
display	fullscreen / standalone / minimal-ui / browser から選択 （「fullscreen」や「standalone」を選ぶとブラウザらしさが消える）
icons	ホーム画面のアイコンやスプラッシュ画面に表示される画像 （192×192サイズがあればそれより小さい画像は不要？ 詳細は不明）

manifest.jsonを作成したら、Webサイト配下に配置してindex.htmlなどから参照するようにします。

index.html

<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="/images/pab-192.png" sizes="192x192"/>

「apple-touch-icon」はiOS端末で必要なものになります。これがないとiOSではホーム画面にアイコンが表示されません。

なお、manifest.jsonや必要なサイズの画像はこちら（App Manifest Generator）のサイトを使って自動で生成することができます。

続いてサービスワーカー（Service worker）の設定で、まずは、JSファイル（service-worker.js）を用意します。

「service-worker.js」の中身は以下の通り。

self.addEventListener('fetch', function(event) {});

上記のイベントリスナー（fetch）を記述しておかないと、PWA対応サイトとして認識されないのか、Webサイトアクセス時、画面下部に「ホーム画面に～～を追加」というポップアップが表示されません。

「service-worker.js」をWebサイト配下に配置したら、こちらもindex.htmlなどで読み込むようにします。

index.html

<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker
            .register('/service-worker.js')
            .then(function() { console.log('service worker registered'); })
            .catch(function(err){ console.log('service worker registration failed:', err); });
    }
</script>

対応は以上で終わりです。

既存のWebサイトにも簡単に対応できるのがいいですね。

上記の対応後、Webサイトにアクセスして、以下のようなポップアップが表示されればOKです。

ポップアップはすぐに表示される場合もあれば、しばらく画面を操作しないと表示されない場合もあったので、動作確認は慎重にした方がいいです。

なお、上記のポップアップは「https」でアクセスした際にのみ表示されるので、ローカルでの動作確認では表示されないことも注意が必要です。何度やっても表示されずにそれが原因だったことが何度かありました。

ちなみに、正常にPWAとして動作していれば、ブラウザのメニューから「ホーム画面に追加」でもPWAに対応したアプリとしてホームに配置されます。

対応した中では、こちらのサンプルサイト（P-Arts Board）が一番PWAの恩恵を受けていると思います。