PWAとは? ebisumartをPWA化する!

こんにちは。株式会社インターファクトリー研究開発部の高山です。

最近「PWA」というワードを聞きますよね?

言葉はよく聞くのですが、それがどのようなものか分からなかったのでいろいろ調べてみました。そして我らのサービスであるebisumartでこれが使用できるのか試してみました。

今回はその結果を記載します。

PWAとは?

「Progressive Web Apps」の略で、簡単に言うとモバイル向けWebサイトをスマートフォン向けのネイティブアプリ(AndroidのGooglePlayストアやiOSのApp Storeからインストールするアプリ)のように使える仕組みのことです。

モバイル向けWebサイトをネイティブアプリのように見せることができ、かつネイティブアプリでしか使えなかった機能がPWAでは使用することができます。

また、通常のWebサイトよりユーザビリティが向上すると言われています。

Webサイトではできず、PWAでできること

1.ホーム画面にアイコンを追加

ーム画面にアイコンを追加し、インストールしたアプリと同じような感覚でサイトにアクセスすることができます。Andoridでは「ホームに追加」のポップアップが表示され、「ホーム画面アイコン」の追加をユーザーに促すことが可能です。
また、PWAのアイコンから起動したWebサイトはURLバーが表示されずフルスクリーンで表示されます。
(ブラウザが開くのではなく、ネイティブアプリが開いているように見えます。)

2.オフライン動作

コンテンツをローカルにキャッシュできます。単に既に開いたページを閲覧するだけではなく、先読みで他のページをキャッシュさせることで、オフラインでも画面遷移を伴う動作が可能です。また、オフライン時に作業したデータを保持しておき、オンラインになったら送信するといった使い方も可能です。

3.プッシュ通知

ブラウザを起動していない状態でも、ユーザーの端末に対し直接お知らせを送ることが可能です。

4.起動時のスプラッシュ画面を設定

ネイティブアプリのように、起動時のスプラッシュ画面を設定することが可能です。

PWAのメリット

1.通常のサイトと同じようにアクセス可能

アプリ的な機能が取り上げられがちですが、もともとはWebサイトなので通常のWebサイトと同じようにアクセスすることが可能です。
ユーザーはこれまで通り、サイトにアクセスするだけでPWAの恩恵を受けることができます。

2.インストール不要

ネイティブアプリのようにアプリストアからインストールをする必要がありません。
また、アプリストアを経由しないため、ネイティブアプリを公開するときのような審査は不要です。

3.通常のWebサイトと比べて、ページの読み込み速度が速い

コンテンツをローカルにキャッシュすることができ、作りに応じてページの読み込みや表示を早くすることが可能です。作り方によってはネイティブアプリより速くなることもあるそうです。

4.OSごとの個別対応が不要

ネイティブアプリの実装はOSに依存するため、AndroidやiOSなどそれぞれ用意する必要があります。一方PWA対応サイトはあくまでもWebサイトであるのでOSに依存しません。
※ただし、iOSでは一部機能が制限あり。(2019/1現在)

 

PWAのデメリット

1.ブラウザ環境に依存する

メリットとしてOSごとの個別対応が不要と書きましたが、OS上で動くブラウザには依存します。例えばAndoroidのChromeとiOSのSafariでは動作や使用可能な機能に違いがあります。

2.アプリストア経由で新規ユーザーに接触出来ない

PWAはWebサイトを訪問したユーザーが直接インストールする形になるため、ネイティブアプリのように「アプリストアで偶然見つけてもらう」ということがなくなります。そのため、アプリストアを介して新規ユーザーを獲得する機会はありません。

 

PWAはネイティブアプリの替わりになるのか?

PWAは様々なメリットがあり、「今後はPWAが主流になる?」という声もありますが、ネイティブアプリの替わりになるかと言うと課題もあるので現状ではネイティブアプリから置き換わるとは言えないと思います。実際にPWAを導入しているサービスを見ても、ほとんどのサイトでネイティブアプリのインストールを促すバナーなどを表示しています。

(今のところはPWA対応サイトを作っているのが、ネイティブアプリが既にあり、かつその両方を運用するリソースがある企業だからかもしれませんが)ただ、Webサイトを高速化するためにPWA化するという方向性は正しいと思います。

