Chrome 68 の新機能

  • Android のホーム画面に追加の動作が変更され、より細かな制御が可能になりました。
  • Page Lifecycle API は、タブが一時停止または復元されたタイミングを通知します。
  • また、Payment Handler API により、ウェブベースの支払いアプリで支払いリクエストのエクスペリエンスをサポートできます。

他にもいろいろあります。

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

変更内容の完全なリストを確認するには、Chromium ソース リポジトリの変更リストを確認します。

「ホーム画面に追加」の変更点

サイトがホーム画面に追加するための条件を満たしている場合、Chrome に「ホーム画面に追加」バナーは表示されなくなります。ユーザーにプロンプトを表示するタイミングと方法を制御できます。

ユーザーにプロンプトを表示するには、beforeinstallprompt イベントをリッスンし、イベントを保存して、ボタンやその他の UI 要素をアプリに追加して、インストール可能であることを示します。

let installPromptEvent;

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

ユーザーがインストール ボタンをクリックすると、保存された beforeinstallprompt イベントで prompt() が呼び出されると、Chrome に [ホーム画面に追加] ダイアログが表示されます。


btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(handleInstall);
});

サイトを更新する時間を確保するために、ホーム画面への追加条件を満たすサイトにユーザーが初めてアクセスすると、Chrome ではミニ情報バーが表示されます。ミニ情報バーは、一度閉じるとしばらく表示されません。

ホーム画面に追加する動作の変更では、使用可能なコードサンプルなど、すべての詳細を紹介しています。

ページ ライフサイクル API

ユーザーが多数のタブを実行している場合、メモリ、CPU、バッテリー、ネットワークなどの重要なリソースがオーバーサブスクライブされ、ユーザー エクスペリエンスが低下する可能性があります。

サイトがバックグラウンドで実行されている場合は、リソースを節約するためにサイトを一時停止することがあります。新しい Page Lifecycle API を使用すると、こうしたイベントをリッスンして、応答できるようになりました。

たとえば、ユーザーがしばらくバックグラウンドでタブを操作していた場合、リソースを節約するために、ブラウザはそのページでのスクリプトの実行を一時停止できます。その前に freeze イベントがトリガーされるため、開いている IndexedDB またはネットワーク接続を閉じたり、未保存のビューの状態を保存したりできます。その後、ユーザーがタブに再度フォーカスすると、resume イベントが発生します。これにより、破棄されたものを再初期化できます。

const prepareForFreeze = () => {
  // Close any open IndexedDB connections.
  // Release any web locks.
  // Stop timers or polling.
};
const reInitializeApp = () => {
  // Restore IndexedDB connections.
  // Re-acquire any needed web locks.
  // Restart timers or polling.
};
document.addEventListener('freeze', prepareForFreeze);
document.addEventListener('resume', reInitializeApp);

コードサンプルやヒントなど、多くの詳細情報については、Phil の Page Lifecycle API の投稿をご覧ください。GitHub でspec説明ドキュメントを確認できます。

Payment Handler API

Payment Request API は、標準ベースのオープンな方法で、支払いを受け付けます。Payment Handler API は、ウェブベースの支払いアプリが支払いリクエストのエクスペリエンスで直接支払いを行えるようにすることで、支払いリクエストの対象範囲を拡大します。

販売者は、supportedMethods プロパティにエントリを追加するのと同じくらい簡単に既存のウェブベースの支払いアプリを追加できます。

const request = new PaymentRequest([{
  // Your custom payment method identifier comes here
  supportedMethods: 'https://bobpay.xyz/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

指定されたお支払い方法を処理できる Service Worker がインストールされている場合は、その Service Worker が支払いリクエスト UI に表示され、ユーザーはその方法で支払いを行うことができます。

Eiji は、これを販売者サイトと支払いハンドラ向けに実装する方法を紹介した優れた投稿をしています。

など多数

もちろん、これらはデベロッパーにとっての Chrome 68 の変更のごく一部であり、他にも多くの機能があります。

DevTools の新機能

Chrome 68 の DevTools の新機能については、Chrome DevTools の新機能をご確認ください。

チャンネル登録

次に、YouTube の YouTube チャンネルの [チャンネル登録] ボタンをクリックすると、新しい動画が公開されるたびにメール通知が届きます。

Chrome 69 のリリース時に Chrome の新機能をお知らせします