最初の手順
プログレッシブ ウェブアプリは、機能も強化されたウェブサイトです。 特定の技術スタックに縛られることはなく、新しいサイトでゼロから始めることも、全面的に見直さずに既存のウェブサイトを更新することも可能です。このガイドでは、PWA パターンを適切に実装する方法について説明します。始めるにあたって、いくつかの戦略をご紹介します。
インストール可能にする
小さく始めるこのアプローチでは、基本的なマニフェスト ファイル、シンプルなオフライン ページ、オフライン ページを提供し、いくつかの重要な CSS と JavaScript をキャッシュする Service Worker を用意します。CSS と JavaScript の重要なキャッシュ保存により、既存のウェブアプリをオフラインで動作させることができ、パフォーマンスも向上します。
対象物にフォーカスする
プッシュ通知やファイル処理など、ユーザーやビジネスに大きな影響を与える新機能を 1 つ選択してください。これにより、一度に多くの変更を加えることなく、PWA を最大限に活用できるようになります。
シンプル バージョンをビルドする
動画の再生や搭乗券へのアクセスなど、アプリケーションの既存のセクションや特定のユーザー ジャーニーを、スタンドアロンでも状況でも、オフラインファーストの PWA として連続して動作させます。これにより、手軽なテストが可能になり、PWA のユーザー エクスペリエンスを見直すことができます。
ゼロから始める
ウェブサイトの再設計を予定している場合や、ゼロから始める場合、この戦略は大いに役立ちます。これにより、他の戦略よりも簡単に PWA デザイン パターンを構築でき、特に、最初から Service Worker のすべての機能を活用できるようになります。
ストアアプリのアップグレード
PWA をアプリストアに公開できるため、PWA を PWA ランチャーにラップして、Google Play ストアや Windows ストアなどのストアにアップロードできます。既存のプラットフォーム固有のアプリがある場合は、ストアで公開されている PWA に置き換えることができます。
このアプローチでは、既存のユーザーは PWA にエクスペリエンスをアップグレードでき、新規ユーザーは引き続きブラウザまたはアプリストアから PWA を使用またはインストールできます。また、1 つのアプリですべての人が利用できるようになるため、費用と時間を削減でき、ユーザー エクスペリエンスが向上します。
PWA チェックリスト
プログレッシブ ウェブアプリはウェブサイトであり、ここから「いつプログレッシブ ウェブアプリになるか？」という問題が出てきます。 PWA のコンセプトは特定の技術やスタックを指すものではなく、さまざまな技術コンポーネントを含むパターンであるため、答えはそれほど単純ではありません。
すべてのブラウザに固有のルールというものはありませんが、ユーザーに好まれる PWA の作成に役立つ「プログレッシブ ウェブアプリ チェックリスト」という推奨事項があります。
基本要件
PWA はモバイルからパソコンまで、すべてのデバイスにまたがっているため、プログレッシブ ウェブアプリのチェックリストの中核となるのは、画面サイズや入力タイプに関係なく、すべてのユーザーがアプリをインストール可能で信頼できるものにするために必要な作業です。
主な要件は次のとおりです。
すばやく起動、常に高速で快適
パフォーマンスは、オンライン エクスペリエンスの成功において重要な役割を果たします。パフォーマンスが高いサイトはパフォーマンスが低いサイトよりもユーザーのエンゲージメントと定着率が高いからです。サイトは、ユーザーを中心としたパフォーマンス指標の最適化に重点を置く必要があります。
あらゆるブラウザに対応
プログレッシブ ウェブアプリは第一のウェブアプリです。つまり、ブラウザ内だけでなく、複数のブラウザをまたいで機能する必要があります。ただし、すべてのブラウザでエクスペリエンスが同じである必要はありません。ブラウザによってはサポートされていない機能がある場合があります。また、優れたエクスペリエンスを確保するために代替手段が用意されています。
あらゆる画面サイズにレスポンシブ
ユーザーはあらゆる画面サイズで PWA を使用し、すべてのコンテンツを任意のビューポート サイズで使用できます。
カスタムのオフライン ページを用意する
ユーザーがオフラインのときも PWA に保持しておくことで、ブラウザのデフォルトのオフライン ページに戻すよりもシームレスでネイティブな操作性を実現できます。
インストール可能である
アプリをインストールまたはホーム画面に追加するユーザーは、それらのアプリをよく利用する傾向があり、PWA をインストールすると、より多くの機能を活用してユーザー エクスペリエンスを向上させることができます。
PWA の最適な特性
真に優れたプログレッシブ ウェブアプリ（最高水準のアプリのような感覚）を作成するには、重要なチェックリスト以上のものが必要です。プログレッシブ ウェブアプリの最適なチェックリストは、ウェブの強みを活かしながら、PWA に機能性と信頼性を持たせることです。
オフライン エクスペリエンスを提供する
ユーザーがオフラインでも PWA を使用できるようにすることで、アプリのような本物のエクスペリエンスをユーザーに提供できます。そのためには、接続を必要としない機能を特定し、ユーザーが少なくとも一部の機能にアクセスできるようにします。
完全にアクセス可能
アプリケーションのすべてのコンテンツと操作がスクリーン リーダーで理解され、キーボードだけで使用可能であること、フォーカスが示され、色のコントラストが強くなることを確認します。PWA を誰もが利用できるようにすることで、誰もが使えるようになります。
可能な場合は強力な機能を使用
プッシュ メッセージ、WASM、WebGL から、ファイル システムへのアクセス、連絡先選択ツール、アプリストアとの統合まで、多岐にわたります。高度に統合された、高度に統合された PWA を作成するためのツールをご紹介します。これまでプラットフォーム アプリ用に確保されていた機能が揃ったユーザー エクスペリエンスを創出し、ユーザーはどこにでも持って行けるようになります。
検索で見つけられる
ウェブサイトのトラフィックの半分以上はオーガニック検索から発生しています。ユーザーが PWA を見つけるためには、コンテンツに対して正規 URL が存在し、検索エンジンがサイトをインデックスに登録できるようにする必要があります。
あらゆる入力タイプに対応
ユーザーがアプリケーションをシームレスに使用しながら入力タイプを切り替えられるようにする必要があります。また、入力方法は画面サイズに依存しないようにする必要があります。
権限リクエストのコンテキストを提供する
通知、位置情報、認証情報などの権限のプロンプトをトリガーするには、コンテキストに応じた根拠を示して、ユーザーがプロンプトを受け入れる可能性を高める必要があります。
正常なコードのためのベスト プラクティスに従っている
アプリケーションを最新の状態に保ち、コードベースを健全に保つことで、このチェックリストに記載されている他の目標を満たす新機能を簡単に提供できるようになります。