Progressive Web Apps

PWA(Progressive Web Apps)とは、WebページをネイティブアプリのようなUXを提供するためのものです。

なんでこれを思い出したかと言うと https://doper.io というWebサイトを開発していて、iOSクライアントは去年なんとか作りましたが、Androidはなかなか手が出せなくて、今年に入ってなんとかしようと思いPWAがいいんじゃないかと思いました。

条件

1. Webサイトがhttps対応してること
2. Android Chromeが必要

対応

manifest.json

manifest.jsonファイル作成します。

{
    lang: "ja",
    name: "Doper Lite",
    short_name: "Doper Lite",
    start_url: "/",
    display: "standalone",
    theme_color: "#24292e",
    icons: [
        {
            src: "/img/launcher-icon48.png",
            sizes: "48x48",
            type: "image/png"
        },
        {
            src: "/img/launcher-icon-72.png",
            sizes: "72x72",
            type: "image/png"
        },
        {
            src: "/img/launcher-icon-96.png",
            sizes: "96x96",
            type: "image/png"
        },
        {
            src: "/img/launcher-icon-144.png",
            sizes: "144x144",
            type: "image/png"
        },
        {
            src: "/img/launcher-icon-192.png",
            sizes: "192x192",
            type: "image/png"
        }
    ]
}

https://www.w3.org/TR/appmanifest/

作成したmanifest.jsonファイルは https://doper.io/manifest.json のようにアクセスできるようにします。

headタグ

headに以下のようにmanifestを指定します。

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

service-worker.js

service-worker.jsを作成します

self.addEventListener('install', function (e) {
    console.log('[ServiceWorker] Install');
});

self.addEventListener('activate', function (e) {
    console.log('[ServiceWorker] Activate');
});

self.addEventListener('fetch', function (e) {
    console.log('[ServiceWorker] Fetch');
});

以下のjsコードを埋め込みます。

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

ホーム画面に追加表示タイミング

1週間で2回表示したときに表示されるという仕様らしいです。

以上で、Android Chromeでアクセスしてメニューから「ホーム画面に追加」するか、スクロールしてると「ホーム画面に追加」ボタンが現れるはずです。

https://developers.google.com/web/fundamentals/app-install-banners/?hl=ja#test

上のようにデスクトップからテストもできます。

こうやって並べて見ると気持ちいいｗ

ちょっと不思議

Androidアプリ持ってないサービスはなんでこういう対応しないんですかね？Qiitaみたいなテック系すらサポートしてないのはなぜ？