PWA のベストプラクティス

PWAはウェブ技術に基づいています。これは、端末にインストールできることに加えて、PWAはウェブブラウザーでも実行できるということを意味しています。互換性を保証するためには、さまざまなブラウザーや OS で アプリのテスト を行うことが不可欠です。

ユーザーが使用する可能性のある多様な範囲のブラウザーを考慮し、幅広い潜在的なユーザーに合わせなければなりません。機能検出を使用することで、幅広いユーザーに有益な体験を提供することができます。

機能検出は、プログレッシブエンハンスメント（できるだけ多くのユーザーに優れた使い勝手を提供することを可能にする設計思想）にも役立ちます。

プログレッシブエンハンスメントでは、最もシンプルな技術を使用してアプリのコア機能を最初に普遍的に動作させることに集中し、次に対応している端末の使い勝手を向上させます。

例えば、フォーム送信を HTML の <form> 要素で処理すれば、フォームが JavaScript をサポートしていないブラウザーを含むすべてのブラウザーで動作することになります。その後、クライアント側の検証や JavaScript ベースの送信処理を追加することでフォームを徐々に強化し、対応している端末での使い勝手を向上させることができます。

さまざまなブラウザーでアプリをテストすることが重要であるのと同様に、すべての端末でテストすることで、アプリが多くのユーザーにアクセスされることを保証します。

レスポンシブデザインは、PWA にとって、確実にどの画面サイズでもコンテンツにアクセスすることを保証するために重要です。ユーザーは端末の画面サイズに関係なく、すべての機能やコンテンツにアクセスできる必要があります。ビューポートサイズごとにコンテンツを並べ替えることで、重要なデータやアクションに優先順位をつけることができます。

ユーザーがどのような方法でコンテンツにアクセスしても、アプリケーションを確実に操作できるように保証しましょう。キーボードやマウスだけでなく、タッチやスタイラスの入力方法にも対応してください。アプリケーションのすべての機能が、どのような入力方法でもアクセスできるようにしてください。

最後に、自分自身でボタンやフォーム要素を作り直すのではなく、意味付けされた HTML 要素 を使用してください、意味付けされた HTML 要素はすべてのユーザー入力方法にすぐに対応します。

インストールされたアプリのユーザーは、低速で信頼性の低いネットワークに接続されているときや、端末が完全にオフラインのときでも、常に動作することを期待しています。

少なくとも、PWA は一般的なブラウザーエラーページを表示させる代わりに、オフラインであることをユーザーに知らせる独自のオフラインページを提供する必要があります。独自のオフラインページは、ブラウザーや端末間でより一貫した使い勝手を提供し、ユーザーをアプリに引き付け続けます。

サービスワーカーを使用して、ネットワークリクエストに介入し、ユーザーがオフラインのときに独自のオフラインページで応答することで、独自のオフラインページを提供することができます。

さらに進んでアプリのような使い勝手を提供するために、PWA はユーザーがオフラインのときにも機能する必要があります。これは、ユーザーがオフラインでもアプリの機能の一部、できればすべてを使用し続けることができる、ということです。

ユーザーが長いメールを作成し、ネットワーク接続を失ったことに気づかずに「送信」を押したとします。このアプリはオフラインで動作するので、メールはローカルに保存され、端末がオンラインに戻ったときに自動的に送信されます。

詳しくはオフライン操作とバックグラウンド処理を参照してください。

ディープリンクは、アプリのドメイン内の特定のページを指すハイパーリンクです。例えば、アプリのトップページは https://example.com/ で利用できるかもしれませんが、https://example.com/products/123 で特定の製品ページにリンクすることもできます。

特定の URL で任意のリソースを参照する機能は、ウェブの最も強力な機能の1つです。PWA はウェブ技術に基づいて構築されているため、この機能を導くことができますし、導くべきです。

アプリの様々な部分を固有の URL から利用できるようにすることで、ユーザーはアプリ内の特定のコンテンツをブックマークしたり、直接移動したり、共有したりすることができます。また、検索エンジンがアプリのコンテンツをインデックスし、ウェブ検索で発見できるようになります。

ユーザーは、インストールされたアプリに対して、ウェブサイトとは異なる期待を持っています。ユーザーは、特にネットワーク接続が悪い場合、ウェブサイトの読み込みとナビゲーションの時点に時間がかかることを想定しています。しかし、インストール済みアプリには、常に速く、レスポンスよく動作することを期待します。

アプリの読み込みとコア機能の実行速度は、ユーザーエンゲージメントと定着率において重要な役割を果たします。アプリの応答に時間がかかるほど、ユーザーはアプリを放棄します。

パフォーマンスを測定し、改善するのに役立つツール、API、最善の手法があります。詳しくは、ウェブパフォーマンスを参照してください。

アクセシビリティは、個人の能力やアプリにアクセスするために使用する端末に関係なく、誰もがアプリを使用することができるように保証するために非常に重要です。アクセシビリティは、可能な限り多くの人がアプリを使用することができるように保証します。アクセシビリティは法律でも要求されています。さらに、アクセシビリティは多くの場合、永続的または一時的な障碍を持つ人だけでなく、すべての人にとってより使い勝手が良くなります。

アクセシビリティで、あなたのウェブアプリをアクセシブルにする方法を学んでください。

ユーザーは、インストールされた PWA が、インストールされたプラットフォーム専用のアプリのように動作することを期待しています。ユーザーが期待するアプリのような使い勝手を提供するには、何らかの方法でアプリをオペレーティングシステムと統合しましょう。例えば、次のような方法です：

• 通知 API を使用してユーザーの端末に通知を送信します。
• ウェブアプリマニフェストの file_handlers メンバーでファイルを処理します。
• アプリのアイコンにバッジを表示します。
• アプリ間のデータ共有ができるようにします。

ウェブアプリマニフェストメンバーの多くを使用して、ユーザーの端末上でのアプリの表示方法をカスタマイズしたり、オペレーティングシステム内でより深く統合したりすることができます。

ユーザーがアプリをインストールするのは、ウェブサイトよりも集中した使い勝手を取得し、より効率的にタスクを達成するためです。彼らは、アプリがより合理的で、ごちゃごちゃしておらず、最も重要なタスクに集中していることを期待しています。

PWA が以下の点でアプリのような使い勝手を提供するようにしましょう。

• スタンドアロン表示モードを使用して、アプリに自分自身で専用のウィンドウを表示します。
• アプリのアイコンを定義します。
• prefers-color-scheme メディア特性を使用してユーザーの環境設定を検出し、それに応じてアプリのテーマを適応させます。
• アプリのテーマと背景色をカスタマイズして、プラットフォーム専用のアプリのように洗練された使い勝手を提供します。
• コンテンツを整理し、アプリがユーザーに達成させる最も重要な課題に集中しましょう。これは、従来のウェブサイトによくある大きなヘッダーやフッターを除去し、代わりにメニューの形で置き換えるということを意味しています。
• system-ui の font-family を使用して、コンテンツをよりプラットフォームネイティブな感じにし、ユーザーがカスタムフォントをダウンロードすることを要求されずに、より速く読み込むようにしましょう。

• What makes a good Progressive Web App (web.dev, 2022)
• Best practices for PWAs (learn.microsoft.com, 2023)