プログレッシブウェブアプリの紹介

This translation is in progress.

この記事ではプログレッシブウェブアプリ (Progressive Web Apps) (PWA) を紹介し、普通のウェブアプリよりもどのような利点があるのかを説明します。

プログレッシブウェブアプリとは

PWA は数々の特定の技術と、ウェブアプリとネイティブアプリの機能の利点を併せ持った標準パターンを使用して開発されたウェブアプリです。

例えば、ウェブアプリはより見つけやすいものです。 — アクセスするのは、アプリケーションをインストールするよりはるかに簡単で手早く、リンクを通してウェブアプリを共有することもできます。

一方、ネイティブアプリはオペレーティングシステムとより調和するので、ユーザーにもっと継ぎ目のない使い勝手を提供します。ネイティブアプリをインストールするとオフラインで動作し、ユーザーはブラウザーを使ってアプリに移動するのではなく、ホーム画面のアイコンから好きなアプリをタップするだけで簡単にアクセスできます。

PWA によって、ネイティブアプリの利点を引き継いでウェブアプリケーションを作成できます。

PWA は新しい概念ではありません。このような考えは、今までも様々なアプローチで検討されてきました。既に、プログレッシブエンハンスメントやレスポンシブデザインを用いてモバイルに適したウェブサイトを作成することができます。オフラインでの動作やアプリケーションとしてのインストールも、数年前に Firefox OS で実現されています。

しかし、PWA はウェブを素晴らしいものにする既存の機能を一切排除することなく、これらすべてとそれ以上の機能を提供します。

何がアプリを PWA にするのか

前に述べたように、 PWA は単一の技術によって成り立っているわけではありません。PWA とはウェブアプリケーションを構築するための新しい哲学を表しており、いくつかの特定のパターンや API、機能を含みます。一見しただけではそのウェブアプリが PWA かを見極めることはできません。ウェブアプリは、特定の要件を満たしているか、あるいは特定の機能を実装している場合に、 PWA と見なされます。例えば、オフラインで動作すること、インストールできること、簡単に同期できること、プッシュ通知を送信することができることなどです。

更に、アプリの完成度をパーセント値で測定するツールもあります (今の所は Lighthouse が最も有名です)。様々な技術的優位性を実装することでアプリをより進化的にすることができ、より高い Lighthouse のスコアを得ることができます。しかし、このスコアは大まかな指標でしかありません。

ウェブアプリが PWA として見なされるために、いくつかの重要な原則があります。

  • Discoverable: コンテンツを検索エンジンで見つけることができる。
  • Installable: アプリは端末のホーム画面に追加できる。
  • Linkable: URL を送るだけでアプリを共有できる。
  • Network independent: オフラインか、あるいは貧弱なネットワーク環境でも使用できる。
  • Progressive: 古いブラウザーでも基本的な機能は使用でき、最新のブラウザーではすべての機能が使用できる。
  • Re-engageable: 新しいコンテンツがあるときには、通知を送ることができる。
  • Responsive: 携帯電話やタブレット、ノートパソコン、テレビ、冷蔵庫など、画面とブラウザーを備える全ての端末で使用できる。
  • Safe: アプリからの通信が第三者からの攻撃に対して安全であり、機密情報を保護できる。

取り組む価値はありますか?

もちろん!基本的な PWA の機能を実装するのに必要な労力は比較的小さく、得られる便益は膨大です。例をあげましょう。

  • アプリのインストール後、サービスワーカーのキャッシュのおかげで読み込み時間が減少する。大切な帯域の利用量も同様。
  • アプリ更新の際、変更があった内容だけを更新する機能。対照的にネイティブアプリの場合、ほんの小さな変更だとしてもユーザーにアプリケーション全体を再びダウンロードさせてしまう。
  • ネイティブプラットフォームとよく統合されたルックアンドフィール。例えばホームスクリーンのアプリアイコンや、フルスクリーン動作するアプリなど。
  • システム通知やプッシュメッセージによるユーザーの再訪問。これはエンゲージユーザーやコンバージョン率の向上に繋がる。

PWA の道を試みて、ネイティブアプリよりもウェブサイトの使い勝手の向上を選択し、その結果として大きな利益を得るに至った企業の成功例は多数あります。 PWA Stats というウェブサイトはこのような便益を示すたくさんの調査を公開しています。

もっとも有名な成功例は、おそらく Flipkart Lite でしょう。インド最大手の e コマースサイトは2015年に PWA へと作り直され、その結果コンバージョン数が70%増加しました。 AliExpress の PWA もまた新規ユーザーのコンバージョン率が104%向上という、ウェブやネイティブアプリよりも良い結果となりました。このような利益の増加や PWA 転換に必要な労力が比較的少ないことを考えると、 PWA の利点は明確です。

一方では couponmoto のような初期段階にあるスタートアップも消費者エンゲージメント促進のため PWA を使い始め、企業の大小問わずユーザーの (再) エンゲージに効果的であることが示されています。

他にも例を知りたければ pwa.rocks を確認してみてください。特に hnpwa.com のページは注目に値します。これは (よくある TodoMVC アプリの代わりに) Hacker News ウェブサイトの実装例を掲載しており、様々なフロントエンドフレームワークの利用例を見ることができます。

PWABuilder を利用すると、 PWA をオンラインで生成することもできます。

サービスワーカー - およびプッシュ通知 - に固有の情報を探しているならば、 Service Worker Cookbook も忘れずにチェックしてください。モダンなサイトにおける Service Worker のレシピ集です。

PWA のアプローチは挑戦する十分な価値があります。あなたのアプリでそれがどう動くのか、ぜひ自身で確認してみてください。

ブラウザーの対応

前述のように、PWAは単一のAPIに依存するのではなく、さまざまなテクノロジーを使用して、可能な限り最高のWebエクスペリエンスを提供するという目標を達成します。

PWAに必要な重要な要素は、service worker のサポートです。ありがたいことに、サービスワーカーは現在、デスクトップとモバイルのすべての主要なブラウザーでサポートされています。

Web App ManifestPushNotificationsAdd to Home Screenなどの他の機能も幅広くサポートされています。現在、Safariでは、Webアプリマニフェストとホーム画面に追加のサポートが制限されており、Webプッシュ通知はサポートされていません。ただし、他の主要なブラウザはこれらすべての機能をサポートしています。

これらのAPIの一部は実験的であり、ドキュメントはまだドラフトですが、FlipkartやAliExpressのような成功事例を見ると、Webアプリで既にPWA機能の一部を試して実装するよう確信するはずです。

何よりも、progressive enhancement ruleに従う必要があります。サポートされている場合にのみ、そのような拡張機能を提供するテクノロジーを使用しますが、サポートされていない場合でもアプリの基本機能を提供します。この方法で誰もが使用できるようになりますが、最新のブラウザーを使用するユーザーはPWA機能をさらに活用できます。

アプリケーションの例

このシリーズの記事では、 js13kGames 2017コンペティションのA-Frame categoryに提出されたゲームに関する情報をリストする非常にシンプルなWebサイトのソースコードを調べます。 Webサイトの実際のコンテンツについて考える必要はありません。主なポイントは、自分のプロジェクトでPWA機能を使用する方法を学ぶことです。

オンラインバージョンは mdn.github.io/pwa-examples/js13kpwa (ソースコードも参照 )で見つけることができます。これについては、次のいくつかの記事で詳しく説明します。

それでは、このシリーズの第2部に移り、サンプルアプリの構造を見ていきましょう。