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

この記事ではプログレッシブウェブアプリ (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 のアプローチは挑戦する十分な価値があります。あなたのアプリでそれがどう動くのか、ぜひ自身で確認してみてください。

ブラウザーの対応

As mentioned before, PWAs don't depend on a single API, but rather using various technologies to achieve the goal of delivering the best web experience possible.

The key ingredient required for PWAs is service worker support. Thankfully service workers are now supported on all major browsers on desktop and mobile.

Other features such as Web App Manifest, Push, Notifications, and Add to Home Screen functionality have wide support too. Currently, Safari has limited support for Web App Manifest and Add to Home Screen and no support for web push notifications. However, other major browsers support all these features.

Some of these APIs are experimental, with the documentation still in draft, but seeing success stories like those of Flipkart and AliExpress should convince you to try and implement some of the PWA features in your web app already.

Above all you should follow the progressive enhancement rule — use the technologies that provide such enhancements only where they are supported, but still offer the basic functionality of your app if it isn't. This way everybody will be able to use it, but those with modern browsers will benefit from PWA features even more.

アプリケーションの例

In this series of articles we will examine the source code of a super simple website that lists information about games submitted to the A-Frame category in the js13kGames 2017 competition. You don't have to think about what the actual content on the website is — the main point is to learn how to use PWA features in your own projects.

You can find the online version at mdn.github.io/pwa-examples/js13kpwa (also see the source code), which we will be carefully explaining in the next few articles.

Now, let's move to the second part of this series, where we’ll be looking at the structure of our example app.