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

Chrome 80 の新機能

Pete LePage

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

サポートされている機能は次のとおりです。

ワーカー内のモジュール
JavaScript のオプションチェーン
新しい送信元のトライアル
オリジントライアルを卒業した機能
など、その他にもさまざまな機能があります。

Pete LePage と申します。Chrome 80 のデベロッパー向けの新機能について、詳しく説明します。

モジュールワーカー

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

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

JavaScript モジュールに移行すると、ワーカーの実行をブロックすることなく、遅延読み込みコードに動的インポートを使用することもできます。詳細については、web.dev の Jason の投稿「モジュールワーカーによるウェブのスレッド処理」をご覧ください。

オプションチェーン

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

// 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 または未定義を返した場合、エラーをスローするのではなく、全体が未定義を返します。

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

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

オリジントライアルの移行

3 つの新しい機能が Origin Trial から安定版に移行し、トークンなしで任意のサイトで使用できるようになりました。

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

まず、定期的なバックグラウンド同期があります。これは、バックグラウンドでデータを定期的に同期し、ユーザーがインストール済みの PWA を開いたときに常に最新のデータが提供されるようにします。

連絡先選択ツール

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

ユーザーは、必要なものだけを必要なときに共有でき、友だちや家族と簡単につながることができます。

インストールされている関連アプリを取得する

最後に、Get Installed Related Apps メソッドを使用すると、ウェブアプリでネイティブアプリがユーザーのデバイスにインストールされているかどうかを確認できます。

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

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

Content Indexing API

PWA にキャッシュに保存したコンテンツをユーザーに知らせるにはどうすればよいですか？検出に問題があります。ユーザーはアプリを開く方法を知っているのか？どのようなコンテンツを利用できますか？

Content Indexing 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',
  }],
});

インデックスに何かを追加するには、サービスワーカーの登録を取得し、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 を呼び出します。通知オプションで、TimestampTrigger を使用して showTrigger プロパティを追加します。指定した時刻になると、ブラウザに通知が表示されます。

オリジントライアルは 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 の新機能

モジュール ワーカー

オプション チェーン

オリジン トライアルの移行