Chrome 89 の新機能

Pete LePage

Chrome 89 が安定版としてリリースされます。

必知事項は次のとおりです。

私は Pete LePage で、自宅で撮影をしています。では Chrome 89 のデベロッパー向け新機能を見ていきましょう。

WebHID、WebNFC、ウェブシリアル

WebHID、WebNFC、ウェブシリアルには現実世界のハードウェアを操作することで、これまで不可能だった新しいシナリオがユーザーに提示されます。

これにより、メーカーは、楽しくてユニークなハードウェアやビデオ会議アプリに接続して、専用スピーカーで専用の電話ボタンを使用できます。その他任意の数のユースケースに対応できます。

@AndreBan は、ウェブシリアルと約 60 行のコードを使用して、Raspberry Pico 上で MicroPython REPL を操作できるページを作成しました。ウェブシリアルは、Espruino のウェブベースの IDE でも使用されています。

CDS 2019 で、フランソワはウェブ NFC を使用してメモリスタイルの楽しいゲームを作成しました。スマートフォンを正しいカードを正しい順番でタップする必要がありました。

StreamDeck + Daft Punk Drum Pad

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

ハードウェアを操作するサイトであれ、多くのサイトと相互作用できるハードウェアであれ、ユーザーは特別なドライバやソフトウェアをインストールする必要がないため、ユーザーにメリットをもたらします。

接続可能なデバイスの詳細については、web.dev/devices をご覧ください。また、WebHID、WebNFC、ウェブシリアルのスタートガイドもご覧ください。

PWA インストールの要件が変更されます

オフライン サポートは、当初からインストール性に関するプログレッシブ ウェブアプリの基準の重要な部分でした。インストール済みの他のアプリと同様に、ユーザーは確実に動作することを期待します。高速で、オフラインの恐竜が表示されることはありません

今年後半には、いくつかのサイトがオフライン エクスペリエンスなしでインストール可能基準を満たすことができる抜け穴を埋める予定です。PWA にすでにオフライン エクスペリエンスが設定されている場合、準備は完了です。お客様の側で必要な対応は特にございませんが、お客様がいらっしゃらない場合は、ご対応ください。

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

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

提供するオフライン エクスペリエンスの種類を決めることができます。可能な限り多くのエクスペリエンスを提供するのが理想的です。ただし、少なくとも、オフライン フォールバック ページと同じくらいシンプルなものにしてください。

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

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

パソコン向けのウェブ共有とウェブ共有のターゲット

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

ウェブ共有を使用すると、ユーザーはデバイスにインストール済みの他のアプリにファイルやデータを送信できます。たとえば、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 用の新しいアドレスバー インストール アイコン

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


また、信頼できるウェブ アクティビティを使用して、ChromeOS 用の Google Play ストアで PWA を利用可能にした場合は、Digital Goods API のオリジン トライアルに登録できます。

関連情報

ここでは、重要なハイライトの一部についてのみ説明します。Chrome 89 で追加される変更点については、以下のリンクをご覧ください。

登録

最新の動画をご覧になりたい場合は、Chrome Developers YouTube チャンネルにご登録ください。新しい動画が公開されるたびに、メール通知が届きます。

Chrome 90 のリリースと同時に Chrome の最新情報をお伝えします

クレジット

Raspberry Pis と Arduino の写真は、Harrison Broadbent on Unsplash によるものです。