Gestione delle finestre

Una PWA esterna al browser gestisce la propria finestra. In questo capitolo comprenderai le API e le funzionalità per la gestione di una finestra nel sistema operativo.

La finestra della PWA

L'esecuzione in una finestra autonoma, gestita dalla tua PWA, comporta tutti i vantaggi e le responsabilità di qualsiasi finestra del sistema operativo, ad esempio:

• Possibilità di ridimensionare e spostare la finestra nei sistemi operativi multi-finestra come Windows o ChromeOS.
• Condivisione dello schermo con altre finestre di app, come nella modalità divisa di iPadOS o nella modalità schermo diviso di Android.
• Presente nei dock, nelle barre delle applicazioni e nel menu della scheda alternativa sui computer e negli elenchi di finestre multitasking sui dispositivi mobili.
• La possibilità di ridurre a icona, spostare la finestra tra gli schermi e i desktop e chiuderla in qualsiasi momento.

Spostare e ridimensionare la finestra

La finestra della PWA può essere di qualsiasi dimensione e posizionata in un punto qualsiasi dello schermo sui sistemi operativi desktop. Per impostazione predefinita, quando l'utente apre la PWA per la prima volta dopo l'installazione, la PWA riceve una dimensione della finestra predefinita corrispondente a una percentuale della schermata corrente, con una risoluzione massima di 1920 x 1080 posizionata nell'angolo in alto a sinistra dello schermo.

L'utente può spostare e ridimensionare la finestra e il browser memorizzerà l'ultima preferenza, quindi la prossima volta che l'utente aprirà l'app, la finestra manterrà le dimensioni e la posizione dell'utilizzo precedente.

Non è possibile definire le dimensioni e la posizione preferite della PWA all'interno del file manifest. Puoi riposizionare e ridimensionare la finestra solo utilizzando l'API JavaScript. Dal codice, puoi spostare e ridimensionare la tua finestra PWA utilizzando le funzioni moveTo(x, y) e resizeTo(x, y) dell'oggetto window.

Ad esempio, puoi ridimensionare e spostare la finestra della PWA quando questa viene caricata utilizzando:

document.addEventListener("DOMContentLoaded", event => {
   // we can move only if we are not in a browser's tab
   isBrowser = matchMedia("(display-mode: browser)").matches;
   if (!isBrowser) {
      window.moveTo(16, 16);
      window.resizeTo(800, 600);
   }
});

Puoi eseguire query sulle dimensioni e sulla posizione attuali dello schermo utilizzando l'oggetto window.screen; puoi rilevare quando la finestra viene ridimensionata utilizzando l'evento resize dell'oggetto window. Non esiste un evento per acquisire il movimento della finestra, quindi puoi eseguire query sulla posizione di frequente.

Nota: invece di spostare e ridimensionare la finestra in modo assoluto, puoi spostarla in modo relativo e ridimensionarla utilizzando moveBy() e resizeBy().

Nota: sui dispositivi mobili, lo spostamento o il ridimensionamento della finestra non comporta alcuna modifica sullo schermo.

Navigazione su altri siti

Se vuoi indirizzare l'utente a un sito esterno non incluso nell'ambito della tua PWA, puoi farlo con un elemento HTML <a href> standard, utilizzando location.href o aprendo una nuova finestra su piattaforme compatibili.

Attualmente su tutti i browser, se la PWA è installata, quando accedi a un URL che non rientra nell'ambito del file manifest, il motore del browser della PWA mostrerà un browser in-app nel contesto della finestra.

Ecco alcune funzionalità dei browser in-app:

• Vengono visualizzati sopra i contenuti.
• Hanno una barra degli URL statica che mostra l'origine corrente, il titolo della finestra e un menu. In genere sono tematici con l'elemento theme_color del tuo manifest.
• Dal menu contestuale, puoi aprire l'URL nel browser.
• Gli utenti possono chiudere il browser o tornare indietro.

Nota: mentre il browser in-app è sullo schermo, la PWA è in attesa in background, come se fosse oscurata da un'altra finestra.

Su iOS e iPadOS, il browser in-app utilizza SafariViewController, un motore di rendering di Safari isolato dallo spazio di archiviazione della PWA. Di conseguenza, se l'utente ha una sessione in Safari, questa non verrà visualizzata nella PWA, ma all'interno di un browser in-app nella PWA.

Flussi di autorizzazione

Molti flussi di autenticazione e autorizzazione web richiedono il reindirizzamento dell'utente a un URL diverso in un'origine diversa per acquisire un token che tornerà all'origine della tua PWA, ad esempio utilizzando OAuth 2.0.

In questi casi, il browser in-app segue la seguente procedura:

