Novità di Chrome 68

• Il comportamento Aggiungi alla schermata Home su Android cambierà per offrirti un maggiore controllo.
• L'API Page Lifecycle indica quando la tua scheda è stata sospesa o ripristinata.
• L'API Payment Handler consente alle app di pagamento basate sul web di supportare l'esperienza Richiesta di pagamento.

E c'è molto altro ancora.

Mi chiamo Pete LePage. Analizziamo le novità di Chrome 68 per gli sviluppatori.

Vuoi l'elenco completo delle modifiche? Consulta l'elenco delle modifiche al repository di codice sorgente di Chromium.

Aggiungi modifiche alla schermata Home

Se il tuo sito soddisfa i criteri per l'aggiunta alla schermata Home, Chrome non mostrerà più il banner Aggiungi alla schermata Home. ma sei tu a decidere quando e come presentare la richiesta all'utente.

Per chiedere all'utente di attendere l'evento beforeinstallprompt, salva l'evento e aggiungi un pulsante o un altro elemento UI alla tua app per indicare che può essere installata.

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

Quando l'utente fa clic sul pulsante Installa, chiama prompt() nell'evento beforeinstallprompt salvato. Chrome mostra la finestra di dialogo Aggiungi alla schermata Home.

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

Per darti il tempo di aggiornare il tuo sito, Chrome mostrerà una mini-barra delle informazioni la prima volta che un utente visita un sito che soddisfa i criteri per l'aggiunta alla schermata Home. Se la mini-barra delle informazioni viene ignorata, per un po' di tempo non verrà più mostrata.

Modifiche al comportamento di Aggiungi al comportamento sulla schermata Home contiene i dettagli completi, inclusi esempi di codice che puoi utilizzare e altro ancora.

API Page Lifecycle

Quando un utente ha un numero elevato di schede in esecuzione, le risorse critiche come memoria, CPU, batteria e rete possono sovraccaricare, causando un'esperienza utente negativa.

Se il sito è in esecuzione in background, il sistema potrebbe sospenderlo per risparmiare risorse. Con la nuova API Page Lifecycle, ora puoi ascoltare e rispondere a questi eventi.

Ad esempio, se un utente ha una scheda in background per un po' di tempo, il browser può decidere di sospendere l'esecuzione dello script su quella pagina per risparmiare risorse. Prima di farlo, verrà attivato l'evento freeze, consentendoti di chiudere le connessioni IndexedDB o di rete aperte oppure di salvare lo stato delle visualizzazioni non salvate. Poi, quando l'utente reimposta di nuovo lo stato attivo sulla scheda, viene attivato l'evento resume, in cui puoi reinizializzare qualsiasi elemento rimosso.

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

Consulta il post sull'API Page Lifecycle di Phil per molti dettagli, inclusi esempi di codice, suggerimenti e altro ancora. Puoi trovare la spec e un documento esplicativo su GitHub.

API Payment Handler

L'API Payment Request è un modo aperto e basato su standard per accettare i pagamenti. L'API Payment Handler estende la copertura della Richiesta di pagamento consentendo alle app di pagamento basate sul web di semplificare i pagamenti direttamente nell'esperienza Richiesta di pagamento.

Per i venditori, aggiungere un'app di pagamento basata sul web esistente è facile come aggiungere una voce alla proprietà 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' }
  }
});

Se è installato un service worker in grado di gestire il metodo di pagamento specificato, questo verrà visualizzato nell'interfaccia utente Richiesta di pagamento e l'utente potrà utilizzarlo per pagare.

Eiji ha pubblicato un ottimo post che mostra come implementare questa funzionalità per i siti dei commercianti e per i gestori dei pagamenti.

E tanto altro.

Queste sono solo alcune delle modifiche di Chrome 68 per gli sviluppatori. Ma ce n'è molto altro.

• I contenuti incorporati in un iframe richiede un gesto dell'utente per passare dal contesto di navigazione di primo livello a un'origine diversa.
• A partire da Chrome 1, i valori CSS cursor per grab e grabbing sono stati preceduti da un prefisso, pertanto ora supportiamo i valori standard senza prefisso. Infine.
• E questa è una grande! Ora la cache HTTP viene ignorata quando si richiedono aggiornamenti a un service worker, in modo che Chrome sia allineato alle specifiche e agli altri browser.

Novità in DevTools

Assicurati di dare un'occhiata alle Novità di Chrome DevTools per scoprire le novità di DevTools in Chrome 68.

Iscriviti

Poi, fai clic sul pulsante Iscriviti sul nostro canale YouTube e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Mi chiamo Pete LePage e, non appena uscirà Chrome 69, sarò qui per dirti le novità di Chrome.