PWAでのメディア再生：スマホロック中に再生を続けるには？

貢献 特徴
1

PWA（ホーム画面に追加）経由でフォーラムにアクセスしている場合、端末がロック画面に移行したりサイトがバックグラウンドになったりすると、音声および動画ファイルが再生されないという問題が発生します。

PWA 経由でのアクセス時に、ロック画面やバックグラウンドでの再生を有効にする方法はありますか？

驚くべきことに、Web ブラウザから直接フォーラムにアクセスした場合は、端末がロックされていても、サイトがバックグラウンドになっても、音声や動画は再生され続けます。問題が発生するのは PWA 経由の場合に限られます。

この現象は iPhone で確認しています。

詳細

ユーザーがスマートフォンを使用している際、端末がロックされた状態やサイトがバックグラウンドにある状態でも、音声やメディアファイルの再生を継続させたいと考えています。

iOS では、ユーザーがモバイル Web からサイトにアクセスする場合、基本的な動作は以下の通りで問題ありません：

  • 音声ファイル（mp3 など）：端末がロック状態でも、サイトがバックグラウンドになっても再生が継続します。これは理想的です。
  • 動画ファイル（mp4 など）：端末がロック状態になったり、サイトがバックグラウンドになったりすると再生が停止します。ただし、ロック画面に現れる再生ボタンを押すことで再開でき、またサイトがバックグラウンドにある場合でも、コントロールセンターを開いて再生ボタンを押せば再開できます。

しかし、PWA 経由でサイトにアクセスした場合は、上記のいずれの機能も動作しません。端末がロックされたりサイトがバックグラウンドになったりすると、すべての再生が停止し、再度再生を開始するオプションも表示されません（端末のロックを解除し、再度サイトを開くまで再生できません）。

「いいね！」 2
2

これはローカルにアップロードされたファイル用ですよね？YouTube の動画のような埋め込みコンテンツではないですよね？

「いいね！」 1
3

実際、ローカルにアップロードされたファイルと埋め込みの両方で同じ動作を確認しています。現在は特に埋め込みに焦点を当てています。

「いいね！」 1
4

さて、YouTube 動画を追加してテストしてみましょう：

「いいね！」 1
5

YouTube の動画は、モバイル Safari と PWA において同様の動作を示しているようです。つまり、バックグラウンド再生やロック画面での再生ができません。これは YouTube 固有の制限によるものかもしれません（例：YouTube Premium に加入していない限りバックグラウンド再生をブロックするなど）。この制限が影響している可能性があります。

以下に他の例を示します：

Vimeo 埋め込み：
https://vimeo.com/175708185

音声ファイルの埋め込み：

iPhone において、私が説明した通り両方とも動作することを確認しました：

  • モバイル Safari 経由でアクセスした場合、両方ともバックグラウンド再生やロック画面での再生が可能です（唯一の違いは、電話がロック状態やバックグラウンド状態に切り替わると動画の再生が停止し、再度再生ボタンを押す必要がある点です）。

  • PWA 経由でアクセスした場合、どちらのメディアもバックグラウンドやロック画面では再生されません。アプリがバックグラウンドに移行したり、電話がロック状態になると、いずれの場合も再生を再開するオプションは表示されません。

「いいね！」 2
6

念のため確認ですが、iOS の挙動についてお話しされているのでしょうか？

「いいね！」 2
7

はい。テストに使えるのは iPhone のみです。Android についてはお答えできません。（これらの埋め込みコンテンツ、動画・音声ともに、Mac の Chrome と Safari、およびデスクトップ版の PWA では問題なくバックグラウンドで再生されます。問題はモバイル端末、具体的には私の場合 iPhone です。）

「いいね！」 2
9

iPhoneのモバイルWebのように、PWA内の動画や音声メディアをバックグラウンドやロック画面でも再生し続ける方法はありませんか？

「いいね！」 1
10

いいえ、iOS は PWAs におけるこの機能に対応していないためです。

「いいね！」 4
11

それは聞いて分かりやすかったです。情報ありがとうございます。

13

これはiOS 15で修正されたと思いますか？何かアップデートはありますか？

14

これはAndroidでは、PWAであってもなくても動作します。

実際、ウェブページに埋め込むと、ロック画面でも動画の音声を再生できますが、YouTubeアプリではこれは機能しません。