Novità di Chrome 68

Pete LePage

E c'è molto altro.

Sono Pete LePage. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 68.

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

Modifiche all'opzione Aggiungi a schermata Home

Se il tuo sito soddisfa i criteri di aggiunta alla schermata Home, Chrome non mostrerà più il banner Aggiungi alla schermata Home. Hai invece il controllo su quando e come chiedere all'utente di eseguire l'azione.

Per richiedere all'utente di eseguire l'azione, ascolta l'evento beforeinstallprompt, salvalo e aggiungi un pulsante o un altro elemento dell'interfaccia utente all'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 di installazione, viene chiamata la funzione prompt() sull'evento beforeinstallprompt salvato e 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 di aggiunta alla schermata Home. Una volta chiusa, la mini barra informativa non verrà mostrata di nuovo per un po' di tempo.

Modifiche al comportamento di Aggiungi alla schermata Home contiene tutti i dettagli, 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 essere sovrascritte, con conseguente cattiva esperienza utente.

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

Ad esempio, se un utente ha una scheda in background da un po' di tempo, il browser potrebbe scegliere di sospendere l'esecuzione dello script in quella pagina per risparmiare risorse. Prima di farlo, viene attivato l'evento freeze, che ti consente di chiudere le connessioni IndexedDB o di rete aperte o di salvare lo stato della visualizzazione non salvato. Poi, quando l'utente ricentra la scheda, viene attivato l'evento resume, che consente di inizializzare nuovamente gli elementi rimossi.

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

Dai un'occhiata al post di Phil sull'API Page Lifecycle per molti altri dettagli, inclusi esempi di codice, suggerimenti e altro ancora. Puoi trovare la specifica e una documentazione esplicativa 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 web di semplificare i pagamenti direttamente all'interno dell'esperienza di richiesta di pagamento.

In qualità di venditore, 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 della richiesta di pagamento e l'utente potrà pagare con questo metodo.

Eiji ha scritto 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 in Chrome 68 per gli sviluppatori, ma ce ne sono molte altre.

Novità in DevTools

Assicurati di consultare la pagina 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 lanceremo un nuovo video.

Sono Pete LePage e, non appena verrà rilasciato Chrome 69, sarò qui per raccontarti le novità di Chrome.