YouTube PWA: ユーザーにシームレスな体験をもたらす

公開: 2022-08-03

Youtube Music PWA の立ち上げが成功した後、2019 年に Youtube が PWA として再発明されたことを知っている人はほとんどいませんでした。 Google サイトエコシステムの別の Web アプリがプログレッシブ Web アプリになったことで、PWA の可能性が再び強化されました。以下は、特に e コマースにおいて、あらゆる種類の Web サイトと引き換えにパフォーマンスを向上させ、利益を生み出す PWA の能力に対する期待です。今回はYoutubeのPWAについてです。

最大のロングビデオソーシャルプラットフォームの PWA 採用の背後にあるストーリーとは?

印象的な 10 年間で、YouTube は飛躍を遂げ、その帝国を 10 億から 10 億回のビューにまとめました。それ以来、15 年の歴史と共に、YouTube はオンライン動画プラットフォームの王者としての地位を確立しています。

毎月 22 億人のユーザーが動画コンテンツを毎日何時間も費やしており、YouTube は Google に次いで 2 番目に人気のある検索エンジンとしての記録も保持しています。私たち全員が参加し、所属する部族を見つけ、運動に参加し、オンラインとオフラインで持続する影響を生み出す場所です。

Youtube を使用すると、コンテンツクリエーターは非常に熱心な視聴者に自分の作品を簡単に広めることができます。これが、YouTube にすべての人がアクセスできる理由の答えです。クラフト、ストリーミングから美容レビュー、食べ物、政治などまで。これは、ユーザー (作成者と視聴者) と Google の両方にとって完全な win-win です。

プログレッシブ Web アプリという新しい用語を導入した後、Google チームは、他の開発者やユーザーに PWA の習得に向けて情報を提供し、導くという素晴らしい仕事をしました。

Twitter が 2018 年に世界最大の PWA を開始したなど、多くの有名なブランドが Google 開発者の助けを借りて最初の革新的な飛躍を遂げました。その直後に、Google フォトが PWA として利用可能になった次の製品であり、他の Google サービスも同様でした。具体的には、Google ドライブ、Google トラベル、Google マップです。

チームが説明したように、2019 年に Youtube はプレミアムユーザーアクセスを PWA として提供し、ネットワークパフォーマンスが低い場合でも、いつでもどこでもプラットフォームを使用できるようにしたいと考えています。 PWA は最新の Web 機能を適用して、Web アプリのエクスペリエンスをネイティブアプリに非常に似たものにする一方で、ブラウザータブ内のページは没入型の高レベルアプリとして実行できます。

Chrome のユーザーは、アプリをホーム画面に追加してデスクトップアプリとしてのみ使用したい場合、Youtube PWA を体験することもできます。それ以外では、オフラインブラウジングなどの主要な機能は利用できません。これは、オープンソースの Youtube PWA で可能な限り最小限のものであるためです。

さまざまなレポートによると、PWA は多くの新しい技術的進歩のためのスペースを開くため、PWA に変換することで、Google は主力プラットフォームの 1 つをさらに大幅に改善することができます。

関連記事：

Starbucks PWA のような PWA を開発するには、どれくらいの費用がかかりますか?

アリババ PWA: プログレッシブ Web アプリで勝つ

Pinterest PWA: 正しい方法でモバイルパフォーマンスを向上させる

Youtube PWA のこれまでの成果

YouTube PWA がプレミアムユーザーエクスペリエンスを強化

Youtube PWA は、表示されるプラットフォーム、デバイス、ネットワーク品質、またはビデオ形式に関係なく、プレミアムバージョンの没入型ビデオエクスペリエンスを提供するために作成されました。

Chrome OS に Android アプリをダウンロードしない限り、接続していないときに Youtube ビデオを見る方法は他にありません。しかし、PWA によって状況は一変しました。プレミアムユーザーは、いつでも、どこでも、どんなデバイスを使ってもオフラインで動画を視聴できます。

シームレスなアクセスのためのデフォルトのアプリエクスペリエンスの作成

これを達成するために、Google の開発者は、Youtube がよりスムーズなユーザーエクスペリエンスを備えた PWA を取得するために、多くの学習と実験が行われていると述べました。これには、いつでも冒険を引き出すための安全なオフライン再生が含まれます。

Youtube に配置されていたのは、プッシュ通知のための Service Worker⁠ でしたが、fetch⁠ ハンドラーがありませんでした。後にクラッシュする可能性のあるサイトに関して、開発者チームは代替ソリューションを探し、ユーザーをブラウザーのようなデフォルトサイトに戻す機能を備えた操作不要の Service Worker を作成しました。

これらの継続的な小さな変更により、YouTube チームは、ユーザーが常に最新バージョンにアクセスできるようにしたいと考えていました。そのため、PWA はソースネットワークから直接配信し、必要な場合にのみキャッシュバックするのに役立ちます。

Service Worker が思いとどまらせたり、気を散らしたりしないようにするために、ネットワークファーストキャッシングを実行し、Navigation Preloads を利用します。破損を考慮して、開発チームはモニタリング⁠サービスワーカーも設定しました。

Chromebook での PWA の実験

Youtube チームは、Chromebook ユーザーをテスト実行の理想的な候補として選びました。それらはすべて最新の API を備えているため、実際のユーザーからアップデートに対する直接のフィードバックを得ることができます。これらの実行は、次のような単純な機能から始めて、エンドユーザー向けの PWA 適応フェーズとしても機能します。

