Novità di Chrome 68

Pete LePage

E ce n'è 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 relative alla funzionalità Aggiungi alla 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 Installa, chiama prompt() per l'evento beforeinstallprompt salvato, quindi 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 necessario per aggiornare il tuo sito, Chrome mostrerà una mini-infobar 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, risorse critiche come memoria, CPU, batteria e rete possono sottoscrivere un abbonamento in eccesso rispetto alla rete, causando un'esperienza utente negativa.

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, attiverà l'evento freeze, consentendoti di chiudere le connessioni IndexedDB aperte o di rete aperte o di salvare qualsiasi stato di 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 sull'API Page Lifecycle di Phil per molti ulteriori dettagli, tra cui 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

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

Mi chiamo Pete LePage e, non appena verrà rilasciato Chrome 69, ti comunicherò le novità di Chrome.