Gestione delle finestre

Una PWA al di fuori del browser gestisce la propria finestra. Scopri le API e le funzionalità per la gestione di una finestra all'interno del sistema operativo.

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

• La possibilità di spostare e ridimensionare la finestra nei sistemi operativi con più finestre, come Windows o ChromeOS.
• Condivisione dello schermo con altre finestre di app, come nella modalità di suddivisione di iPadOS o nella modalità schermo diviso di Android.
• Viene visualizzato nelle sezioni App recenti, nelle barre delle app e nel menu Alt+Tab su computer e negli elenchi delle finestre multi-task sui dispositivi mobili.
• La possibilità di ridurre a icona la finestra, spostarla tra schermi e computer 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 per computer. Per impostazione predefinita, quando l'utente apre la PWA per la prima volta dopo l'installazione, la PWA ottiene una dimensione della finestra predefinita pari a una percentuale dello schermo 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. La volta successiva che l'utente apre l'app, la finestra manterrà le dimensioni e la posizione dell'utilizzo precedente.

Non è possibile definire le dimensioni e la posizione preferite della tua PWA all'interno del file manifest. Puoi riposizionare e ridimensionare la finestra solo utilizzando l'API JavaScript. Dal codice, puoi spostare e ridimensionare la finestra della tua 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 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 lo spostamento della finestra, quindi puoi eseguire query sulla posizione di frequente.

Anziché spostare e ridimensionare la finestra in modo assoluto, puoi spostarla e ridimensionarla in modo relativo utilizzando moveBy() e resizeBy().

Sfogliare altri siti

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

Quando visiti un URL che non rientra nell'ambito del manifest, il motore del browser della tua PWA esegue il rendering di un browser in-app nel contesto della finestra.

Ecco alcune funzionalità dei browser in-app:

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

Quando il browser in-app è sullo schermo, la PWA è in attesa in background, come se fosse coperta da un'altra finestra.

Flussi di autorizzazione

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

In questi casi, il browser in-app segue questa 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 tua 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 memorizza e lo esegue.

Forzare la navigazione di 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 opzione funziona solo su PWA per computer. Sui dispositivi mobili non è possibile aprire un browser con un URL.

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

Aprire nuove finestre

Sul computer, gli utenti possono aprire più di una finestra della stessa PWA. Ogni finestra ha una navigazione diversa per 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. Dal codice della tua PWA, puoi aprire una nuova finestra con la funzione open().

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

Quando chiami open() in una finestra PWA su iOS o iPadOS, viene restituito null e non viene aperta 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 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 in una PWA, hai a disposizione tutto lo spazio della 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 route.

Modalità a schede

La modalità a schede è una funzionalità sperimentale che consente alla tua PWA di avere un design basato su schede, simile a un browser web. In questo caso, l'utente può aprire più schede nella stessa PWA, ma tutte collegate nella stessa finestra del sistema operativo.

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

Overlay dei controlli della finestra

Abbiamo accennato al fatto che puoi modificare il titolo della finestra definendo il valore dell'elemento <title> o della proprietà document.title. ma è sempre un valore di stringa. E se potessimo progettare la barra del titolo con HTML, CSS e immagini? L'overlay dei controlli della finestra, una funzionalità sperimentale in Microsoft Edge e Google Chrome per le PWA per computer, potrebbe essere utile.

Per scoprire di più su questa funzionalità, consulta 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 a più finestre, come Gimp, possono posizionare vari 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.

Visualizzare i dettagli della schermata

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

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 i relativi attributi cambiano.

// 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 sposta la finestra della tua PWA da una schermata all'altra, viene attivato anche un evento currentscreenchange dall'oggetto screen_details.

Blocco attivazione schermo

Immagina. Sei in cucina e stai seguendo 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.

Con l'API VirtualKeyboard, la tua PWA può avere un maggiore controllo sulla tastiera su piattaforme compatibili utilizzando l'interfaccia navigator.virtualKeyboard.

• Mostra e nascondi la tastiera virtuale con navigator.virtualKeyboard.show() e navigator.virtualKeyboard.hide().
• Comunica al browser che stai chiudendo la tastiera virtuale impostando navigator.virtualKeyboard.overlaysContent su true.
• Scopri quando la tastiera viene visualizzata e nascosta con l'evento geometrychange.
• Imposta il criterio della tastiera virtuale per la modifica degli elementi host impostando contenteditable su auto o manual, con l'attributo HTML virtualkeyboardpolicy. Un criterio ti consente di decidere se la tastiera virtuale deve essere gestita automaticamente dal browser (auto) o dallo script (manual).
• Utilizza le variabili di ambiente CSS per ottenere informazioni sull'aspetto della tastiera virtuale, ad esempio keyboard-inset-height e keyboard-inset-top.

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