マウスとキーボードを使用したアクティビティをサポートする新しいスマートタッチジェスチャ
ダブルタップで再生速度を早送りする
音声検索
Web Share⁠、App Shortcuts⁠、および Declarative Link Capturing⁠を統合して、より多くの PWA 機能を有効にします

YouTube TV は頻繁な視聴者にプログレッシブ Web アプリのインストールを促します

tv.youtube.com にアクセスすると、Chrome のオムニボックスに「プラス」ボタンがあることがわかります。他の PWA と同様に、プロンプトを有効にして、ユーザーが PWA でできることについてもっと知るように促すことができます。テレビで文字を入力するのは難しいので、アプリを一度インストールするだけで時間を節約できます。

Youtube TV PWA はそれを認識しており、システムダイアログの隅にある青色の [アプリのインストール] ボタンを使用して、見慣れた視聴者に促します。ユーザーはいつでも招待を取り消すことができますが、長い目で見れば、喜んで取り下げる人は少なくなります。

ホームベースの画面用の新しい PWA バージョンでは、ビューを上に配置すると、他のブラウザー UI と共にアドレスバーが表示されなくなります。それとは別に、実行中のコンテンツのタイプを知らせるオーバーフロー位置インジケーターが利用可能です。

関連トピック：

Uber PWA: プログレッシブ Web アプリの完璧なケーススタディ

WordPress PWA: 知っておくべきことすべて

Twitter PWA: そのエキサイティングな機能を発見する

Youtube PWA に関するよくある質問

YouTube には PWA がありますか?

はい。 Youtube Music PWA の採用が成功した後、Youtube は 2019 年に Chromebooks で PWA バージョンをリリースし、プレミアムユーザーはオフラインでの使用としてより多くの独占的な機能を体験できます。

PWA ユーチューブとは？

Youtube PWA は、PWA テクノロジーを使用して、ユーザーにとってより健全でシームレスなデフォルト機能を作成します。頻繁に視聴するユーザーが Youtube をより簡単に楽しめるようにすることを目的とした PWA バージョンでは、ポップアップでユーザーに Youtube Web をホーム画面に追加するよう促します。これにより、ユーザーはアプリを更新する必要がなくなり、Google からの最新の改善を自動的に体験できます。

Youtube PWA を追加するにはどうすればよいですか?

通常、Chrome ユーザーは、オムニボックスのプラスアイコンをクリックして Youtube PWA をホーム画面に追加し、アプリのように使用するよう求められます。以前のように、Google Chrome のオーバーフローメニューから人気のある [インストール] オプションとは異なります。

「インストール」プロセスが完了すると、アプリランチャーに有名な赤い再生ロゴと Youtube の名前が表示されます。アドレスバーが近くになくても、全画面ウィンドウで Youtube を開くことができるようになりました。ユーザーインターフェイス要素は、ネイティブデスクトップアプリのエクスペリエンスに似ており、シェルフピン留め機能により、ユーザーはすぐにアクセスできます。

YouTube Music は PWA ですか?

大手ブランド向けに多くの有名な PWA ローンチを作成した後、Google は YouTube Music PWA を含む独自のアプリを PWA として構築および提供し始めました。 15 か月の試用期間を経て、採用はまたもや成功し、そのすぐ後に、彼らの主力プラットフォームである Youtube が次に登場しました。

YouTube PWA はどのように機能しますか?

一般に、Youtube PWA は古い Web バージョンからあまり変わっていません。最大の違いは、Youtube をすぐにインストールするためのリンクを含むプロンプトポップアップが表示されるようになることです。 Web ブラウザーによって表示方法が異なりますが、最新の Web ブラウザーはすべて PWA をサポートしています。インストールすると、ブラウザのタブではなく、別の通常のアプリのように独自のウィンドウで Youtube を実行できます。

その他の PWA の例:

Uber PWA: プログレッシブ Web アプリの完璧なケーススタディ

WordPress PWA: 知っておくべきことすべて

Twitter PWA: そのエキサイティングな機能を発見する

重要ポイント

プログレッシブ Web アプリは多くの革新的な改善を行うことができますが、Youtube PWA は最小限の採用であるため、何ができるかをすべて見ることはできません。オフラインでの使用以外に、ホーム画面のインストールやプッシュ通知などのアプリのような機能をサポートする PWA には、サイトの読み込みを数秒で高速化するなどの機能もあります。

基本的に、PWA には大幅に多くの技術的改善を開発する能力があるため、Google は Youtube に最新の進歩を無制限に搭載することを望んでおり、Youtube PWA を用意しています。変更について話すことはあまりありませんが、全体的なエクスペリエンスはよりスムーズで多様になります.

PWA が Web サイトに対して具体的にできることについて詳しく知りたい場合は、 Tigrenに連絡して無料の相談を受けてください。私たちは一流の PWA 開発エージェンシーの 1 つであり、高収益と透明性の高い価格戦略を約束するプレミアム PWA 開発と無料サポートを提供するためにここにいます.

その他の PWA ケーススタディ:

AliExpress PWA: プログレッシブ Web アプリでコンバージョン率を高める

Reddit PWA: 主要なソーシャルメディアが Web アプリをどのように利用しているか