日経電子版は、サイトを高速化するための手段としてPWAを採用したそうです。

https://employment.en-japan.com/engineerhub/entry/2018/06/05/110000

つまり、ネイティブアプリがなくWebサイトしか存在しないサービス(ebisumartを使っているECサイト)が、サイトを高速化する目的としてPWA化することにデメリットはあまり存在しません。

ただ、PWAの技術や対応ブラウザは日々進歩しているので、その動向はチェックする必要があります。

PWAを作るための3ステップ

1.HTTPS対応

Service Worker(後述)やその他のPWAに関する技術は安全な接続(HTTPS通信)でのみ動作するため、SSL証明書を取得してサイトをHTTPS化しましょう。
(開発時のローカルホスト接続を除く)

2.マニフェストファイルの設置

マニフェストファイル(アプリ名称、説明、ホーム画面アイコン画像、スプラッシュ画面、viewportなどアプリの情報を記述したJSONファイル)を所定の場所に配置しましょう。
(ファイル名はmanifest.jsonとするのが一般的です。)

manifest.jsonのサンプル

そして全てのページの<head>内に、このマニフェストファイルへのリンクが必要です。

下記ページにマニフェストファイルの定義が公開されてます。

https://developer.mozilla.org/ja/docs/Web/Manifest

3.Service Workerを作る

Service Workerはバックグラウンドで動作するプログラムで、PWAを実現する上で中心となる機能となります。Service WorkerはWeb Workerの一つで、Webページから読み込まれて動作するJavascriptとは独立して動作しており、DOMにアクセスしたりすることはできません。その代わり、Webページのネットワークリクエストすべてをインターセプトが可能で、Webページからのリクエストを横取りしてキャッシュしたものを返したり、改ざんしたりといったことが可能です。そのためローカルホスト通信以外はhttpsの使用が必須となります。

※詳細は下記URLを参照

https://developers.google.com/web/fundamentals/primers/service-workers/

Service Workerが提供する機能

Service Workerが提供する機能は主に以下の4つです。

  1. キャッシュ
  2. リクエストのハンドリング
  3. Push通知
  4. バックグラウンド同期

ブラウザごとの対応状況

PWAがブラウザごとに使える機能が異なるのは、ブラウザごとに動くService Workerの機能が異なるからとなります。

Can I UseでブラウザごとのService Worker対応状況が確認できます。
(2019/1現在は下記の通りになっています。)

ここから得られる情報は、

  • IEは非対応
  • iOSは11.3よりService Workerが使えるようになった
    (ただし、iOS内から使用可能なのはSafariブラウザのみで、Web Viewを使っているFirefox、Chrome、Facebookのアプリ内ブラウザ等ではService Workerは動作しない。Safari View Controllerを使用しているアプリ内ブラウザは動作する。)

AndroidとiOSの違い

今までの話でもお伝えした通り、iOSのService Workerは様々な機能制限があります。
iOSは

  • キャッシュ可能な容量が50メガバイトまで
  • バックグラウンド同期やプッシュ通知ができない
  • ユーザーに「ホーム画面への追加」を促すことができない

など

ebisumartのPWA化

ebisumartのPWA化も、上記「PWAを作るための3ステップ」で記載したステップを踏めば実現可能です。

HTTPS対応

ebisumartのオプション機能として「全ページHTTPSオプション」というものがあります。
こちらのオプション機能で有効化してサイトをHTTPS化してください。
(機能の有効化に関してはサポートにお問い合わせください。)
また、テンプレート上で、直接HTTPのリンクがある場合はこのリンクをHTTPSに修正お願いします。

manifest.jsonの設置

ebisumartでは.jsonで終わるパスだと静的ファイルとして直接ファイル参照することができません。
そのため「manifest.json」ではなく、「manifest.js」など静的ファイルとして参照可能な拡張子に変更してください。

manifest.jsのサンプル


※iconsのsrcには参照可能なファイルのパスを記載してください。

※start_urlはホーム画面に追加したアイコンからWebサイトにアクセスしたときに表示する画面を指定してください。(上記のサンプルではTOPページに遷移します。)

※デモ環境にマニフェストファイルを置く際は、start_urlを/{ebisumartNo}から始まるようにしてください。(デモ環境はECサイトのURLはdemo.ebisumart.com/{ebisumartNo}/{画面のパス.html}となるため。)

