PWAをアプリのように動作させる
プログレッシブWebアプリをWebサイトのように動作させるのではなく、「実際の」アプリのように動作させる
プログレッシブWebアプリは、「PWAは単なるWebサイト」と言っても良いでしょう。 MicrosoftのPWAドキュメントでは、そのことに同意しており、PWAの提唱者であるFrances Berriman氏とAlex Russell氏さえもそのように述べています。まさにPWAは単なるWebサイトですが、それだけではありません。正しく実行された場合、PWAはWebサイトのように動作するのではなく、「実際の」アプリのように感じられます。では、実際のアプリのような動作とは何を意味するでしょうか。
この質問に答えるために、Apple Podcastsアプリの例を取り上げます。これはデスクトップのmacOSとモバイルのiOS (およびiPadOS) で利用できます。Podcastsはメディアアプリケーションですが、これから説明する中心的な概念は、他のカテゴリのアプリにも当てはまります。
オフラインで実行可能 #
一歩下がって、携帯電話やデスクトップコンピュータにインストールされているプラットフォーム固有のアプリケーションのいくつかを考えると、明らかに際立っていることが1つあります。それは常に何か情報が得られるということです。Podcastsアプリでは、オフラインであっても常に何らかの動作が行われます。ネットワークに接続していない場合でも、当然アプリは起動しきます。[トップチャート] セクションにコンテンツは表示されませんが、「現在接続できません」メッセージと [再試行] ボタンがペアになって表示されます。これは期待していた経験ではないかもしれませんが、少なくとも何らかの情報を得ることはできます。
Webでこれを実行する方法
Podcastsアプリは、いわゆるアプリシェルモデルに従っています。左側のメニューアイコンやコアプレーヤーのUIアイコンなどの装飾画像を含め、コアアプリを表示するために必要なすべての静的コンテンツはローカルキャッシュに保存されます。トップチャートデータなどの動的コンテンツはオンデマンドでのみ読み込まれ、読み込みに失敗した場合はローカルキャッシュに保存されたフォールバックコンテンツが表示されます。このアーキテクチャモデルをWebアプリに適用する方法については、アプリシェルモデルの記事を参照してください。
オフラインコンテンツが利用可能で、メディアが再生可能 #
オフラインでも、左側のドロワーから[ダウンロード済み] セクションに移動して、ダウンロードしたポッドキャストエピソードを楽しむことができます。これらのエピソードは、すぐに再生でき、アートワークや説明などのすべてのメタデータとともに表示されます。
Webでこれを実行する方法
以前にダウンロードしたメディアコンテンツは、たとえばWorkboxライブラリのキャッシュに保存された音声と動画の再生レシピを使用して、キャッシュから再生できます。その他のコンテンツは、常にキャッシュまたはIndexedDBに保存できます。詳細については、Webのストレージの記事を読み、どのストレージテクノロジーをいつ使用するかを確認してください。使用可能なメモリ量が少なくなっても、消去されずに永続的に保存する必要があるデータの場合には、永続ストレージAPIを使用できます。
プロアクティブなバックグラウンドダウンロード #
オンライン接続されたときには、http 203などのクエリでコンテンツを検索できます。また、検索結果HTTP 203ポッドキャストを購読することを決めたときには、シリーズの最新エピソードがすぐにダウンロードされ、問い合わせはありません。
Webでこれを実行する方法
ポッドキャストエピソードのダウンロードには、時間がかかる場合があります。Background Fetch APIを使用すると、ダウンロードをブラウザに委任できます。ブラウザは、ダウンロードをバックグラウンドで処理します。 Androidでは、さらにブラウザがこれらのダウンロードをオペレーティングシステムに委任することもできるため、ブラウザを継続的に実行する必要はありません。ダウンロードが完了すると、アプリのサービスワーカーが起動し、応答の処理方法を決定できます。
他のアプリケーションとの共有と連携 #
Podcastsアプリは、他のアプリケーションと自然に統合されます。たとえば、好きなエピソードを右クリックすると、メッセージアプリなど、デバイス上の他のアプリと共有できます。また、システムクリップボードとも自然に統合されます。任意のエピソードを右クリックして、そのエピソードへのリンクをコピーできます。![[エピソードの共有] > [メッセージ] オプションが選択されたポッドキャストエピソードで呼び出されたPodcastsアプリのコンテキストメニュー。](https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gKeFGOAZ2muuYeDNFbBW.png?auto=format)
Webでこれを実行する方法
Web Share APIとWeb Share Target APIを使用すると、デバイスの他のアプリケーションとの間でテキスト、ファイル、リンクをアプリで共有および受信できます。Webアプリがオペレーティングシステムに組み込まれた右クリックメニューにメニュー項目を追加することはまだできませんが、デバイスの他のアプリとリンクする方法は他にもたくさんあります。Async Clipboard APIを使用すると、テキストおよび画像データ (PNG画像) をプログラムで読み取り、システムクリップボードに書き込むことができます。Androidでは、Contact Picker APIを使用して、デバイスの連絡先管理からエントリを選択できます。プラットフォーム固有のアプリとPWAの両方を提供している場合は、Get Installed Related Apps APIを使用して、プラットフォーム固有のアプリがインストールされているかどうかを確認できます。インストールされている場合は、ユーザーにPWAのインストールや承認、Webプッシュ通知の承諾を促す必要はありません。
バックグラウンドアプリ更新 #
Podcastsアプリの設定で、新しいエピソードを自動的にダウンロードするようにアプリを構成できます。そのことを考える必要さえありません。更新されたコンテンツが常に提供されているのです。![[Podcastsの更新] オプションが [毎時] に設定されている [一般] セクションのPodcastsアプリの設定メニュー。](https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iTKgVVjX0EM0RQS3ap4X.png?auto=format)
Webでこれを実行する方法
Periodic Background Sync APIを使用すると、アプリを実行しなくても、バックグラウンドでコンテンツを定期的に更新できます。つまり、新しいコンテンツがプロアクティブに利用可能であるため、ユーザーはいつでもすぐにコンテンツを掘り下げることができます。
クラウド上で同期された状態 #
同時に、サブスクリプションは、所有しているすべてのデバイス間で同期されます。シームレスな世界では、ポッドキャストのサブスクリプションを手動で同期することを気にする必要はありません。同様に、モバイルデバイスのメモリが、デスクトップですでに聴いたエピソードによって消費されることを心配する必要もありません。逆も同様です。再生状態は同期されたままで、聴いたエピソードは自動的に削除されます。![[デバイス間でサブスクリプションを同期する] オプションがアクティブになっている [詳細] セクションのPodcastsの設定メニュー。](https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uVJJ40Zxi5jx1AP1jd9U.png?auto=format)
Webでこれを実行する方法
アプリ状態データの同期タスクは、Background Sync APIに委任できます。同期処理自体は、ユーザーがアプリを再度閉じた場合を含め最終的に実行されれば、即時実行する必要はありません。
ハードウェアメディアキーコントロール #
Chromeブラウザでニュースページを読んでいるときなど、別のアプリケーションで忙しいときでも、ノートPCのメディアキーを使用してPodcastsアプリを制御できます。前後にスキップするためだけにアプリに切り替える必要はありません。
Webでこれを実行する方法
メディアキーはMedia Session APIでサポートされています。このように、ユーザーは物理キーボードやヘッドフォンのハードウェアメディアキーを利用したり、スマートウォッチのソフトウェアメディアキーからWebアプリを制御したりすることもできます。さらにシーク操作をスムーズにするには、オープニングクレジットやチャプターの境界を通過するなど、ユーザーがコンテンツの重要な部分をシークするときに振動パターンを送信することができます。
マルチタスクとアプリショートカット #
もちろん、いつでもどこからでもPodcastsアプリにマルチタスクで戻ることができます。アプリには明確に識別できるアイコンがあり、デスクトップやアプリケーションドックに配置することもできるので、好きなときにPodcastsをすぐに起動できます。
Webでこれを実行する方法
デスクトップとモバイルの両方のプログレッシブWebアプリを、ホーム画面、スタートメニュー、またはアプリケーションドックにインストールできます。インストールは、プロアクティブなプロンプトに基づいて行うことも、アプリ開発者が完全に制御することもできます。基本的な情報については、What does it take to be installable?記事をお読みください。マルチタスクの場合、PWAはブラウザから独立して表示されます。
コンテキストメニューのクイックアクション #
最も一般的なアプリのアクションである [新しいコンテンツの検索] と [新しいエピソードの確認] は、Dockのアプリのコンテキストメニューから直接利用できます。ログイン時に [オプション] メニューからアプリを開くこともできます。![[検索] および [新しいエピソードの確認] オプションを表示するPodcastsアプリアイコンのコンテキストメニュー。](https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SnA6Thz5xaopuTWRzWgQ.png?auto=format)
Webでこれを実行する方法
PWAのWebアプリマニフェストでアプリアイコンのショートカットを指定することにより、ユーザーがアプリアイコンから直接アクセスできる一般的なタスクへのクイックルートを登録できます。macOSなどのオペレーティングシステムでは、ユーザーが、ログイン時にアプリアイコンを右クリックしてアプリを起動するように設定することもできます。ログイン時に実行するための提案は現在作業中です。
デフォルトのアプリとして機能する #
他のiOSアプリケーション、さらにはWebサイトや電子メールでさえ、 podcasts:// URLスキームを活用することでPodcastsアプリと統合できます。ブラウザでpodcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903などのリンクをたどると、Podcastsアプリが表示され、ポッドキャストを購読するか聴くかを決めることができます。
Webでこれを実行する方法
完全にカスタムのURLスキームを処理することはまだ可能ではありませんが、PWAのURLプロトコル処理の提案は現在作業中です。現在では、registerProtocolHandler()とweb+スキームプレフィックスが最善の代替手段です。
ローカルファイルシステムの統合 #
すぐには思いつかないかもしれませんが、Podcastsアプリは自然にローカルファイルシステムと統合されます。ポッドキャストエピソードをダウンロードすると、ノートPCでは~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cacheに保存されます。ただし、~/Documentsとは異なり、このディレクトリは当然標準のユーザーが直接アクセスすることを意図したものではありません。ファイル以外の保存メカニズムは、オフラインコンテンツセクションを参照してください。
Webでこれを実行する方法
File System Access API{/a0を使用すると、開発者はデバイスのローカルファイルシステムにアクセスできます。直接使用することも、APIをサポートしていないブラウザのフォールバックを透過的に提供するbrowser-fs-accessサポートライブラリ経由で使用することもできます。セキュリティ上の理由から、システムディレクトリはWebアクセスできません。
プラットフォームのルックアンドフィール #
PodcastsなどのiOSアプリケーションには自明なより微妙なことがあります。つまり、どのテキストラベルも選択できず、すべてのテキストがコンピュータのシステムフォントと融合されています。また、システムカラーテーマ (ダークモード) の選択も優先されます。
Webでこれを実行する方法
user-select CSSプロパティと値noneを利用することで、UI要素が誤って選択されるのを防ぐことができます。ただし、アプリのコンテンツを選択不能にする目的でこのプロパティをむやみに使用しないでください。ボタンのテキストなどのUI要素でのみ使用してください。font-family CSSプロパティの値system-uiでは、アプリに使用するシステムのデフォルトUIフォントを指定することができます。prefers-color-scheme選択を優先し、オプションのダークモードトグルでそれをオーバーライドすることで、アプリはユーザーの配色設定に従うことができます。決定するもう1つの点は、スクロール領域の境界に達したときにブラウザでどのような処理を実行すべきかということかもしれません。たとえば、カスタムプルを実装して更新します。これは、overscroll-behaviorプロパティで可能です。カスタマイズされたタイトルバー #
Podcastsアプリウィンドウを見ると、Safariブラウザウィンドウなどの従来の統合されたタイトルバーとツールバーがなく、メインプレーヤーウィンドウにドッキングされたサイドバーのようなカスタマイズされたエクスペリエンスになっていることがわかります。
Webでこれを実行する方法
現在は不可能ですが、現在、タイトルバーのカスタマイズに取り組んでいます。ただし、Webアプリマニフェストの displayおよびtheme-colorプロパティを指定して、アプリケーションウィンドウの外観を決定し、どのデフォルトブラウザコントロールが表示されるのか (または何も表示されないのか) を決定することができ (推奨され) ます。
軽快なアニメーション #
Podcastsでは、アプリ内アニメーションは軽快でスムーズです。たとえば、右側のエピソードノートドロワーを開くと、スマートにスライドします。ダウンロードから1つのエピソードを削除すると、残りのエピソードが浮き上がり、削除されたエピソードによって解放された画面領域を使用します。![[エピソードノート] ドロワーが展開されたPodcastsアプリ。](https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ucob9t4Ga3jMK20RVvSD.png?auto=format)
iOSのPodcastsアプリは、実際のアプリケーション以外の場所、たとえば、システムのウィジェットビューや、Siri提案の形式でコンテンツを表示できます。タップするだけで操作できるプロアクティブな使用状況ベースの注意喚起があると、Podcastsなどのアプリの再エンゲージメント率が大幅に向上する可能性があります。 ポッドキャストエピソードの再生中、Podcastsアプリは、エピソードのアートワーク、エピソードのタイトル、ポッドキャスト名などのメタデータを備えた美しいコントロールウィジェットをロック画面に表示します。 プッシュ通知は、Web上で少し煩わしいものになっています (通知プロンプトは今ではかなり静かになっていますが)。しかし、適切に使用すれば、多くの価値を付加できます。たとえば、iOS Podcastsアプリは、オプションで、購読しているポッドキャストの新しいエピソードを通知したり、新しいエピソードを推奨したり、新しいアプリの機能を通知したりできます。 私が購読しているポッドキャストの1つでは、新しいエピソードが利用可能になるといつでも、Podcastsのホーム画面アイコンにアプリアイコンバッジが表示され、アプリを確認するように邪魔にならない方法で通知します。 ポッドキャストメディアの再生中は、画面がオフになることがありますが、システムはスタンバイモードになりません。アプリは、たとえば歌詞やキャプションを表示するために、オプションで画面を起動状態に保つこともできます。 PodcastsアプリはmacOSデスクトップエクスペリエンスの一部ですが、iOSではAppStoreからインストールする必要があります。 以下の表は、すべての機能の概要を簡潔に説明し、Webで実現するために役立つリソースの一覧を示します。 PWAは、2015年の導入以来、長い道のりを歩んできました。ProjectFugu🐡のコンテキストでは、会社横断的なChromiumチームが最後に残ったギャップを埋めるために取り組んでいます。この記事のアドバイスの一部だけに従うことで、アプリのような感覚に少しずつ近づき、ユーザーに「単なるWebサイト」を扱っていることを忘れさせることができます。正直なところ、ほとんどの人にとって実際のアプリのように感じられる限り、アプリがどのように構築されているか (そしてなぜそれらが必要なのか) は気にしないはずです。 この記事は、Kayce Basques氏、Joe Medley氏、Joshua Bell氏、Dion Almaer氏、Ade Oshineye氏、Pete LePage氏、Sam Thorogood氏、Reilly Grant氏、Jeffrey Yasskin氏によってレビューされました。Webでこれを実行する方法
アニメーションとパフォーマンスの記事で概説されている多数のベストプラクティスを考慮すると、Webでの高パフォーマンスアニメーションは確かに可能です。ページ制御されたコンテンツやメディアカルーセルで一般的に見られるスクロールアニメーションは、CSSスクロールスナップ機能を使用することで大幅に改善できます。完全に制御するには、Web Animations APIを使用できます。 アプリの外部に表示されたコンテンツ #
Webでこれを実行する方法
Content Index APIを使用すると、アプリケーションはPWAのどのコンテンツがオフラインで利用できるかをブラウザに通知できます。これにより、ブラウザはこのコンテンツをメインアプリの外部に表示できます。アプリで関心のあるコンテンツを読み上げ可能な音声再生に適したものとしてマークアップし、一般的に構造化マークアップを使用することで、検索エンジンやGoogleアシスタントなどの仮想アシスタントが製品を最適な形で提示できるようになります。ロック画面のメディアコントロールウィジェット #
Webでこれを実行する方法
Media Session APIを使用すると、アートワーク、トラックタイトルなどのメタデータを指定して、ロック画面、スマートウォッチ、またはブラウザの他のメディアウィジェットに表示できます。プッシュ通知 #
![[通知] 設定画面のiOS Podcastsアプリ。[新しいエピソード] の通知トグルがアクティブになっています。](https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IFnNRo6BnHL6BxDmiqF7.png?auto=format)
Webでこれを実行する方法
Push APIを使用すると、アプリがプッシュ通知を受信できるため、PWAに関する注目すべきイベントについてユーザーに通知できます。将来の確認済みの時間に発生し、ネットワーク接続を必要としない通知の場合は、Notification Triggers APIを使用できます。アプリアイコンのバッジ #
![[バッジ] トグルがアクティブになっていることを示すiOS設定画面。](https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3smO2sJz5oMwy4RYpQoF.png?auto=format)
Webでこれを実行する方法
Badging APIを使用してアプリアイコンバッジを設定できます。これは、PWAに「未読」アイテムという概念がある場合、または目立たないようにユーザーの注意をアプリに向ける手段が必要な場合に特に役立ちます。メディアの再生は省エネ設定よりも優先される #
![[Energy Saver] セクションのmacOS設定。](https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CRkipfmdkLJrND83qvQw.png?auto=format)
Webでこれを実行する方法
Screen Wake Lock APIを使用すると、画面がオフになるのを防ぐことができます。Webでのメディア再生は、システムがスタンバイモードに切り替わるのを自動的に防ぎます。アプリストアでのアプリの検索 #
podcast、podcasts、またはapple podcastsを検索すると、すぐにAppStoreでアプリが表示されます。
Webでこれを実行する方法
AppleはAppStoreでのPWAを許可していませんが、Androidでは、信頼できるWebアクティビティにラップされたPWAを送信できます。 bubblewrapスクリプトにより、これは簡単な操作になります。このスクリプトは、コマンドラインを実行せずに使用できるPWABuilderのAndroidアプリのエクスポート機能を内部的に強化するものでもあります。機能の概要 #
まとめ #
謝辞 #