Gestione delle finestre

Una PWA esterna al browser gestisce la propria finestra. In questo capitolo, comprendere le API e le funzionalità per la gestione di una finestra all'interno un intero sistema operativo.

La finestra PWA

L'esecuzione in una propria finestra e gestita dalla PWA offre 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 in modalità divisa di iPadOS o in 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 PWA può essere di qualsiasi dimensione e posizionata ovunque sullo schermo nei 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 alla successiva apertura dell'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 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 dall'oggetto window. Non esiste un evento per l'acquisizione dello spostamento della finestra, quindi l'opzione è eseguire query sulla posizione frequentemente.

Navigazione verso altri siti

Se vuoi indirizzare l'utente a un sito esterno che non rientra 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 tuoi contenuti.
• Presentano una barra 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.

Flussi di autorizzazione

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

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

1. L'utente apre la PWA e fa clic su Accedi.
2. La PWA reindirizza l'utente a un URL che non rientra 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 alla tua origine 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 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 forzare l'apertura del browser con un URL e non con un browser in-app, puoi utilizzare il target _blank degli elementi <a href>. 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

Su computer, gli utenti possono aprire più di una finestra della stessa PWA. Ogni finestra mostrerà una navigazione diversa per lo stesso start_url, come se aprissi due schede del browser dello stesso URL. Dal menu della PWA, gli utenti possono selezionare File, quindi Nuova finestra e 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 di 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.

Titolo finestra

L'elemento <title> è stato utilizzato principalmente per scopi di SEO perché 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>.
• Modifica dinamica della proprietà della stringa document.title in qualsiasi momento.

Nelle PWA desktop, il titolo è essenziale e viene utilizzato nella barra del titolo della finestra e talvolta in Task Manager o nella selezione multitasking. Se disponi di un'applicazione a pagina singola, ti consigliamo di aggiornare il titolo su ogni percorso.

Modalità a schede

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

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

Overlay controlli finestra

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

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

Gestione delle finestre

Con più schermi, gli utenti vogliono 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.
• I trading desk 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 schermate come array immutabile di schermate collegate. Esiste anche un oggetto attivo accessibile da ScreenDetails.currentScreen, corrispondente al valore window.screen attuale.

L'oggetto restituito attiva anche un evento screenschange quando l'array screens cambia. Questo non si verifica quando gli attributi nelle singole schermate vengono modificati. 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].pointerTypes;  // e.g. ["touch"]
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.

Attivazione schermo

Immaginate di essere in cucina e seguire una ricetta sul tablet. Hai appena finito di preparare gli ingredienti. Hai le mani in disordine e torni indietro al dispositivo per leggere il passaggio successivo. Che disastro! Lo schermo è diventato nero! L'API Screen Wake Lock fa al caso tuo e consente a una PWA di impedire la luminosità, lo stato di 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 basati sul tocco, come smartphone e tablet, offrono una tastiera virtuale sullo schermo in modo che l'utente possa digitare quando sono visualizzati gli elementi del modulo della PWA.

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:

• Mostrare e nascondere la tastiera virtuale con le funzioni navigator.virtualKeyboard.show() e navigator.virtualKeyboard.hide().
• Comunicare al browser che ti stai occupando di chiudere la tastiera virtuale impostando navigator.virtualKeyboard.overlaysContent su un valore pari a true.
• Possibilità di sapere quando la tastiera appare e scompare 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.

Per saperne di più su questa API, consulta Controllo completo con l'API VirtualKeyboard.

Risorse

• Gestione di più schermi con l'API Multi-Screen Window Position
• 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
• Visualizzare i contenuti nella barra del titolo