Nowości w Chrome 68

A jest to wiele innych!

Nazywam się Pete LePage. Przyjrzyjmy się, co nowego dla deweloperów w Chrome 68.

Chcesz zobaczyć pełną listę zmian? Sprawdź listę zmian repozytorium źródłowego Chromium.

Zmiany opcji Dodaj do ekranu głównego

Jeśli Twoja witryna spełnia kryteria dodawania do ekranu głównego, Chrome nie będzie już wyświetlać banera dodawania do ekranu głównego. To Ty decydujesz, kiedy i w jaki sposób wysłać do nich prośbę.

Aby wysłać prośbę do użytkownika, nasłuchuj zdarzenia beforeinstallprompt, a następnie zapisz zdarzenie i dodaj do aplikacji przycisk lub inny element interfejsu wskazujący, że można je zainstalować.

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

Gdy użytkownik kliknie przycisk instalacji, wywołaj prompt() w zapisanym zdarzeniu beforeinstallprompt, a Chrome wyświetli okno dodawania do ekranu głównego.


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

Aby dać Ci czas na zaktualizowanie witryny, Chrome po pierwszym otwarciu przez użytkownika witryny spełniającej kryteria „Dodaj do ekranu głównego” wyświetla minipasek informacyjny. Po zamknięciu minipasek informacyjny przez jakiś czas nie będzie się już wyświetlał.

Strona Zmiany w działaniu funkcji dodawania do ekranu głównego zawiera szczegółowe informacje, w tym przykłady kodu, których możesz użyć, itp.

Interfejs API cyklu życia strony

Gdy użytkownik używa dużej liczby aktywnych kart, subskrypcje o znaczeniu krytycznym, takie jak pamięć, procesor, bateria i sieć, mogą być nadmiarowe, co negatywnie wpływa na wrażenia użytkownika.

Jeśli witryna działa w tle, system może ją zawiesić, by zaoszczędzić zasoby. Nowy interfejs Page Lifecycle API pozwala na nasłuchiwanie zdarzeń i reagowanie na nie.

Jeśli na przykład karta użytkownika działała w tle od jakiegoś czasu, przeglądarka może zawiesić wykonywanie skryptu na tej stronie, aby oszczędzać zasoby. Zanim to zrobisz, uruchomi zdarzenie freeze, co pozwoli Ci zamknąć otwarte połączenia IndexedDB lub sieciowe oraz zapisać niezapisany stan widoku. Gdy użytkownik zmieni ustawienie karty, wywoływane jest zdarzenie resume, które umożliwia ponowne zainicjowanie wszystkiego, co zostało usunięte.

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

W poście Phila na temat Page Lifecycle API znajdziesz wiele szczegółów, w tym przykłady kodu, wskazówki i inne informacje. spec i dokument z wyjaśnieniem znajdziesz na GitHubie,

Interfejs API do obsługi płatności

Payment Request API to otwarty, oparty na standardach sposób akceptowania płatności. Interfejs Payment Handler API rozszerza zasięg żądania płatności, umożliwiając internetowe aplikacje płatnicze, które ułatwiają dokonywanie płatności bezpośrednio w ramach żądania płatności.

Jako sprzedawca możesz łatwo dodać istniejącą internetową aplikację płatniczą – wystarczy dodać wpis do właściwości 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' }
  }
});

Jeśli zainstalowany jest skrypt service worker, który może obsłużyć określoną formę płatności, będzie on wyświetlany w interfejsie żądania płatności, a użytkownik może za jego pomocą zapłacić.

Eiji udostępnia świetny post, w którym pokazuje, jak to zrobić w witrynach sprzedawców i modułach do obsługi płatności.

…i wiele innych.

To tylko niektóre ze zmian w Chrome 68 dla deweloperów, oczywiście jest ich znacznie więcej.

Nowości w Narzędziach deweloperskich

Zapoznaj się z artykułem Nowości w Narzędziach deweloperskich w Chrome, by poznać nowości wprowadzone w tych narzędziach w Chrome 68.

Zasubskrybuj

Potem kliknij przycisk subskrypcji na naszym kanale w YouTube, a za każdym razem, gdy opublikujemy nowy film, otrzymasz e-maila z powiadomieniem.

Nazywam się Pete LePage i jak tylko pojawi się Chrome 69, zajmę się tym, co nowego w Chrome.