とりあえず最低限のPWAの設定をサイトに入れ込んでアプリっぽくしてみた話

2020-12-16 HTML, JavaScript, iOS, Android

ブラウザやOSの仕組みを使用することで、Webアプリであってもネイティブアプリのようにインストールして使うことができるPWA。

オフラインでも動作するようにするには少々手間が必要ですが、とりあえずWebサイトをアプリっぽく見せるだけであれば比較的簡単に設定できます。

iOS、Android、PCのすべてで確実に対応させるには、下記のものを準備すればOKです。

manifest.json
ServiceWorker用のjavascript
ServiceWorkerを呼び出すjavascript
サイトのアプリアイコン

順に説明します。

まず、manifest.jsonについて。

このmanifest.jsonは、PWAとして動作するサイトそのものについて定義するファイルになります。
次のように記述し、ドキュメントルート直下に保存しておきます。

なお、Basic認証経由でサイトを閲覧している場合は、manifeat.josonが取得できない仕様になっているため、注意が必要です。

{
    "name": "サイト名",
    "short_name": "省略サイト名",
    "icons": [
        {
            "src": "/path/to/appicon.png",
            "sizes": "144x144",
            "type": "image/png"
        }
    ],
    "start_url": "/",
    "display": "standalone",
    "theme_color": "#000"
}

・name: PWAとするサイトのサイト名(アプリ名)を入れます。
・short_name: こちらもアプリ名として扱われますが、こちらはスマホのホーム画面などのスペースが限られている場所で表示する場合に使われます。
・icons: 異なるサイズごとにそれぞれのサイズのアプリアイコンを指定します。
こうすることで、解像度の違う端末でアプリとして登録した際に、それぞれにあったサイズのアプリアイコンが使用されます。
とりあえず動作を確認する場合は、144×144指定の指定のみ入れておけばよさそうです。
・start_url: アプリ登録時にトップページとなるURL(ドメイン部分は省いて良い)を指定します。
・display: こちらのサイトを参照してください。
PWAのmanifest.jsonで「display」の指定による表示の違い（fullscreen、standaloneなど） – OAR CODE
・theme_color: アプリのテーマカラーを指定します。(PC版Chromeの場合、タイトルバーの色がここで指定された色になります。)

上記で設定したmanifest.jsonを呼び出す記述を、PWA化するサイトのheadタグ内に記述しておきます。

<head>
    <!-- 省略 -->
    <link rel="manifest" href="{{asset('/manifest.json')}}">
    <!-- 省略 -->
</head>

次にServiceWorkerの処理を記述したjsファイルを準備します。

今回はServiceWorkerをつかって処理をする想定ではありませんが、このファイルがないとそもそもPWAとして認識されないという情報があったため、作成しておきます。

内容は下記のとおりです。

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

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

self.addEventListener('fetch', function (event) {
  console.log('ServiceWorker loaded')
});

上記の内容で、例えばファイル名を”serviceWorker.js”のようにした上で任意の場所に保存しておきます。

同時に、PWA化するサイトのヘッダ部分にServiceWorkerを起動するコードを入れておきます。

 window.addEventListener('load', function () {
            if ('serviceWorker' in navigator) {
                navigator.serviceWorker.register("/path/to/js/serviceWorker.js")
                    .then(function (registration) {
                        console.log("serviceWorker registed.");
                    }).catch(function (error) {
                    console.warn("serviceWorker error.", error);
                });
            }
});

最後にiOSようにヘッダにPWA向けの設定も入れていきます。

<head>
    <!-- 省略 -->
    <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="サイト名">
    <link rel="apple-touch-icon" href="/path/to/appicon.png" sizes="144x144">
    <!-- 省略 -->
</head>

なお、”apple-touch-icon”で指定するアイコンは透過レイヤーが入っていると、iOSでホーム画面にアイコンを置いた際に背景が黒く塗りつぶされているため、透過レイヤーは削除したほうが良さそうです。

以上で準備OKです。

あとはPCやスマホの”ホーム画面に追加”や”ショートカットを作成”を選ぶと、作成したサイトのアプリアイコンが作成され、起動するとアプリモードで起動します。