Nieuw in Chroom 68

Pete LePage

• Het gedrag van 'Toevoegen aan startscherm' op Android verandert, zodat u meer controle hebt.
• De Page Lifecycle API laat u weten wanneer uw tabblad is opgeschort of hersteld.
• Dankzij de Payment Handler API kunnen webgebaseerde betaalapps de betalingsverzoekervaring ondersteunen.

En er is nog veel meer !

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

Wilt u de volledige lijst met wijzigingen bekijken? Bekijk de wijzigingenlijst in de Chromium-bronrepository .

Wijzigingen toevoegen aan startscherm

Als uw site voldoet aan de criteria voor 'Toevoegen aan startscherm' , toont Chrome de banner 'Toevoegen aan startscherm' niet meer. U bepaalt zelf wanneer en hoe de gebruiker hierom wordt gevraagd.

Om de gebruiker een prompt te geven, wacht u op de beforeinstallprompt -gebeurtenis. Vervolgens slaat u de gebeurtenis op en voegt u een knop of ander UI-element toe aan uw app om aan te geven dat de app 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, roept u prompt() aan op de opgeslagen beforeinstallprompt gebeurtenis. Chrome toont 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 startscherm. Zodra de mini-infobalk is gesloten, wordt deze enige tijd niet meer weergegeven.

In Wijzigingen in gedrag toevoegen aan startscherm vindt u alle details, inclusief codevoorbeelden die u kunt gebruiken en meer.

API voor paginalevenscyclus

Wanneer een gebruiker een groot aantal tabbladen open heeft staan, kunnen kritieke bronnen zoals geheugen, CPU, batterij en netwerk overbelast raken, wat leidt tot een slechte gebruikerservaring.

Als uw site op de achtergrond draait, kan het systeem deze onderbreken om resources te besparen. Met de nieuwe Page Lifecycle API kunt u nu op deze gebeurtenissen letten en erop reageren.

Als een gebruiker bijvoorbeeld een tabblad een tijdje op de achtergrond heeft staan, kan de browser ervoor kiezen om de uitvoering van het script op die pagina te onderbreken om bronnen te besparen. Voordat dit gebeurt, wordt de freeze -gebeurtenis geactiveerd, zodat u geopende IndexedDB- of netwerkverbindingen kunt sluiten of een niet-opgeslagen weergavestatus kunt opslaan. Wanneer de gebruiker het tabblad vervolgens weer activeert, wordt de resume gebeurtenis geactiveerd, waarmee u alles wat is verwijderd 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 vindt de specificatie en een uitlegdocument op GitHub.

API voor betalingsverwerking

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

Als verkoper kunt u eenvoudig een bestaande webgebaseerde betaalapp toevoegen door een item toe te voegen 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 verwerken, wordt deze weergegeven in de gebruikersinterface van het betalingsverzoek en kan de gebruiker ermee betalen.

Eiji heeft een geweldig bericht waarin hij laat zien hoe je dit kunt implementeren voor webwinkels en betalingsverwerkers.

En nog veel meer!

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

• Content die in een iframe is ingebed, vereist een gebaar van de gebruiker 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 voorafgegaan .
• En - dit is een belangrijke! De HTTP- cache wordt nu genegeerd bij het aanvragen van updates voor een service worker , waardoor Chrome in lijn is met de specificatie en andere browsers.

Nieuw in DevTools

Bekijk vooral Nieuw in Chrome DevTools om te ontdekken wat er nieuw is voor DevTools in Chrome 68.

Abonneren

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

Ik ben Pete LePage en zodra Chrome 69 uitkomt, vertel ik u graag wat er nieuw is in Chrome!