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