Nowości w Chrome 68

Pete LePage

A to nie wszystko – to tylko część.

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

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

Dodawanie 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 jak wyświetlać użytkownikowi prośbę.

Aby wyświetlić użytkownikowi odpowiedni komunikat, nasłuchuj zdarzenia beforeinstallprompt, a następnie zapisz to zdarzenie i dodaj do aplikacji przycisk lub inny element interfejsu, aby wskazać, że aplikacja może zostać zainstalowana.

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, Chrome wyświetla minipasek informacji, gdy użytkownik po raz pierwszy odwiedza witrynę, która spełnia kryteria dodawania do ekranu głównego. 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ę otwartą 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 pozwoli Ci zamknąć otwarte połączenia IndexedDB lub sieciowe albo zapisać niezapisane stany widoku. Gdy użytkownik ponownie skupi się na karcie, zostanie wywołane zdarzenie resume, w którym możesz ponownie zainicjować wszystko, 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);

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 API modułu do obsługi płatności

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ć.

Eiji napisał świetny post, w którym pokazuje, jak wdrożyć tę funkcję w witrynach sprzedawców i modułach obsługi płatności.

I inne funkcje

To tylko kilka z wielu zmian w Chrome 68 dla deweloperów.

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 za każdym razem, gdy opublikujemy nowy film.

Nazywam się Pete LePage i zaraz po wydaniu Chrome 69 opowiem Ci, co nowego w Chrome.