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

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 の変更のほんの一部です。もちろん、他にも多くの変更があります。

iframe に埋め込まれたコンテンツでは、最上位のブラウジングコンテキストを別のオリジンに移動するにはユーザー操作が必要です。
Chrome 1 以降では、CSS の grab と grabbing の cursor 値が接頭辞付きで、標準の接頭辞なしの値がサポートされるようになりました。最後に
大きな変更点は次のとおりです。Service Worker のアップデートをリクエストするときに HTTP キャッシュが無視されるようになりました。これにより、Chrome は仕様と他のブラウザと整合するようになりました。

DevTools の新機能

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

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

Chrome 69 がリリースされたらすぐにお知らせします