ZDF がオフラインモードとダークモードの動画 PWA を作成した方法

ZDF がオフラインサポート、インストール性、ダークモードなどの最新の機能を備えたプログレッシブウェブアプリ（PWA）をどのように作成したかをご覧ください。

Martin Schierle

Scott Friesen

放送局の ZDF がフロントエンドテクノロジーの再設計を検討していたときそこで、同社のプログレッシブウェブアプリをストリーミングサイト ZDFmediathek。開発機関 Cellular は、 ZDF のプラットフォーム固有の iOS および Android アプリと同等のエクスペリエンスが得られます。「 PWA は、インストール、オフライン動画再生、遷移アニメーション、ダークモードに切り替わります。

Service Worker の追加

PWA の主な機能はオフラインサポートです。ZDF では、手間のかかる作業のほとんどが Workbox: 一連のライブラリ Node モジュールにより、さまざまなキャッシュ戦略を簡単にサポートできます。「 ZDF PWA は TypeScript と React で構築されているため、Workbox ライブラリを使用します。組み込み済みの create-react-app を作成して静的アセットを事前キャッシュできますこれにより、アプリケーションは、オフラインで利用できるコンテンツ（この場合は動画とそのメタデータ）です。

基本的な考え方はとてもシンプルです。動画を取得して、blob として IndexedDB。その後、再生中にオンライン/オフラインイベントをリッスンし、ダウンロードされたバージョンを自動的に選択します。

残念なことに、状況はもう少し複雑になりました。プロジェクトの一つ必要だったのは、何も提供していない公式の ZDF ウェブプレーヤーをオフラインサポートを利用できます。プレーヤーは Content ID を入力として受け取り、ZDF API と通信します。関連する動画が再生されます。

そこで出番となるのが、ウェブの最も強力な機能の一つです。 Service Worker

Service Worker は、プレーヤーによって行われたさまざまなリクエストをインターセプトし、 IndexedDB のデータを返します。これにより透過的にオフラインプレーヤーのコードを 1 行も変更する必要はありません。

オフライン動画はサイズが大きくなる傾向があるため、動画は何本あるかが問題になりますデバイスに保存できることですStorageManager を使用して、 API です。十分なスペースがないことをユーザーに通知します。ダウンロードを開始します。Safari はブラウザのリストに登録されていません実装されているものの、本稿の執筆時点では他のブラウザで割り当てがどのように適用されたかに関する情報。そこでチームは small ユーティリティ: さまざまなデバイスで利用できます今では包括的なすべての記事がまとめられた記事が表示されます。

カスタムインストールプロンプトの追加

ZDF PWA には、カスタムのアプリ内インストールフローが用意されており、ユーザーに次のプロンプトが表示されます。アプリをダウンロードしたいと思ったらすぐにインストール。これはユーザーがインストールの意図を明確に示している場合、インストールを促すのに適したタイミングです。オフラインで使用できます。

インストールを促すカスタム招待。 — オフラインで使用するために動画をダウンロードする際にトリガーされるカスタムインストールプロンプト。

オフラインで使用するために動画をダウンロードする際に、カスタムインストールプロンプトがトリガーされます。 — オフラインで使用するために動画をダウンロードする際にトリガーされるカスタムインストールプロンプト。

オフラインページを作成してダウンロードにアクセス

デバイスがインターネットに接続されていない状態で、ユーザーがオフラインモードで使用できないページがある場合は、代わりに特別なページが以前にダウンロードされたすべての動画がリスト表示されます。オフライン機能の簡単な説明も読み上げられます。

オフラインで視聴できるコンテンツがないことを示すオフラインページ。 — オフラインで視聴できるすべてのコンテンツが表示されているオフラインページ。

アダプティブ機能にフレーム読み込みレートを使用する

優れたユーザーエクスペリエンスを提供するため、ZDF PWA にはわずかな移行が含まれています。ユーザーがスクロールまたは移動したときに発生します低価格のデバイスでは通常、アニメーションは逆効果をもたらし、アプリの動作が遅く感じられ、 60 フレーム/秒で実行しないと応答性が低下しますこれをアプリが requestAnimationFrame() を介して実際のフレームレートを測定する一方で、アプリケーションが特定のしきい値を超えた場合に

const frameRate = new Promise(resolve => {
  let lastTick;
  const samples = [];

  function measure() {
    const tick = Date.now();
    if (lastTick) samples.push(tick - lastTick);
    lastTick = tick;
    if (samples.length < 20) requestAnimationFrame(measure);
    else {
      const avg = samples.reduce((a, b) => a + b) / samples.length;
      const fps = 1000 / avg;
      resolve(fps);
    }
  }
  measure();
});

この測定値がデバイスのおおよその指標にすぎないとしても、負荷ごとに異なりますが、それでもなお、意思決定の鍵を握ります重要な点として、ユースケースによってはその他のアダプティブ読み込みの手法デベロッパーが実装できますこの方法の大きな利点の一つは、すべてのプラットフォームで利用可能です。

ダークモード

最新のモバイルエクスペリエンスで人気のある機能は、ダークモード。特に暗い場所で動画を視聴するユーザーは、UI を暗くする傾向があります。ZDF PWA ユーザーはライトと照明を切り替えられるスイッチを備えているだけでなくダークモードの場合、OS 全体の色設定の変更にも反応します。このようにアプリがセットアップされているデバイスでは、アプリの外観が自動的に変更されます。時間帯にテーマベースを変更するようにスケジュール設定します。

結果

新しいプログレッシブウェブアプリを公開ベータ版として 2020 年 3 月に発表それ以来多くの好意的なフィードバックを受けていますベータ版の段階では、 PWA は独自の一時的なドメインで実行されます。しかし、 PWA は一般公開されておらず、ユーザー数は着実に増加しています。多数そのうちのいくつかは Microsoft Store にあります。これにより、Windows 10 ユーザーは、 PWA を作成し、プラットフォーム固有のアプリと同様にインストールします。

次のステップ

ZDF は引き続き PWA に機能を追加していく予定です。たとえば、パーソナライズ、複数のデバイスやプラットフォームをまたいだ表示、プッシュ通知などです。

ZDF がオフライン モードとダークモードの動画 PWA を作成した方法