このページは Cloud Translation API によって翻訳されました。

Chrome 89 の新機能

Pete LePage

Chrome 89 の Stable 版へのロールアウトが開始されました。

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

WebHID、WebNFC、Web Serial がオリジントライアルを終了し、安定版で利用可能になりました。
一部のデベロッパーがPWA のインストール可能チェックを回避するために使用していた抜け穴を閉じます。
ウェブ共有とウェブ共有のターゲットがパソコンに登場。
他にもさまざまな機能があります。

Pete LePage と申します。自宅で撮影しながら、Chrome 89 のデベロッパー向け新機能についてお話しします。

WebHID、WebNFC、Web Serial

WebHID、WebNFC、Web Serial には非常に期待しています。ユーザーは、現実世界のハードウェアを操作する、これまでにない新しいシナリオを体験できます。

クリエイターは、楽しい、風変わりなハードウェア、ビデオ会議アプリに接続して、専用のスピーカーの専用のテレフォニーボタンを使用できます。他にもさまざまなユースケースが考えられます。

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

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

Daft Punk ドラムパッド付き StreamDeck

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

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

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

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

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

今年後半には、一部のサイトがオフラインエクスペリエンスなしでインストール可能性の基準を満たすことができるという抜け穴を閉じる予定です。PWA にすでにオフラインエクスペリエンスがある場合は、設定は完了しています。対応は必要ありませんが、まだ設定していない場合は、この機会に追加してください。

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

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

DevTools の [Application] タブに警告メッセージが表示されている。 — [Application] タブ > [Manifest] > [Installability] の警告メッセージ。

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

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

何から始めればよいかわからない場合は、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 のアドレスバーに表示されるアイコンを更新しました。

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

クレジット

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

Chrome 89 の新機能

WebHID、WebNFC、Web Serial

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

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

その他

関連情報

登録

クレジット