Nowości w Chrome 68

Pete LePage

I wiele innych.

Mam na imię Pete LePage. Sprawdź, co nowego w Chrome 68 dla deweloperów.

Chcesz zobaczyć pełną listę zmian? Zapoznaj się z listą zmian w repozytorium źródłowym Chromium.

Zmiany w funkcji 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 z opcją dodania do ekranu głównego. Zamiast tego masz kontrolę nad tym, kiedy i w jaki sposób użytkownik może go poprosić.

Aby poprosić użytkownika, nasłuchuj zdarzenia beforeinstallprompt, a następnie zapisz je i dodaj do aplikacji przycisk lub inny element interfejsu, który wskazuje, ż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 funkcję prompt() w zapisanym zdarzeniu beforeinstallprompt. Chrome wyświetli okno dodawania aplikacji 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, przy pierwszej wizycie użytkownika na stronie spełniającej kryteria dodawania do ekranu głównego Chrome wyświetli minipasek informacyjny. Po zamknięciu minipasek informacji nie będzie przez jakiś czas wyświetlany ponownie.

Zmiany w funkcji dodawania na ekranie głównym zawierają pełne informacje, w tym przykłady kodu, z których możesz korzystać.

Interfejs Page Lifecycle API

Gdy użytkownik ma otwartą dużą liczbę kart, może to spowodować nadmierne wykorzystanie kluczowych zasobów, takich jak pamięć, procesor, bateria i sieć, co może pogorszyć komfort korzystania z aplikacji.

Jeśli witryna działa w tle, system może ją zawiesić, aby oszczędzać zasoby. Dzięki nowemu interfejsowi Page Lifecycle API możesz teraz wykrywać te zdarzenia i na nie odpowiadać.

Jeśli na przykład użytkownik przez jakiś czas miał kartę w tle, przeglądarka może zawiesić wykonywanie skryptu na tej stronie, aby oszczędzać zasoby. Zanim to zrobi, wywoła zdarzenie freeze, które umożliwia zamknięcie otwartych połączeń IndexedDB lub sieciowych albo zapisanie niezapisanego stanu widoku. Następnie, gdy użytkownik zmieni ostrość karty, wywoływane jest zdarzenie resume, które umożliwia ponowne zainicjowanie wszystkiego, co zostało zniszczone.

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

Aby dowiedzieć się więcej, w tym zobaczyć przykłady kodu i poznać wskazówki, przeczytaj wpis Phila na temat interfejsu Page Lifecycle API. Specyfikację i dokument znajdziesz na GitHubie.

Interfejs Payment Handler API

Interfejs Payment Request API to otwarty sposób na przyjmowanie płatności oparty na standardach. Interfejs Payment Handler API zwiększa zasięg interfejsu Payment Request, umożliwiając aplikacjom do płatności internetowych obsługę płatności bezpośrednio w ramach interfejsu Payment Request.

Jako sprzedawca możesz dodać istniejącą internetową aplikację do płatności, dodając 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 serwis worker, który może obsługiwać określoną formę płatności, pojawi się on w interfejsie żądania płatności, a użytkownik będzie mógł z niego skorzystać.

Ewa opublikowała świetnego posta, w którym pokazuje, jak wdrożyć tę funkcję na stronach sprzedawców i w przypadku modułów obsługi płatności.

I inne funkcje

To tylko kilka zmian, które wprowadziliśmy w Chrome 68, ale 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, aby dowiedzieć się, co nowego w wersji 68.

Subskrybuj

Następnie kliknij przycisk Subskrybuj na naszym kanale w YouTube. Otrzymasz e-maila z powiadomieniem, gdy opublikujemy nowy film.

Mam na imię Pete LePage i gdy tylko Chrome 69 zostanie opublikowany, od razu opowiem, co nowego w Chrome.