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

Chrome 80 の新機能

Pete LePage

Chrome 80 がリリースされ、デベロッパー向けに多数の新機能が追加されました。

以下がサポートされています。

ワーカー内のモジュール
JavaScript でのオプションのチェーン
新しいオリジントライアル
オリジントライアルから卒業した機能
その他、

ピート・ル・ページです。Chrome 80 のデベロッパー向け新機能を詳しく見ていきましょう。

モジュールワーカー

ウェブワーカー向けの新しいモードである Module Worker を利用できるようになりました。これは、人間工学に基づいた、JavaScript モジュールのパフォーマンス上のメリットです。ワーカーコンストラクタは、<script type="module"> に合わせてスクリプトの読み込みと実行の方法を変更する新しい {type: "module"} オプションを受け入れます。

const worker = new Worker('worker.js', {
  type: 'module'
});

JavaScript モジュールに移行すると、ワーカーの実行をブロックすることなく、コードの遅延読み込みに動的インポートを使用できるようになります。詳しくは、Jason によるモジュールワーカーによるウェブのスレッド化（web.dev）をご覧ください。

オプションのチェーン

オブジェクト内の深くネストされたプロパティを読み取ろうとすると、エラーが発生しやすくなります。特に、何かが評価されない可能性がある場合です。

// Error prone-version, could throw.
const nameLength = db.user.name.length;

続行する前に各値を確認することで、簡単に深くネストされた if ステートメントに変換できます。また、try / catch ブロックが必要になります。

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80 では、オプションチェーンと呼ばれる新しい JavaScript 機能のサポートが追加されています。オプションのチェーンを使用すると、いずれかのプロパティがエラーをスローせず、null または未定義を返すと、すべて un 未定義が返されます。

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

詳しくは、v8 ブログのオプションのチェーンのブログ投稿をご覧ください。

オリジントライアルの卒業

オリジントライアルから安定版に移行した 3 つの新機能により、トークンがなくてもどのサイトでも使用できます。

定期的なバックグラウンド同期

まず、定期的なバックグラウンド同期です。バックグラウンドで定期的にデータが同期されるため、ユーザーがインストールした PWA を開いたときに、常に最新のデータを使用できます。

連絡先選択ツール

次は Contact Picker API です。これは、ユーザーが連絡先リストからエントリを選択し、選択したエントリの限られた詳細情報をウェブサイトと共有できるオンデマンド API です。

ユーザーは希望するときに必要なコンテンツだけを共有できます。また、友だちや家族と連絡を取りやすくなります。

インストール済みの関連アプリを取得する

最後に、インストール済みの関連アプリの取得メソッドを使用すると、ネイティブアプリがユーザーのデバイスにインストールされているかどうかをウェブアプリでチェックできます。

最も一般的なユースケースの 1 つは、ネイティブアプリがインストールされていない場合に、PWA のインストールを促すかどうかを決定することです。あるいは、一方のアプリから一部の機能が提供されているのに、その一部の機能を無効にすることもできます。

新しいオリジントライアル

Content Indexing API

PWA にキャッシュしたコンテンツについて、ユーザーにどのように通知しますか？ここで検出の問題がありますアプリを開いてもらえるか？どのようなコンテンツがあるか

Content Indexing API は新しいオリジントライアルです。この API を使用すると、オフライン対応のコンテンツの URL とメタデータを、ブラウザが管理するローカルインデックスに追加してユーザーに簡単に表示できます。

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

インデックスに何かを追加するには、Service Worker の登録を取得し、index.add を呼び出して、コンテンツに関するメタデータを提供する必要があります。

インデックスにデータが入力されると、Chrome for Android のダウンロードページの専用領域に表示されます。詳しくは、web.dev で Jeff の投稿「Content Indexing API を使用してオフライン対応ページをインデックス登録する」をご覧ください。

通知のトリガー

通知は多くのアプリに欠かせない要素です。ただし、プッシュ通知の信頼性は、接続しているネットワークによって決まります。ほとんどの場合はこれで問題ありませんが、機能しなくなる場合もあります。たとえば、機内モードになっているために重要な予定を通知するリマインダーが届かなかった場合は、予定を逃す可能性があります。

通知トリガーを使用すると、事前に通知のスケジュールを設定できます。これにより、オペレーティングシステムはネットワーク接続がないときや、デバイスがバッテリーセーバーモードの場合でも、適切なタイミングで通知を送信できます。

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

通知をスケジュール設定するには、Service Worker の登録に対して showNotification を呼び出します。通知オプションで、showTrigger プロパティを追加して TimestampTrigger を指定します。指定した時間になると、ブラウザに通知が表示されます。

オリジントライアルは Chrome 83 まで実施される予定です。詳細については、Tom による通知トリガーに関する web.dev の投稿をご覧ください。

その他のオリジントライアル

Chrome 80 以降では、他にも次のようなオリジントライアルが開始されます。

ウェブシリアル
PWA をファイルハンドラとして登録する機能
連絡先選択ツールの新しいプロパティ

オリジントライアルの機能の完全なリストをご覧ください。

その他

他にもまだまだあります。

#:~:text=something を使用して、ページ上のテキストフラグメントに直接リンクできるようになりました。Chrome はスクロールして、そのテキストフラグメントの最初のインスタンスをハイライト表示します。例: https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
デスクトップ PWA で display: minimal-ui を設定すると、インストール済みの PWA のタイトルバーに [戻る] と [再読み込み] ボタンが追加されます。
Chrome で SVG 画像をファビコンとして使用できるようになりました。

Chrome 80 の新機能

モジュール ワーカー