サイトをアプリ化するPWAとは？作り方と動作イメージを併せて紹介

Webページをまるでアプリのように使用することができるPWA（Progressive Web App）をご存じでしょうか。

PWAはWebサイトのようにGoogle Analyticsなどのアクセス解析機能を持ちながら、ネイティブアプリのようにプッシュ通知やワンクリック起動を実現するWebサイトとネイティブアプリの良い面を掛け合わせた仕組みです。

本記事ではPWA化されているサイトを例にPWAのメリットを紹介し、後半ではPWA化するための手順を紹介します。
PWAの良さがわかりつつ、PWA化するのも手軽にできることをお分かりいただける内容です。

それではさっそく。

PWAとは？

ではどのように利用できるのかTwitterをもとに説明します。さっそくTwitterを開いてみてください。

すると検索窓に以下のようにURL入力窓に以下のようにインストールボタンがあることがわかります。

しかし、Twitter以外のサイトではインストールボタンが出ないサイトも多くあります。
この違いが、PWA化しているサイト化かしていないサイトかの違いになります。

PWA化しているサイトでは上記のインストールボタンからアプリケーションとしてインストールできるようになっているのです。

PWAのメリット

PWA化のメリットは以下があげられます。

これらのメリットを享受し、成果を出しているPWAの事例がGoogleにより公開されています。
なじみのあるアプリを例にどのような成果を出したのか抜粋します。

PWAの事例

Forbes

• エンゲージメント100％向上

（https://developers.google.com/web/showcase/2017/forbes）

Twitter

• セッションあたりのページ数が65％増加
• 送信されるツイートが75％増加
• バウンス率が20％減少

（https://developers.google.com/web/showcase/2017/twitter）

SUUMO

• ロード時間が75％短縮
• Webプッシュ通知からの31％のオープン率

（https://developers.google.com/web/showcase/2016/suumo）

NIKKEI

• パフォーマンスの大幅な改善

（https://developers.google.com/web/showcase/2018/nikkei）

PWAの実装手順

ここまで、PWAのメリットと事例をお伝えしましたが、どのようにすればそのようなメリットが享受できるのか実装手順を紹介します。

実装の流れは以下のようになります。

それぞれ具体的に解説していきます。

マニュフェストファイルの作成・アイコン画像の作成

マニフェストファイルは以下のように「テーマカラー」「バックグラウンドカラー」「アプリ名」「アイコン」などを記載します。

ただし、自分で書くのは手間がかかるので、マニフェストジェネレーターを使用することをオススメします。

{
    "theme_color": "#0693e3",
    "background_color": "#333333",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "name": "Metal IT Blog",
    "short_name": "Metal IT Blog",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

マニフェストジェネレーターの使い方

下記のように「Name」、「Shot Name」、「Theme Color」、「Background Color」を入力し、アイコン画像をアップロードします。

その後「GENERATE MANIFEST」ボタンを押すと以下が入ったzipファイルがダウンロードできます。

これらをサーバーに配置すればマニフェストファイルとアイコン画像の準備は完了です。

ServiceWorkerの作成

ServiceWorkerとはプッシュ機能や同期機能を提供するjavascriptです。（詳しくはこちらで解説されています。）

今回はsw.jsという名前で、ServiceWorkerファイルを作成し以下を記述します。

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

})

このsw.jsをサーバーに配置すればServiceWorkerの準備は完了です。

HTMLで必要ファイルを読み込み

あとはWebサイトのHTMLのヘッダー内で以下のように読み込めば完了です。

<link rel="manifest" href="manifest.webmanifest" />
<link rel="apple-touch-icon" sizes="180x180" href="icon-192x192.png">
    <script>
        window.addEventListener('load', function () {
            if ('serviceWorker' in navigator) {
                navigator.serviceWorker.register("/sw.js")
                    .then(function (registration) {
                        console.log("serviceWorker registed.");
                    }).catch(function (error) {
                        console.warn("serviceWorker error.", error);
                    });
            }
        });
    </script>

PWA動作の確認

まず1つ目の確認項目は「URL入力窓の横にインストールボタンは出ているか」です。
ボタンがあり、正常にインストールできれば問題ありません。

もし、ボタンが出ていないという方はデベロッパーツールの「Application」パネルを開いてみてください。
確認項目は以下の2点です。

• マニフェストファイルが正常に読み込まれているか
• ServiceWorkerのステータスがグリーンか

上記が正常であれば問題ないはずです。本サイトもPWA化しているのでデベロッパーツールで確認する参考としてください。また、ダウンロードしたPWAの挙動なども本サイトの動作を参考にしてもらえればと思います。

おわりに

「PWAとは何か」から「PWAの作り方」まで一通りを理解していただけたかと思います。

PWAはTwitterなど日常的に使いたいようなサイトで特に効果的かと思います。
（僕のサイトは検索流入がほとんどなのでPWA化はあまり意味ないかもしれません。。）

PWAをエンゲージメント向上の一つの手段としてとらえてもらえたら嬉しく思います。