最終的な目的は、ウェブアプリが検索エンジンでより適切に表現され、公開されやすく、カタログ化とランク付けされ、ブラウザーにメタデータを使用してそれらに特別な機能を提供することです。この記事ではプログレッシブウェブアプリ (Progressive Web Apps, PWA) を紹介し、それが何なのか、また普通のウェブアプリよりもどのような利点があるのかを説明します。
「プログレッシブウェブアプリ」という用語は、公式または正式な名称ではありません。ウェブ技術だけを使って、柔軟性と適応性のあるアプリケーションを作成するというコンセプトのもと、 Google が当初使用していた略語です。
PWA は数々の特定の技術と、ウェブアプリとネイティブアプリの機能の利点を併せ持った標準パターンを使用して開発されたウェブアプリです。例えば、ウェブアプリはより見つけやすいものです。アクセスするのは、アプリケーションをインストールするよりはるかに簡単で手早く、リンクを通してウェブアプリを共有することもできます。
一方、ネイティブアプリはオペレーティングシステムとより調和するので、ユーザーにもっとシームレスな使い勝手を提供します。ネイティブアプリをインストールするとオフラインで動作し、ユーザーはブラウザーを使ってアプリに移動するのではなく、ホーム画面のアイコンから好きなアプリをタップするだけで簡単にアクセスできます。
PWA によって、ネイティブアプリの利点を引き継いだウェブアプリケーションを作成することができます。
これ新しい概念ではありません。このような考えは、過去にもウェブプラットフォーム上で、様々なアプローチにより何度も繰り返されてきました。プログレッシブエンハンスメントとレスポンシブデザインにより、すでにモバイルフレンドリーなウェブサイトを構築することができます。
しかし、PWA はウェブを素晴らしいものにする既存の機能を一切排除することなく、これらすべてとそれ以上の機能を提供します。
前に述べたように、PWA は単一の技術によって成り立っているわけではありません。PWA とはウェブアプリケーションを構築するための新しい哲学を表しており、いくつかの特定のパターンや API、機能を含みます。一見しただけではそのウェブアプリが PWA かを見極めることはできません。ウェブアプリは、特定の要件を満たしているか、あるいは特定の機能を実装している場合に、PWA と見なされます。例えば、オフラインで動作すること、インストールできること、簡単に同期できること、プッシュ通知を送信することができることなどです。
更に、アプリの完成度をパーセント値で測定するツールもあります (今のところは Lighthouse が最も有名です)。様々な技術的優位性を実装することでアプリをより進化的 (progressive) にすることができ、より高い Lighthouse のスコアを得ることができます。しかし、このスコアは大まかな指標でしかありません。
ウェブアプリが PWA として見なされるために、いくつかの重要な原則があります。
これらの機能を提供し、{{anch("Advantages of web applications", "長所")}}をすべて活用することで、ユーザーや顧客にとって魅力的で柔軟性の高いサービスを提供することができます。
もちろん！基本的な 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 も忘れずにチェックしてください。モダンなサイトにおけるサービスワーカーのレシピ集です。
PWA のアプローチは挑戦する十分な価値があります。あなたのアプリでそれがどう動くのか、ぜひ自身で確認してみてください。
完全に機能するプログレッシブウェブアプリケーションは、以下のすべての利点をユーザーに提供します。
最終的な目的は、ウェブアプリが検索エンジンでより適切に表現され、公開されやすく、カタログ化とランク付けされ、ブラウザーにメタデータを使用してそれらに特別な機能を提供することです。
一部の機能は、Open Graph のような独自の技術によって特定のウェブベースのプラットフォームですでにできるようになっています。これは {{Glossary("HTML")}} の {{HTMLElement("head")}} ブロック内で {{HTMLElement("meta")}} タグを使って同様のメタデータを指定するフォーマットを提供しています。
ここで関連するウェブ標準はウェブアプリマニフェスト（Web app manifest）です。 これは、名前、アイコン、スプラッシュ画面、テーマカラーなどのアプリの機能を {{Glossary("JSON")}} 形式のマニフェストファイルで定義します。 これは、アプリ一覧や端末のホーム画面などの場面で使用するためのものです。
ウェブアプリの使い勝手の中心となるのは、ユーザーがホーム画面にアプリのアイコンを表示し、タップしてアプリを開くことができるネイティブコンテナーであり、基盤となるプラットフォームとうまく統合されていることです。
最近のウェブアプリは、ウェブアプリマニフェストに設定されたプロパティや、最近のスマートフォンブラウザーで利用できるウェブアプリのインストールと呼ばれる機能によって、このようなネイティブアプリの感覚を持つことができます。
ウェブの最も強力な機能の 1 つは、特定の URL でアプリにリンクできることです。アプリストアは不要で、複雑なインストールプロセスも不要です。これは今までもそうでした。
最新のウェブアプリケーションは、ネットワークの信頼性が低い、あるいは存在しない場合でも動作します。ネットワーク非依存性の基本的な考え方は、以下の通りです。
これは、ページリクエストを制御するサービスワーカー (オフラインでの保存など)、ネットワークリクエストに対するレスポンスをオフラインで保存する Cache API (サイトの資産を保存するのにとても便利)、アプリケーションデータをオフラインで保存するウェブストレージや IndexedDB などのクライアントサイドのデータストレージ技術など、さまざまな技術を組み合わせて実現されています。
最近のウェブアプリは、十分な機能を備えたブラウザーでは優れた使い勝手を、機能の劣るブラウザーでは (見劣りするものの) 許容できる使い勝手を提供するように開発することができます。私たちは、プログレッシブエンハンスメントなどのベストプラクティスを用いて、何年も前からこれを行ってきました。プログレッシブエンハンスメントを使用することで、 PWA はクロスブラウザーに対応します。つまり開発者は、 PWA の一部の機能や技術の実装が、ブラウザーの実装ごとに異なることを考慮する必要があります。
ネイティブプラットフォームの大きな利点は、ユーザーがアプリを見ていない時や端末を使用していない時でも、アップデートや新しいコンテンツによってユーザーを簡単に再エンゲージできることです。最近のウェブアプリでは、ページを制御するサービスワーカー、サーバーからサービスワーカーを介してアプリに直接アップデートを送信する Web Push API、システム通知を生成する Notifications API などの新しい技術を使用することで、このようなことが可能になっていますが、ユーザーがウェブブラウザーを積極的に使用していないときにも、ユーザーの関心を引くことができます。
レスポンシブウェブアプリでは、メディアクエリーやビューポートなどの技術を用いて、デスクトップ、モバイル、タブレットなど、あらゆるフォームファクターに対応する UI を実現しています。
{{Glossary("HTTPS")}} を利用し、セキュリティを考慮してアプリを開発していれば、ウェブプラットフォームは、コンテンツが改ざんされていないことを確認すると同時に、盗み見されることを防ぐ安全な配信メカニズムを提供します。
また、アプリの URL がサイトのドメインと一致するため、ユーザーは正しいアプリをインストールしているかどうかを簡単に確認することができます。これは、アプリストアのアプリとは大きく異なります。アプリストアには似たような名前のアプリがいくつもあり、中には自分のサイトをベースにしたものもあるため、混乱を招くだけです。ウェブアプリは、そのような混乱を解消し、ユーザーに最高の使い勝手を提供します。
前述のように、PWA は単一の API に依存するのではなく、さまざまなテクノロジーを使用して、可能な限り最高のウェブの操作性を提供するという目標を達成します。
PWA に必要な重要な要素は、サービスワーカーのサポートです。ありがたいことに、サービスワーカーは現在、デスクトップとモバイルのすべての主要なブラウザーでサポートされています。
ウェブアプリマニフェストやプッシュ通知、お知らせ、ホーム画面に追加などの他の機能も幅広く対応されています。現在、Safari では、ウェブアプリマニフェストとホーム画面に追加の対応が制限されており、ウェブプッシュ通知には対応していません。ただし、他の主要なブラウザーはこれらすべての機能に対応しています。
特に、プログレッシブエンハンスメントのルールに従うべきです。つまり、利用可能な場合はアプリの外観や実用性を向上させる技術を使用し、それらの機能が利用できない場合はアプリの基本的な機能を提供します。信頼性の高いウェブサイトを優れたパフォーマンスで提供することは、これらの機能強化を使用することの結果であり、これは、より良い慣行に従ったウェブアプリを構築することを意味します。このようにして、誰もがアプリを使用できるようになりますが、モダンブラウザーを使用している人は、 PWA 機能の恩恵をさらに受けることができます。
このシリーズの記事では、 js13kGames 2017 競技会の A-Frame category に提出されたゲームに関する情報をリストする、非常にシンプルなウェブサイトのソースコードを調べます。ウェブサイトの実際のコンテンツについて考える必要はありません。主なポイントは、自分のプロジェクトで PWA 機能を使用する方法を学ぶことです。
オンラインでは mdn.github.io/pwa-examples/js13kpwa (ソースコードも参照 ) で見つけることができます。これについては、次のいくつかの記事で詳しく説明します。
それでは、このシリーズの第 2 部に移り、サンプルアプリの構造を見ていきましょう。
{{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}}