【ギャップロ PWA 化の道】第1回アプリのように起動させてみる編

概要

昨年より話題となり先日 iOS 対応し今年一層加速し続けている PWA （ Progressive Web Apps ）ですが、流れに逆らわず本サイトも PWA 化を実施することになりました！そこでギャップロ「 PWA 化の道」と題し、何回かに分けて連載でご紹介していきたいと思います。

第1回アプリのように起動させてみる編
第2回 SPA 編 ※ 前後編を予定
第3回オフラインキャッシュ編
第4回 Push 通知編

第1回アプリのように起動させてみる編

今回やりたいこと
はじめに PWA とは
PWA の特徴
対応状況
Service Workder について
実装について
ホーム画面アイコンからの起動（ Android ）
計測結果
まとめ

今回やりたいこと

Web App Manifest と Service Worker を実装し、ホーム画面アイコンからスマホアプリのような起動をやってみる。
Google Analytics でホーム画面アイコンからの遷移をカウントしてみる。

はじめに PWA とは

PWA は「 Progressive Web Apps 」の略で、モバイルユーザーの UX 向上を目的とした、 WEB ページ／ WEB アプリケーションとネイティブアプリの利点をいいとこ取りできる仕組みになります。 Google （ Android Chrome ）を中心に策定・展開されており、ユーザーとのエンゲージメントの向上やコンバージョン・リテンションの改善に効果があるとされています。

Google が提唱する” FIRE ”

Google が提唱するユーザ体験を向上させる要素として、下記4つの要素("FIRE"と呼ばれています)を挙げています。この FIRE を改善することで、 WEB が抱える課題やサービスの機会損失を防ぐことが期待できます。

Fast => サイトの表示を早くする
Integrated => アプリのような挙動も出来る、機能が利用可能
Reliable => オフライン、低速度通信でも利用できる
Engaging => Notifications 、ホームに表示等

PWA の特徴

ネイティブアプリのような挙動をさせられる

ホームスクリーンへのアイコン追加
スプラッシュ起動
全画面アドレスバー非表示

Push 通知

ネイティブアプリのような Push 通知

オフラインでの使用

キャッシュを取得することによりオフラインでもページを読み込み

インストール・申請など不要

対応状況

PWA 構成のキーとなる Service Worker の対応が、昨年までは Chrome や Firefox など一部のブラウザのみでしたが18年に入り、 MicrosoftEdge も、 ServiceWorker への対応を発表しました。また先日リリースされた iOS Safari （ iOS 11.3で利用可）で PWA が正式に対応されたことにより、主要ブラウザ全てで PWA 化が可能となることから、今後一層 PWA 化が進むと予想されます。

Service Workder について

Service Worker については下記サイトをご参照ください。
サービスワーカーの使用(MDN)
Service Worker の紹介(Web Fundamentals)

要するに JavaScript で挙動を記述できるブラウザの通信プロクシであり、キャッシュ機構などを実装する際にも用いるものが Service Worker です。

実装について

1. Web App Manifest の用意

Web App Manifestとはモバイルのホーム画面などに表示するアイコンや、名前などを指定するために作られます。中身は下記のような json 形式の構造になります。

今回設定した内容

{
  "icons" : [
    {
      "src" : "/images/gaprot_logo48",
      "sizes" : "48x48",
      "type" : "image/png"
    },
    {
      "src" : "/images/gaprot_logo96g",
      "sizes" : "96x96",
      "type" : "image/png"
    },
    {
      "src" : "/images/gaprot_logo128",
      "sizes" : "128x128",
      "type" : "image/png"
    },
    {
      "src" : "/images/gaprot_logo144",
      "sizes" : "144x144",
      "type" : "image/png"
    },
    {
      "src" : "/images/gaprot_logo192",
      "sizes" : "192x192",
      "type" : "image/png"
    }
  ],
  "lang" : "ja",
  "display" : "standalone",
  "theme_color" : "#0971ac",
  "short_name" : "ギャップロ",
  "name" : "ギャップロ - アプリエンジニアのための技術情報サイト -",
  "start_url" : "/?utm_source=pwa"
}

作成した Web App Manifest ファイルを Document Root に配置します

JSON の各フィールドの説明については下記で詳しく説明されていますのでご参考にしてみてください。

Web App Manifest(MDN)

2. Srveice Worker の用意と登録 Service Worker については、実装内容は以下となります。

Service Worker を Document Root に配置
- ファイル名は何でもよいのですが、ここではserviceworker.jsという名前で作成し、配置します
- ファイルの内容についてはオフラインキャッシュ編にて記載します
Service Worker を登録する
- 下記内容の JavaScript で Service Worker を登録することができます。

if ('serviceWorker' in navigator) {
    // ServiceWorker を登録
    navigator.serviceWorker.register('serviceworker.js',
    {
      scope: '/'
    })
};

ホーム画面アイコンからの起動

Android は Chrome v57 以降、 Safari 11.1（ iOS 11.3）以降でホーム画面にアイコンを追加できます。また、 Chrome ブラウザにて一定条件でサイトにアクセスを行うと、以下のようにホーム用アイコン追加の通知が促されるようになります。

ホーム画面へのアイコン追加方法については下記でも説明していますのでご覧ください。
ギャップロ PWA 対応しました！

計測結果

Google Analytics でのホームアイコンから起動した計測

以下 Web App Manifest 側への設定を行うことでホームアイコンからの起動を Google Analytics でカウントさせることができます。

Web App Manifest 側の設定

starturl の utmsource に任意の値を設定

"start_url": "/?utm_source=pwa",

Google Analytics 側

Google Analytics の［集客］＞［全てのトラフィック］＞［参照元/メディア］に移動すると、 Web App Manifest の「 utm_source 」で設定した値（ PWA ）で数値取得ができていることを確認できます。

Lighthouse での数値確認

PWA 化のベンチマークとして Chrome ブラウザのアドオンツールより Lighthouse が提供されています。このツールを用いて今回の実装前、実装後の数値を確認してみます。

実装前

変更後

まとめ

一番数字の UP を期待していた Progressive Web App の項目では、今回の対応だけでも対応前と後で28点ほど UP したことが見て取れましたので、成果アリ といったところでしょうか。今後の SPA 化対応でこちらの数字の向上がさらに期待できます！

ということで次回は、第2回（ SPA 編）をお送り予定ですので是非お楽しみに！！