1. L'utente apre la tua PWA e fa clic su Accedi.
2. La tua PWA reindirizza l'utente a un URL non incluso nell'ambito della PWA in modo che il motore di rendering apra un browser in-app all'interno della PWA.
3. L'utente può annullare il browser in-app e tornare alla PWA in qualsiasi momento.
4. L'utente accede al browser in-app. Il server di autenticazione reindirizza l'utente all'origine della tua PWA, inviando il token come argomento.
5. Il browser in-app si chiude quando rileva un URL che fa parte dell'ambito della PWA.
6. Il motore reindirizza la navigazione nella finestra principale della PWA all'URL a cui è stato indirizzato il server di autenticazione mentre si trovava nel browser in-app.
7. La PWA riceve il token, lo archivia ed esegue il rendering della PWA.

Forzare la navigazione in un browser

Se vuoi aprire forzatamente il browser con un URL e non con un browser in-app, puoi utilizzare il target _blank degli elementi <a href>. Questa operazione funziona solo sulle PWA desktop; sui dispositivi mobili non è possibile aprire un browser con un URL.

function openBrowser(url) {
    window.open("url", "_blank", "");
}

Apertura di nuove finestre

Sul computer, gli utenti possono aprire più di una finestra della stessa PWA. Ogni finestra sarà una navigazione diversa verso lo stesso start_url, come se avessi aperto due schede del browser dello stesso URL. Dal menu della PWA, gli utenti possono selezionare File e poi Nuova finestra, mentre dal codice della PWA puoi aprire una nuova finestra con la funzione open(). Per informazioni dettagliate, consulta la documentazione.

function openNewWindow() {
    window.open("/", "new-window", "width=600,height=600");
}

La chiamata a open() all'interno di una finestra PWA su iOS o iPadOS restituisce null e non apre una finestra. L'apertura di nuove finestre su Android crea un nuovo browser in-app per l'URL, anche se l'URL rientra nell'ambito della tua PWA, che in genere non attiva un'esperienza di navigazione esterna.

Attenzione: il secondo argomento di open() è il nome della finestra. Se il nome che hai utilizzato è già aperto, il motore sostituirà la finestra aperta con quel nome con una nuova navigazione. Se vuoi sempre aprire una nuova finestra, devi utilizzare valori di stringa diversi per un nome.

Le funzioni open(), moveTo() e resizeTo() non richiedono il prefisso window. quando scrivi JavaScript perché window è l'oggetto globale. Puoi chiamare moveTo(0, 0). Tuttavia, la chiamata a window.moveTo(0, 0) rende il codice più facile da comprendere.

Titolo della finestra

L'elemento <title> veniva utilizzato principalmente a fini SEO, in quanto lo spazio all'interno di una scheda del browser è limitato. Quando passi dal browser alla finestra di una PWA, hai a disposizione tutto lo spazio nella barra del titolo.

Puoi definire i contenuti della barra del titolo:

• In modo statico nell'elemento HTML <title>.
• Modificare dinamicamente la proprietà stringa document.title in qualsiasi momento.

Sulle PWA per computer, il titolo è essenziale e viene utilizzato nella barra del titolo della finestra e, a volte, in Task Manager o nella selezione multi-task. Se hai un'applicazione a pagina singola, ti consigliamo di aggiornare il titolo su ogni percorso.

Nota: per ridurre il phishing all'interno delle PWA, alcuni browser desktop potrebbero avere misure aggiuntive nel titolo della finestra. Ad esempio, se non utilizzi il nome dell'app nel titolo, il browser potrebbe aggiungere un prefisso con il nome della tua PWA. Altri browser potrebbero visualizzare l'origine corrente nella barra del titolo per alcuni secondi quando modifichi il titolo per evidenziare la pagina visitata dall'utente.

Modalità a schede

Una funzionalità sperimentale, nota come modalità a schede, consente alla tua PWA di avere un design basato su schede simile a quello di un browser web. In questo caso, l'utente può avere aperte più schede dalla stessa PWA, ma tutte collegate nella stessa finestra del sistema operativo, come puoi vedere nel seguente video:

Per scoprire di più su questa funzionalità sperimentale, consulta la pagina Modalità di applicazione a schede per le PWA.

Nota: nel capitolo Sperimentale, scoprirai come iniziare a utilizzare le funzionalità sperimentali.

Overlay controlli finestra

Come accennato in precedenza, puoi modificare il titolo della finestra definendo il valore dell'elemento <title> o della proprietà document.title. Tuttavia, è sempre un valore stringa. E se potessimo progettare la barra del titolo come preferiamo, con HTML, CSS e immagini? È qui che entra in gioco l'Overlay dei controlli della finestra, una nuova funzionalità sperimentale in Microsoft Edge e Google Chrome per le PWA desktop.

Nota: le funzionalità di overlay dei controlli delle finestre e della modalità a schede definiscono nuovi valori per il membro display del manifest. Per creare compatibilità con tutti i dispositivi, il gruppo manifest ha creato un modo per sostituire la catena display di riserva, in modo da poter specificare il valore display da utilizzare se la prima opzione non è disponibile. Scopri di più nella pagina Prepararsi alle modalità di visualizzazione del futuro.

Per saperne di più su questa funzionalità, consulta l'articolo Personalizzare l'overlay dei controlli delle finestre della barra del titolo della PWA.

Gestione delle finestre