次にテンプレートからマニフェストファイルを読み込みます。

***.xhtml

 

この状態でサイトを開くとマニフェストファイルが認識されています。PCブラウザのディベロッパーツールでマニフェストファイルが認識できるのを確認できます。

また、ブラウザ上でアプリのインストールが可能です。
※PCのchromeの場合は、chrome://flagsをアドレスバーに入れて、「pwa」で検索して出てきた設定を全て「Enabled」にしてブラウザを再起動します。

※Androidのchromeでは一定の条件を満たすとインストールを促すバナーが表示されます。
※iOSのsafariでは、ユーザーが「ホーム画面に追加」をタップする必要があります。

インストールするとホーム画面(chrome://apps/)にアイコンが追加されます。(スマートフォンの場合も、ホーム画面にネイティブアプリが追加されるのと同じようにアイコンが追加されます。)

このアイコンをクリックすると、ブラウザではなく一つのアプリケーションとしてWebサイトの閲覧が可能です。(スマホの場合は、ネイティブアプリが起動するのと同じように独立したアプリとして動きます。)

Service Workerを作る

Service Workerを登録します。

***.xhtml


service-worker.js


serviceWorker.registerの第二引数に設定しているスコープは、ServiceWorkerがサービスを提供するページのURL範囲を指定しています。第二引数のスコープがない状態でjsファイルを登録すると、jsファイルが置かれているディレクトリ配下がスコープとなります。
上記例だと、「ECサイトのドメイン/client_info/{ebisumartNo}/view/userweb/pwa/***」
のURLでアクセスしているページのみServiceWorkerが実行されます。

ebisumartの場合、画面遷移のURLと静的ファイルへアクセスするURLはパスの体系が異なっているので、このままのスコープを指定しない状態だとServiceWorkerが動作しません。なのでebisumartの場合は、ECサイトのドメイン直下でスコープを取る必要があります。
※ただし、登録するjsファイルのディレクトリより上位でスコープを取る場合は、jsファイルを取得する際のリクエストに対するレスポンスヘッダに「Service-Worker-Allowed」を指定する必要があります。

現状、ebisumart上にある静的ファイルに対しては「Service-Worker-Allowed」が付きませんので、別途ebisumart側の改修が必要な状態になっています。
(もしebisumartを使っている店舗運用者様でPWAの導入を検討している場合は、別途サポートにお問い合わせください)


次にServiceWorkerの実装を行います。

service-worker-register.js

ここではinstallイベント(jsファイル登録時に実行されるイベント)で、TOPページやextページを呼び出してキャッシュしています。

service-worker-register.js

ここではfetchイベント(他のページヘ移動したりページを更新したときに実行されるイベント)で、サーバー側にリクエストが送られる前にキャッシュがあればキャッシュを返し、なければリクエストを送って、そのレスポンスをキャッシュしています。
(一度閲覧したページは次からはキャッシュを使うことで画面表示を高速化できます。)

service-worker-register.js

ここではpushイベント(通知が来た時に実行されるイベント)で、通知の内容とアイコンのファイルパスを定義し、notificationclickイベント(通知がクリックされたときに実行されるイベント)で、通知をクリックしたときに特定の商品詳細ページに遷移する処理を実装しています。

試しにプッシュ通知を送ってみます。
ブラウザの開発者ツールでは簡易的にプッシュ通知を送れる機能がありますのでこちらを使って見ます。(chromeだとうまく動かなかったのでfirefoxを使います。)
まずウェブ開発メニューからService Workerを開きます。

Service Workerが登録されていることが確認できますので、ここからプッシュ通知を送ってみます。
※実際のサイトでインストールしたユーザーに通知を送る場合は、別途通知用のシステムを用意する必要があります。

通知が来ました。
スマートフォンの場合(Androidのchromeのみ)は、ネイティブアプリと同じような通知を受信することができます。

通知をクリックすると、商品詳細画面に遷移します。

まとめ

今回はPWAがどのようなものなのかと、ebisumart上のWebサイトをPWAに対応するやり方を説明しました。Webサイトを既に運用しているのであれば、PWAは比較的容易に対応できますし、PWAの機能を使うことで今まで以上にユーザビリティやエンゲージメントを向上することが可能です。

もし機会があればお試しください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です