PWAとは？Webサイトをアプリ化して高エンゲージメントを得るためのUX設計

インストールしなくても、アプリのようなアイコンを端末のホーム画面に保管できるようにしたサイトを見たことはありませんか？それがPWA（プログレッシブアプリケーション）です。

「このサイトいいな」と思ってくれたユーザーがサイトにより簡単にアクセスできるようになります。PWAを使うことで、日経などが大きな成果をあげています。

今回は、PWAとはどのようなものなのか。また、作る上でポイントとなる項目をまとめました。

PWAを導入するのはメリットしかない！

PWA（プログレッシブアプリケーション）とは今までの「Webサイト」ではできなかった表現やインタラクションが可能になったWebブラウザベースで起動するアプリケーションです。

導入すると次のようなメリットが得られます。

1. 前回の表示状態を維持するキャッシュによって、訪問済みのページはオフラインでも表示可能
2. アプリストアからのインストールが不要（インストールに対応することもできる）
3. 全画面表示を基本とするのでコンテンツを分割しない
4. 洗礼されたイメージを与え、Webサイトや会社のイメージアップ
5. パフォーマンスの向上、コンバージョンの改善

PWA実装で考慮すべきポイントとは？

PWAは、Webサイトの技術とアプリの技術どちらも必要とします。ストアやプレイストアからのダウンロードは不要ですが、UX設計とパスォーマンスが高さを求められます。PWAは、どんな方向性に基づいて使うべきな技術なのでしょうか。

ポイント1. フルスクリーン表示にする

どのデバイスでも、画面サイズでも全画面表示を維持する必要があります。
そのため、アプリーケーションらしいオーバーフロー、ズームイン、ズームアウトなどで動きを持った画面遷移が求められます。
ブラウザが古いバージョンである場合は、正常に表示されず離脱に繋がることもあります。

ポイント2. プッシュ通知を有効にする

PWAでは、プッシュ通知が使用可能です。
ユーザーにプッシュ通知の許可を得て、プッシュ通知は実行が可能になります。

これは、ユーザーがアプリから離脱するのを防ぎ再訪問を促す効果があります。プッシュ通知のほかにプロンプトの使用も可能です。

ポイント3. 安全性を保つ

データの整合性、ユーザーのプライバシーを守るためにはSSL証明書を取得し、Webサイトの安全性を保ちます。

SSLで保護されたURLにアクセスすると、セキュリティ基準がユーザーに伝わります。これによって信頼性は向上します。ログイン情報を守るセキュリティ対策としても有効です。

ポイント4. エラーチェックをする

コードのエラーチェックをしてください。エラーは些細なものかもしれませんが、パフォーマンスやセキュリティに負荷を与えます。エラーは可能な限り残さない方が望ましいです。

ポイント5. JSON Manifestをインストールする

Service Workerを使用して事前キャッシュが可能です。
アプリケーションシェルでは、HTML、CSS、JavaScriptをキャッシュします。
これによって、ユーザーがオフライン状態でも表示可能になります。

ポイント6. Webサイトのホストドメインが必要

PWAはオンライン上で動作し、ホストとドメインを必要とします。
この条件を満たしていない場合は、動作しないことがあります。

PWAを実装するのに便利なアプリケーション『Service Worker』

セキュリティ証明書を取得し、Service Workerを利用します。

セキュリティ証明書はホスティング会社、もしくは一部のプロバイダーから取得できます。Service Workerを利用してオフラインでも表示できるように設定します。

Service Workerのライフサイクルを利用することで、オフラインファーストなアプリケーションとして作ることが可能で、これによってあらゆる環境下で表示が可能になります。

アクセス前に行われるファイルのキャッシュやプッシュ通知、コンテンツや見出しの更新はイベントリスナーやコマンドに依存しない独立した機能です。ただし、このイベントを可能にするにはユーザーの許可を得なければなりません。

Service WorkerのJavaScriptファイルを入手したら、イベントハンドラを追加して、ソースコードを事前に読み込みます。使用するイベントハンドラを追加して、最後にイベントが読み込まれて実行されます。

ディレクターなら知っておきたい、Googleゴリ押しのPWAとAMP

より閲覧がしやすく、有用な情報をユーザーに届けることをミッションに、Googleは日夜さまざまな概念の開発に勤しんでいます。

PWAはモバイルのWebサイトを、ネイティブアプリのようなUXで表示させるためのものですが、似たような響の言葉でAMPというものがありますね。これは、Accelerated Mobile Pages（アクセレイテッドモバイルページ）の略で、モバイルのWebサイトを高速化するためのものです。

GooglenによってAMP化されたサイトは、表示速度が早くなる一方、デザインが崩れてしまうことがあります。自分のサイトのAMPページがインデックス登録されたは、Serch Consoleから確認できます。

どちらも、モバイルデバイス化が進むWeb業界では欠かせない知識です。

特にまだ導入していないサイトの多いPWAは、時間と共に浸透することが見込まれている新しい技術です。実際に試してみたい場合は、Google Developersのチュートリアルが参考になります。

そのほかにも、PWAのチェックはGoogleの拡張機能「Lighthouse」を使いテストが可能です。また、PWAのアイコンはWebサイトとのデザインの一貫性を保ちつつ作成するようにしてください。

ぜひ試してみてください。

（翻訳：Yuri Tanaka）