HAL_DATA_techBlog

ハルデータ研究所の技術ブログです。主にCDP関連の開発をしてます。

WebアプリをネイティブライクにするPWA①(概要とmanifest)

「PWA」(Progressive Web Application)という、新しいWebの技術があります。 これは、Webページをネイティブアプリのように動作させ、新しいユーザ体験(UX)を届けるために生まれたものです。

本稿ではPWAの概要やメリット、そして導入の流れについて前編・後編に分けて記載していきます。

PWAとは?

ネイティブアプリ(※)のようにGoogle PlayApp Store といったアプリストアを経由してインストールせずとも、ネイティブアプリのような利便性、機能を提供できるようにする技術です。

(※)ネイティブアプリ…特定のデバイス・OS(AndroidiOSWindowsMac)で動作することを前提に開発されたアプリケーション

プログレッシブ・ウェブ・アプリケーション(Progressive Web Aplication)の略で、Googleが発信、推進している規格です。
かつてはモバイルチャネルをターゲットとした技術でしたが、PCチャネルにおけるUXも着実にアップデートされてきています。

ただし、OSと各ブラウザバージョンによって対応状況や実現機能に差異があります。
OS、ブラウザ毎の対応状況は以下のサイトで確認できます。
Can I use Service Workers ?

PWAで実現できること

独立したアプリケーションとして動作できる

ユーザがあなたのWebサイト、Webアプリケーションを訪問し「ホーム画面に追加」するだけで、ネイティブアプリと同等なフルスクリーンで起動させることができます。
つまりブラウザのタブの1つではなく、独立したアプリケーションのように動作します。
インストール作業がアプリストアを経由せずにできるため、ユーザのエンゲージメントを向上させることができます。

オフラインキャッシュ、バックグラウンドデータ更新

PWAではバックグランドデータ更新オフラインキャッシュを実現することができます。
これにより、デバイスがオンライン状態でないときや接続状態が良好でないときでもユーザへコンテンツを提供させられ、ユーザ体験を向上させることができます。
これはSerivice Workerという仕組みによって実現されます。
Serivice WorkerとはJavaScriptで記述されるものであり、煩雑なライブラリやプラグインは必要ありません。

Service Workerの中でのライフサイクルに基づき、コンテンツの同期やキャッシュを行う仕組みです。
serviceworker - Lifecycle

PWAの導入

さて、それではWebアプリケーションをPWAに対応させるための手順について紹介します。
といっても全てWebの実装と同様、さらに言えばJavaScriptjson形式のファイルを記述するだけであり専用ソフトウェアなどは必要ありません。

導入までには大きく分けて3ステップあります。

1. WebサイトのSSL/TLS

SSL/TLSを使用してコンテンツの表示における通信を暗号化する必要があります。
その際、アクセスURLはhttps://のような形式になります。

SSL化が必要な理由は、端的に言うと中間者攻撃を防ぐためです。
PWAでは、後述するService Workerによってサーバ⇔クライアント間でバックグラウンドでの通信が行われます。
この特性から、サーバアプリケーションがSSL化されている必要があります。

このことはGoogleの開発ガイドでも触れられています。

Service workers only run over HTTPS. Because service workers can intercept network requests and modify responses, "man-in-the-middle" attacks could be very bad.

参考: Introduction to Service Worker

サイトのSSL化はアプリケーションの実装から主旨が外れるため、本記事では範囲外とします。

2. manifest.jsonの実装/配置

manifest.jsonはアプリケーション表示名やアイコン画像、アプリ起動時の挙動などアプリケーションの見映えに関するものが大きな役割です。
その名の通りjson形式のファイルで、通常はアプリケーションのドキュメントルートに配置しクライアントに読み込ませます。

3. Service Workerの実装/配置

Service Workerは、通常のアプリケーションで行われる1対1のサーバ⇔クライアント通信とは異なり、リクエストを仲介してユーザにコンテンツを提供します。
これによりキャッシュやオフライン時のコンテンツ表示を実現します。
Service Workerは、PWAにおけるアプリケーションの制御を担うものです。

manifest.jsonの実装/配置

それではmanifest.jsonの配置について記載します。
なお本記事では、PWAの実装で必要なSSL化はNetlifyを使用します。
静的サイトのホスティングが行え、標準でSSL化も行ってくれます。
GithubやBitbucketと連携し、リポジトリへのコミットを契機に自動デプロイも可能です。

まず、サンプルアプリケーションは以下の状態であるとします。

$ tree
|-- css
|-- fonts
|-- images
|   |-- icons
|   |   |-- 192.png
|   |   |-- 256.png
|   |   |-- 512.png
|-- index.html
|-- js
|-- manifest.json
`-- sass

基本的なmanifest.jsonの記述

manifest.jsonを以下のように実装します。
これをWebサイトのドキュメントルート直下(例えば/var/www/html/manifest.json)に配置します。

{
    "name": "HALデータ研究所合同会社",
    "scope": "/",
    "display": "standalone",
    "start_url": "/",
    "short_name": "HAL DATA",
    "background_color": "#69aee7",
    "theme_color": "#69aee7",
    "orientation": "portrait",
    "prefer_related_applications": false,
    "generated": "true",
    "icons": [
        {
            "src": "images/icons/192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "images/icons/256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "images/icons/512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

モバイル端末において最もユーザに違いをもたらすのは"display": "standalone"の部分です。
これにより、ブラウザ内のタブとは独立した1つのアプリケーションとして動作します。
各項目の詳細解説はMozillaのページが最も詳しいかと思います。

manifest.json - Mozilla | MDN

htmlファイルでの指定

<head>タグでマニフェストを読み込ませるよう指定しています。
また、マニフェスト内でアイコン指定がありますが、AppleバイスSafariでは上手く動作しないため追加でアイコンを指定する必要があります。

<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="images/icons/512.png" sizes="512x512">

したがって、htmlファイルは以下のような内容になります。

  • index.html
<!DOCTYPE HTML>
<html>
  <head>
   <title>HALデータ研究所合同会社</title>
   <link rel="shortcut icon" href="images/icons/favicon.ico">
   <link rel="manifest" href="manifest.json">
   <link rel="apple-touch-icon" href="images/icons/512.png" sizes="512x512">
  ~~~
  </head>
  <body>
  ~~~
  </body>
</html>

ブラウザでの確認

Chromeデベロッパツール(F12キーを押下)にて[Application]タブ>[Manifest]メニューで確認できます。

f:id:skokado:20190905133212p:plain

スマートフォンでの確認

※iPhone7 による画面キャプチャです。

まず、ページを開いて「ホーム画面に追加」を行います。

f:id:skokado:20190904104331j:plain

ホーム画面に追加されたアイコンをタップすると・・・

f:id:skokado:20190904104339j:plain

ブラウザのタブとして開かれていないのが分かるでしょうか。

一覧画面でも以下のようにSafariとは別アプリケーションとなっています。

f:id:skokado:20190904104347j:plain

まとめ

PWAの概要と、第1ステップとしてマニフェストの作成について解説します。
そしてPWAの要であるService Workerについては次回記事にて説明します。