パソコン版プログレッシブ ウェブアプリ

デスクトップ プログレッシブ ウェブアプリ（PWA）は、ユーザーの安全性とプライバシーを中心としたセキュリティ モデルでアプリを構築し、ウェブの固有のリンク機能を利用した組み込みの共有機能を利用できる、クロス プラットフォーム、クロス ブラウザの優れた方法です。最新の API を使用して、新しいウェブアプリを構築したり、既存のウェブアプリを強化したりすることで、デスクトップ アプリのような機能、信頼性、インストール可能性を実現できます。PWA は、ChromeOS 向けにウェブアプリを配信する最良の方法です。

ChromeOS では、ウェブ プラットフォームの機能が前面に押し出されており、ウェブアプリはプラットフォームのコア機能となっています。インストールされた PWA は ChromeOS ランチャーに表示され、シェルフに固定したり、OS の他の部分と深く統合したりできます。

まず、PWA チェックリストを確認し、ウェブアプリが PWA のコア チェックリストに合格していることを確認します。PWABuilder を使用すると、カスタム オフライン ページを提供し、アプリをインストール可能にすることができます。これらの推奨事項を参考に、ChromeOS で PWA を活用しましょう。

インストール可能にする

PWA の通常のウェブアプリに対する大きな利点の 1 つは、従来のデスクトップ アプリと同様にインストールできることです。web.dev のプログレッシブ ウェブアプリのパスには、PWA をインストール可能にするための専用のセクションがあります。まず、そこから始めましょう。ChromeOS でインストール可能な PWA として認識されるには、次の条件を満たしている必要があります。これらの条件は、Lighthouse のインストール可能な監査で確認できます。

  • 有効なウェブアプリ マニフェストが必要です。
  • Chrome のインストール条件を満たしている必要があります。
    • ChromeOS の PWA の場合、ユーザー エンゲージメントのヒューリスティックしきい値が満たされていなくても、オムニバーにインストール プロンプトが表示されます。

アイコンは PWA のアイデンティティの重要な部分なので、興味深くユニークなものにしてください。透明度を含めることもできます。PWA はすべてのプラットフォームで共有される 1 つのコードベースを持つため、マスク可能なアイコンを用意する必要があります。マスク可能なアイコンをサポートしていないオペレーティング システム向けに、通常のアイコンも必ず含めてください。

PWA をインストール可能にすると、ChromeOS のランチャーからシェルフまで、あらゆる場所に表示されるようになります。PWA をインストールすると、アプリをさらに魅力的にする追加の機能も利用できるようになります。

オフラインでの作業に関する注意事項

アプリをインストール可能にするだけで、見つけやすさ、使いやすさ、機能の面で多くのメリットがあります。PWA をインストール可能にしても、エクスペリエンス全体がオフラインで動作する必要はありません。ただし、インストールされたウェブアプリが従来のアプリのように感じられるようにするには、オフライン機能が必要です。基本的なカスタム オフライン ページがあれば十分です。ユーザーは、接続ステータスが変更されてもインストール済みアプリがクラッシュしないことを期待しています。従来のアプリがオフライン時に空白のページを表示しないのと同様に、PWA もブラウザのデフォルトのオフライン ページを表示すべきではありません。カスタム オフライン ページは、接続が必要であることをユーザーに知らせるメッセージから、接続が復元されるまで時間を潰せるゲームまで、さまざまなものがあります。接続が必要なキャッシュに保存されていないページや機能に対して、このカスタム オフライン エクスペリエンスを提供することで、ユーザー エクスペリエンスのアプリのギャップを埋めることができます。

サービス ワーカーの install イベント中に、後で使用するページをプリキャッシュし、ユーザーがオフラインの場合はそのページで応答することで、シンプルなオフライン ページを作成できます。カスタム オフライン ページのサンプルに沿って、この動作の例を確認し、自分で実装する方法を学ぶことができます。