Con più schermi, gli utenti vorranno utilizzare tutto lo spazio a loro disposizione. Ad esempio:

• Gli editor di grafica multi-finestra con Gimp possono inserire diversi strumenti di modifica in finestre posizionate con precisione.
• Le sale di negoziazione virtuali possono mostrare le tendenze del mercato in più finestre, ognuna delle quali può essere visualizzata in modalità a schermo intero.
• Le app di presentazione possono mostrare le note del relatore sullo schermo principale interno e la presentazione su un proiettore esterno.

L'API Window Management consente alle PWA di fare proprio questo e altro ancora.

Recupero dei dettagli della schermata in corso...

L'API Window Management aggiunge un nuovo metodo, window.getScreenDetails(), che restituisce un oggetto con le schermate come un array immutabile di schermate collegate. Esiste anche un oggetto attivo accessibile da ScreenDetails.currentScreen, corrispondente all'attuale window.screen.

In alcuni browser, l'utente deve concedere l'autorizzazione per le tue PWA quando chiami window.getScreenDetails().

L'oggetto restituito attiva anche un evento screenschange quando l'array screens cambia. Ciò non accade quando vengono modificati gli attributi delle singole schermate. Anche le singole schermate, window.screen o una schermata nell'array screens, attivano un evento change quando cambiano i relativi attributi.

// Request an object with a screen objects
const screenDetails = await window.getScreenDetails();
screenDetails.screens[0].isPrimary;  // e.g. true
screenDetails.screens[0].isInternal;  // e.g. true
screenDetails.screens[0].label;  // e.g. 'Samsung Electric Company 28"'

// Access the live object corresponding to the current `window.screen`.
// The object is updated on cross-screen window placements or device changes.
screenDetails.currentScreen;
screenDetails.addEventListener('screenschange', function() {
 // NOTE: Does not fire on changes to attributes of individual screens.
  const screenCount = screenDetails.screens.length;
  const currentScreen screenDetails.currentScreen.id;
});

Se l'utente o il sistema operativo spostano la finestra della PWA da uno schermo all'altro, viene attivato anche un evento currentscreenchange dall'oggetto dettagli schermata.

Nota: ti consigliamo anche di selezionare l'API Presentazione per visualizzare i contenuti web tramite dispositivi di presentazione di grandi dimensioni, come proiettori e televisori connessi alla rete.

Supporto dei browser

• 47
• 79
• x
• x

Origine

Blocco attivazione schermo

Immagina di essere in cucina a seguire una ricetta sul tablet. Hai appena finito di preparare gli ingredienti. Le tue mani sono sporche e torni al dispositivo per leggere il passaggio successivo. Che disastro! Lo schermo è diventato nero. L'API Screen Wake Lock è a tua disposizione e consente a una PWA di impedire lo spegnimento, la sospensione o il blocco degli schermi, consentendo agli utenti di interrompere, avviare, uscire e tornare senza preoccupazioni.

// Request a screen wake lock
const wakeLock = await navigator.wakeLock.request();

// Listen for wake lock release
wakeLock.addEventListener('release', () => {
 console.log(`Screen Wake Lock released: ${wakeLock.released}`);
});
// Manually release the wake lock
wakeLock.release();

Tastiera virtuale

I dispositivi touch, come smartphone e tablet, offrono una tastiera virtuale sullo schermo in modo che l'utente possa digitare quando gli elementi del modulo della tua PWA sono attivi.

Grazie all'API VirtualKeyboard, la tua PWA ora può avere un maggiore controllo della tastiera sulle piattaforme compatibili utilizzando l'interfaccia navigator.virtualKeyboard, tra cui:

• Visualizzazione e occultamento della tastiera virtuale con le funzioni navigator.virtualKeyboard.show() e navigator.virtualKeyboard.hide().
• Comunica al browser che ti occuperai di chiudere la tastiera virtuale impostando navigator.virtualKeyboard.overlaysContent su true.
• Sapere quando la tastiera viene visualizzata e nascosta con l'evento geometrychange di navigator.virtualKeyboard.
• Impostazione del criterio della tastiera virtuale per la modifica degli elementi host (utilizzando contenteditable) con l'attributo HTML virtualkeyboardpolicy. Un criterio ti consente di decidere se vuoi che la tastiera virtuale venga gestita automaticamente dal browser usando il valore auto oppure dallo script usando il valore manual.
• Utilizzo delle variabili di ambiente CSS per ottenere informazioni sull'aspetto della tastiera virtuale, ad esempio keyboard-inset-height e keyboard-inset-top.

Puoi scoprire di più su questa API in Controllo completo con l'API VirtualKeyboard.

Risorse

• Gestire più display con l'API Window Management
• MDN: API Window Management
• Modalità di applicazione a schede per le PWA
• Resta attivo con l'API Screen Wake Lock
• Controllo completo con l'API VirtualKeyboard
• Personalizzare l'overlay dei controlli delle finestre della barra del titolo della PWA
• Mostrare i contenuti nella barra del titolo