Nieuw in Chroom 68

Pete LePage

• Het gedrag van Toevoegen aan startscherm op Android verandert om u meer controle te geven.
• De Page Lifecycle API vertelt u wanneer uw tabblad is opgeschort of hersteld.
• En de Payment Handler API maakt het mogelijk dat webgebaseerde betalingsapps de Payment Request-ervaring ondersteunen.

En er is nog veel meer !

Ik ben Pete LePage . Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 68!

Wilt u de volledige lijst met wijzigingen? Bekijk de Chromium-bronrepositorywijzigingslijst .

Wijzigingen toevoegen aan startscherm

Als uw site voldoet aan de criteria voor toevoegen aan startscherm , geeft Chrome de banner voor toevoegen aan startscherm niet langer weer. In plaats daarvan bepaalt u zelf wanneer en hoe u de gebruiker een vraag stelt.

Om de gebruiker te vragen, luistert u naar de beforeinstallprompt -gebeurtenis, slaat u vervolgens de gebeurtenis op en voegt u een knop of ander UI-element toe aan uw app om aan te geven dat deze kan worden geïnstalleerd.

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

Wanneer de gebruiker op de installatieknop klikt en prompt() aanroept bij de opgeslagen beforeinstallprompt gebeurtenis, toont Chrome vervolgens het dialoogvenster Toevoegen aan startscherm.

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

Om u de tijd te geven uw site bij te werken, toont Chrome een mini-infobalk wanneer een gebruiker voor het eerst een site bezoekt die voldoet aan de criteria voor toevoegen aan het startscherm. Eenmaal gesloten, wordt de mini-infobar een tijdje niet meer weergegeven.

Wijzigingen in Gedrag toevoegen aan startscherm bevatten alle details, inclusief codevoorbeelden die u kunt gebruiken en meer.

Paginalevenscyclus-API

Wanneer een gebruiker een groot aantal tabbladen actief heeft, kunnen kritieke bronnen zoals geheugen, CPU, batterij en het netwerk overtekend worden, wat leidt tot een slechte gebruikerservaring.

Als uw site op de achtergrond actief is, kan het systeem deze onderbreken om bronnen te besparen. Met de nieuwe Page Lifecycle API kunt u nu naar deze gebeurtenissen luisteren en erop reageren.

Als een gebruiker bijvoorbeeld een tijdje een tabblad op de achtergrond heeft gehad, kan de browser ervoor kiezen de uitvoering van het script op die pagina op te schorten om bronnen te besparen. Voordat dit wordt gedaan, wordt de freeze geactiveerd, waardoor u geopende IndexedDB- of netwerkverbindingen kunt sluiten of een niet-opgeslagen weergavestatus kunt opslaan. Wanneer de gebruiker vervolgens het tabblad opnieuw focust, wordt de resume geactiveerd, waar u alles dat is afgebroken opnieuw kunt initialiseren.

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

Bekijk Phil's Page Lifecycle API- post voor veel meer details, inclusief codevoorbeelden, tips en meer. Je kunt de specificaties en een uitlegdocument vinden op GitHub.

Betalingsverwerkings-API

De Payment Request API is een open, op standaarden gebaseerde manier om betalingen te accepteren. De Payment Handler API vergroot het bereik van Payment Request door webgebaseerde betalingsapps in staat te stellen betalingen rechtstreeks binnen de Payment Request-ervaring te faciliteren.

Als verkoper is het toevoegen van een bestaande webgebaseerde betalingsapp net zo eenvoudig als het toevoegen van een item aan de eigenschap 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' }
  }
});

Als er een servicemedewerker is geïnstalleerd die de opgegeven betaalmethode kan afhandelen, wordt deze weergegeven in de gebruikersinterface voor betalingsverzoeken en kan de gebruiker ermee betalen.

Eiji heeft een geweldige post die laat zien hoe je dit kunt implementeren voor verkopersites en voor betalingsverwerkers.

En meer!

Dit zijn slechts enkele van de veranderingen in Chrome 68 voor ontwikkelaars. Er is natuurlijk nog veel meer.

• Voor inhoud die in een iframe is ingebed, is een gebruikersgebaar nodig om door de browsercontext op het hoogste niveau naar een andere oorsprong te navigeren .
• Sinds Chrome 1 zijn de CSS- cursor voor grab en grabbing voorafgegaan. We ondersteunen nu de standaardwaarden zonder voorvoegsel. Eindelijk.
• En - dit is een grote! De HTTP- cache wordt nu genegeerd bij het aanvragen van updates voor een servicemedewerker , waardoor Chrome in lijn komt met de specificaties en andere browsers.

Nieuw in DevTools

Zorg ervoor dat u Nieuw in Chrome DevTools bekijkt, om te zien wat er nieuw is voor DevTools in Chrome 68.

Abonneren

Klik vervolgens op de abonneerknop op ons YouTube-kanaal en je ontvangt een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, en zodra Chrome 69 uitkomt, ben ik hier om je te vertellen: wat er nieuw is in Chrome!