より堅牢なエクスペリエンスを提供したい場合は、Cache Storage API に加えて、ブラウザ内 NoSQL ストレージ用の IndexedDB や、ユーザーがオフライン中にアクションを実行し、安定した接続が再び確立されるまでサーバー通信を延期できるようにするバックグラウンド同期などの機能を使用できます。また、安全で長期間有効なセッションなどのパターンを実装してユーザーの認証を維持したり、スケルトン画面を実装してコンテンツの読み込みをユーザーにすばやく知らせたりすることもできます。スケルトン画面は、必要に応じてキャッシュに保存されたコンテンツやオフライン インジケーターにフォールバックできます。

タッチ操作に対応させる

ほとんどの ChromeOS デバイスはタッチ操作に対応しており、多くのデバイスはスタイラスにも対応しています。そのため、アプリが通常のキーボードとマウスだけでなく、両方の入力方法でシームレスに動作することを確認する必要があります。ポインタ イベント API は、この処理専用に設計されています。click イベントなど、ポインタ関連の基本的なイベントは変更する必要がないでしょう。mouseup や touchstart などの他のイベントは、ポインタ イベントの対応するイベントに移行して、あらゆる種類のポインタでシームレスに動作するようにする必要があります。必要に応じて、さまざまな入力タイプを個別に管理することもできます。触覚的なユーザー入力に大きく依存するアプリやゲームでは、ポインタ イベント API に移行することで、ChromeOS デバイスでの操作性が大きく向上します。

ウェブ上でスムーズに描画する

ユーザーが指やスタイラスで描画するアプリを開発する場合、入力と出力の間の遅延を、スムーズに感じられるほど十分に短く保つことは、これまで困難でした。ChromeOS 向けにこのような Canvas API を利用したアプリを構築する際は、canvas.getContext() の desynchronized ヒントを使用して低遅延レンダリングを提供することをおすすめします。キャンバスに desynchronized ヒントを使用するには、次の操作を行います。

const canvas = document.createElement('canvas'); // or select one from the DOM
const ctx = canvas.getContext('2d', {
  desynchronized: true,
  // Other options here…
});

if (ctx.getContextAttributes().desynchronized) {
  // Low-latency supported! Do something awesome with it.
} else {
  // Low-latency not supported! Fall back to less awesome stuff
}

タッチに関する設計上の考慮事項

ウェブアプリを設計する際は、タッチとタッチペンによる操作を考慮することが重要です。ホバーなどの当たり前だと思っている操作は、他の入力方法ではうまく機能しないか、まったく機能しません。タッチ操作とスタイラス操作に対応したインターフェースを設計する際のベスト プラクティスは次のとおりです。

  • 画面サイズに基づいて入力の仮定を行わないでください。代わりに、機能検出（理想的には入力時）を使用して、応答方法を決定します。ChromeOS では、ユーザーは 1 つのセッション内でマウス、タッチ、スタイラスをシームレスに切り替えることができます。
  • ユーザーがタップすることを想定している要素の最小ターゲット サイズが、周囲の要素を誤ってタップしないように十分に大きいことを確認します。
  • ホバーをプログレッシブ エンハンスメントとして扱い、タッチやタッチペンによる操作（長押しやタップなど）でもインタラクションを完了できるようにします。
  • タッチ操作のユーザーは、画面上の要素を直接操作できることを期待しています。たとえば、地図のズームイン / ズームアウト ボタンではなく、ピンチズーム操作で地図を拡大 / 縮小できることを期待しています。適切な場所に一般的なタッチ操作を追加すると、アプリの操作がより自然になります。

機能性を高める

PWA の機能には、ウェブアプリがプラットフォーム通知を受信して公開できる Notifications API など、一般に知られているものもありますが、ウェブに導入されてアプリを強化する新機能や今後の機能も多数あります。Chromium の Web Capabilities プロジェクト（Project Fugu 🐡 とも呼ばれます）は、ウェブの独自性を維持しながら、強力な新しいウェブ標準を有効にする取り組みです。ウェブの独自性とは、ユーザー中心のセキュリティ、低摩擦、クロス プラットフォームの互換性です。

注: これらの機能は、検討中からリリース済みまで、さまざまな段階にあります。また、パソコンまたはモバイル デバイスのいずれかのみを対象としている場合もあります。ChromeOS ユーザーは、デスクトップ向けの機能が利用可能になるとすぐに利用できるようになりますが、クロス プラットフォームのサポート（ChromeOS での安定版のサポートを含む）には数年かかることがあります。