PWA対応WEBページの設定～Androidスマホのホーム画面に追加できるWEBアプリケーション

プログレッシブウェブアプリ（PWA）と呼ばれるものがあります。
WEBページをPWAとして動作できるように設定することで、Androidスマホのホーム画面に追加できる、WEBアプリケーションとすることができます。

ここでは、既存の（またはPWA用に記述された）WEBページを、PWAとして動作させる方法について説明します。

サンプル
PWA対応のための設定方法
Windows上でのテスト
Windows上でのテスト（再インストール）
スマホにインストール
スマホにインストール（再インストール）
参考

サンプル

https://pcvogel.sarakura.net/pub/test/pwa.html の中身をWEBアプリとして実行するサンプルです。
（このサンプルでは、「テストです」の表示だけですが・・）

ホーム画面にアプリのアイコンが表示され、タップするとWEBの内容が表示され、WEBアプリケーションとして動作します。

スマホで https://pcvogel.sarakura.net/pub/test/pwa.html にアクセスします。

次のように出るのでタップします。

次の箇所で [追加] を押します。

ホーム画面にアプリのアイコンが登録されます。

すると、WEBアプリとして実行できます。
ブラウザで起動するときと異なり、URLバー等がありません。

PWA対応のための設定方法

コンテンツ（ここでは index.html とします）があるディレクトリに、pwa.html、sw.js、manifest.json、アイコンファイルを置きます。
pwa.html、sw.js、manifest.json、アイコンファイルの内容は次のようにします。

- pwa.html

ファイル名は何でもいいのですが、ここでは pwa.html とします。

<html>
<head>
<link rel="manifest" href="manifest.json">
<script>
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js')
      .then((reg) => {
        console.log('Service worker registered.', reg);
      });
}
</script>
</head>
</html>

- sw.js

pwa.html の navigator.serviceWorker.register(‘sw.js’) で指定される .jsファイルです。

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

- manifest.json、アイコンファイル

manifest.json は pwa.html の <link rel=”manifest” href=”manifest.json”> で指定されるファイルです。
アイコンファイルは、manifest.json 内の記述でパスを指定します。

https://app-manifest.firebaseapp.com/ で必要項目の入力とアイコンファイルのアップロードをおこなうと、自動生成された manifest.json と適切なサイズに変換されたアイコンファイルを取得できます。

次の箇所で必要事項を設定します。

App Name ：スマホでアプリケーション起動時のスプラッシュ画面で表示される名称。
また、Windowsで動作させた場合はデスクトップに作られるアプリへのショートカット名になります。
日本語名OKです。

Short Name ：スマホで、ホーム画面やアプリの一覧で表示される名称。日本語名OKです。

Display Mode ： Standalone にします

Start URL ：アプリ起動時のURL を pwa.html から見た相対パスで指定します。
ここでの例では、単に index.html と入れます。（先頭に / を入れないようにして下さい）

[ICON]ボタン：アプリのアイコンファイルを指定してアップロードします。
ホーム画面でのアイコンになります。
ここで指定するアイコンファイルは、正方形のものを指定してください。
長方形のアイコンを指定すると、正しくアイコンファイルが作られず、PWA対応のアプリとしてインストールできません。
ファイル形式は jpg、png どっちでもOKです

[GENERATE.ZIP] を押すと、作成された manifest.json とアイコンファイルが入った zipファイルをダウンロードします。
展開すると、manifest.json と images/iconsディレクトリ下にアイコンファイルができます。

以上のファイルをサーバーに置きます。
コンテンツ（ここでは index.html とします）と、置くファイルの配置は次のようになります。

index.html
manifest.json
pwa.html
sw.js
images
└── icons
       ├── icon-72x72.png
       ├── icon-96x96.png
       ├── icon-128x128.png
       ├── icon-144x144.png
       ├── icon-152x152.png
       ├── icon-192x192.png
       ├── icon-384x384.png
       └── icon-512x512.png

Windows上でのテスト

Windows上での動作確認です。
Chromeブラウザで PCから、サーバーの pwa.html にアクセスします。
URLバーに(+)アイコンが出ます。
クリックすると「アプリをインストールしますか？」と出るので、[インストール] を押します。

すると、デスクトップに manifest.json 作成で指定した App Name の名称でショートカットができます。
また、ブラウザアプリが立ち上がります。
ただし、このブラウザアプリでは内容がうまく表示されないことがあります。
立ち上がったブラウザアプリを閉じた後、デスクトップ上のショートカットから実行してください。