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

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 には本当に期待しています。これにより、ユーザーはこれまで不可能だった現実世界のハードウェアとのやり取りが可能になります。

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

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 向けに PWA を Google Play ストアで公開している場合は、Digital Goods API オリジントライアルに登録できます。

クレジット

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

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

WebHID、WebNFC、Web Serial

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

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

その他

関連情報

登録

クレジット

Chrome 89 の新機能