Chrome 68 の新機能

Pete LePage

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

他にもさまざまな機能があります。

Pete LePage と申します。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 では、ホーム画面に追加するための条件を満たしているサイトにユーザーが初めてアクセスしたときに、ミニ情報バーが表示されます。ミニ情報バーは、一度消去されるとしばらくの間再度表示されません。

ホーム画面に追加する動作の変更点で、使用できるコードサンプルなど、詳細を確認してください。

Page Lifecycle 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 で確認できます。

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' }
  }
});

指定されたお支払い方法に対応できるサービス ワーカーがインストールされている場合、Payment Request UI に表示され、ユーザーはそのお支払い方法で支払うことができます。

販売者のサイトと支払いハンドラにこれを実装する方法については、エイジの優れた投稿をご覧ください。

その他

これらは、Chrome 68 のデベロッパー向けの変更のほんの一部です。もちろん、他にも多くの変更があります。

DevTools の新機能

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

登録

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

Pete LePage と申します。Chrome 69 がリリースされ次第、Chrome の新機能についてお知らせします。