Chrome 89 の新機能

Pete LePage

Chrome 89 は現在、安定版にロールアウトされています。

次の説明をお読みください。

WebHID、WebNFC、Web Serial がオリジントライアルを卒業し、安定版で利用できるようになりました。
一部の開発者が PWA のインストール可能チェックを回避するために使用していた抜け穴を塞ぎます。
Web Share と Web Share Target がパソコンに導入されます。
他にも多くの機能があります。

Pete LePage です。自宅で仕事と撮影をしています。Chrome 89 でデベロッパー向けに新しく追加された機能を見ていきましょう。

WebHID、WebNFC、Web Serial

WebHID、WebNFC、Web Serial には本当に期待しています。これにより、ユーザーは現実世界のハードウェアとやり取りするという、これまで不可能だった新しいシナリオを実現できます。

これにより、メーカーは、専用スピーカーの専用電話ボタンを使用するために、楽しい、ユニークなハードウェアやビデオ会議アプリに接続できます。または、その他のさまざまなユースケース。

Web Serial と約 60 行のコードを使用して、@AndreBan は Raspberry Pi Pico の MicroPython REPL とやり取りできるページを作成しました。Web Serial は、Espruino のウェブベースの IDE でも使用されています。

CDS 2019 で、Francois は Web NFC を使用して楽しいメモリースタイルのゲームを作成しました。右側のカードを正しい順序でタップする必要がありました。

StreamDeck と Daft Punk Drum Pad

@bramus は WebHID を使用して StreamDeck に接続し、Daft Punk のドラムパッドを構築しました。StreamDeck をお持ちでない場合は、YouTube で彼のデモ動画をご覧になり、GitHub のコードをご確認ください。

サイトがハードウェアとやり取りする場合でも、ハードウェアが多くのサイトとやり取りする場合でも、ユーザーは特別なドライバやソフトウェアをインストールする必要がないため、メリットがあります。

接続できるデバイスの詳細については、web.dev/devices をご覧ください。また、WebHID、WebNFC、Web Serial のスタートガイドもご覧ください。

PWA のインストール可能性の基準の変更

オフラインサポートは、当初からインストール可能なプログレッシブウェブアプリの要件の重要な部分でした。他のインストール済みアプリと同様に、ユーザーは信頼性の高い動作を期待しています。高速で、オフラインの恐竜が表示されないようにする必要があります。

今年後半には、オフラインエクスペリエンスなしで一部のサイトがインストール可能性の基準を満たせる抜け穴を塞ぐ予定です。PWA にオフラインエクスペリエンスがすでに実装されている場合は、この条件は満たされています。特に対応は必要ありませんが、まだ追加していない場合は、この機会に追加することをおすすめします。

Chrome 89 以降では、オフライン時に PWA が有効なレスポンスを返さない場合、DevTools の [問題] タブに警告が表示され、Lighthouse に問題があることが示されます。違反措置は、今年後半の Chrome 93 で開始されます。

コンソールに警告メッセージが表示された DevTools。 — Chrome DevTools Console の警告メッセージ。

DevTools の [アプリケーション] タブに警告メッセージが表示されている。 — [アプリケーション] タブ > [マニフェスト] > [インストール可能性] の警告メッセージ。

どのようなオフラインエクスペリエンスを提供するかを決定できます。できるだけ多くの経験を共有することが理想です。ただし、少なくともオフラインフォールバックページのようなシンプルなものでも構いません。

この変更の詳細と理由については、プログレッシブウェブアプリのオフラインサポートの検出を改善をご覧ください。

どこから始めればよいかわからない場合は、Workbox をご覧ください。PWA の本番環境対応のサービスワーカーを強化できるライブラリのセットがあります。または、シンプルなオフラインフォールバックページの場合は、記事のオフラインフォールバックページを作成するに、必要なコードがすべて記載されています。このコードをコピーしてサイトに直接貼り付けることができます。

パソコン版の Web Share と Web Share Target

サイトでユーザーがファイルを作成、編集、操作できる場合は、Web Share API と Web Share Target API を使用する必要があります。これらの API はモバイルではしばらく前から利用可能でしたが、ChromeOS と Windows でもサポートされるようになりました。

Web Share を使用すると、ユーザーはデバイスにインストールされている他のアプリにファイルやデータを送信できます。たとえば、Google フォトから Twitter に写真を共有できます。

async function share(title, text, url) {
  try {
    await navigator.share({title, text, url});
    return true;
  } catch (ex) {
    console.error('Share failed', ex);
    return false;
  }
}

他のアプリがファイルやデータを共有できるようにターゲットとして登録するには、Web Share Target API を使用します。

"share_target": {
  "action": "/?share-target",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"],
      },
    ],
  },
},

スタートガイドについては、Web Share API を使用して OS 共有 UI と統合すると Web Share Target API を使用して共有データを受け取るをご覧ください。

その他

もちろん、他にもさまざまな機能があります。

Chrome で、JavaScript モジュール内のトップレベルの await が許可されるようになりました。

ユーザーの混乱を減らすため、インストール可能な PWA のアドレスバーに表示されるアイコンを更新しました。

また、Trusted Web Activity を使用して ChromeOS 向け Play ストアで PWA を利用できるようにしている場合は、Digital Goods API オリジントライアルに登録できます。

Chrome 89 の新機能 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

WebHID、WebNFC、Web Serial

PWA のインストール可能性の基準の変更

パソコン版の Web Share と Web Share Target

その他

関連情報

登録

Chrome 89 の新機能