Che cos'è il 'navigatore' nelle app Web progressive?

In che modo il 'navigatore' consente di migliorare progressivamente le tue app web

Che cos'è il "navigatore" nelle app web?

Se supportato, l'oggetto "finestra" globale nell'applicazione Web fornisce l'accesso all'oggetto "navigatore". Il "navigatore" contiene potenzialmente molte informazioni sull'app e può darti accesso a determinati eventi a cui iscriverti. Ti aiuta a scrivere app web veramente moderne che possono sembrare quasi native.

Un'istanza del "navigatore" è direttamente collegata all'agente utente, che è l'applicazione che esegue la tua app Web: il browser.

Come il "navigatore" può migliorare progressivamente la tua app

"Miglioramento progressivo" significa che il "navigatore" offre un certo insieme di funzionalità basate sul browser che ospita l'app. Ad esempio, Chrome di Google ha sempre implementato la maggior parte delle funzionalità, anche quelle instabili, poiché Google spinge costantemente i confini delle app Web progressive.

Come vedrai in tutti gli esempi nella documentazione di MDN, devi assicurarti che la variabile o la funzione a cui vuoi accedere sia effettivamente disponibile sul "navigatore".

// Just a simple example of how
// to check for availability 
// of features.


function checkNetwork(){
  if("connection" in navigator){
    // Now it's safe to use 'navigator.connection'.
    // 👉 https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection
  }
  
  // Alternative if you're using:
  // 'navigator?.connection'
}

Alcune informazioni che il "navigatore" ti consente di consumare nella tua app:

  • numero di core della CPU
  • informazioni dettagliate sulla rete
  • stato della batteria del dispositivo che esegue la tua app, ad esempio il tablet o lo smartphone
  • lettura e tracciamento della geolocalizzazione attuale
  • utilizzando il menu nativo dell'host per condividere i contenuti
  • controllo della sessione multimediale

Puoi effettivamente vedere alcune di queste funzionalità dal vivo e in azione su questa stessa PWA. Scorri verso il basso fino alla fine di qualsiasi pagina, dove puoi vedere alcune delle implementazioni delle metriche hardware disponibili, ad esempio il numero di core della CPU.

Lavorare con il "navigatore"

Questo articolo mira solo a darti una breve introduzione alle possibilità offerte dal "navigatore" per le app web progressive. MDN ha un'ottima pagina panoramica e documentazione su ciascuna delle funzionalità disponibili.

Per Chrome di Google, c'è anche "Project Fugu", che implementa nuove funzionalità sperimentali, disponibili solo dietro un flag di funzionalità sui browser Chromium.