Una PWA all'esterno del browser gestisce la propria finestra. In questo capitolo scoprirai le API e le funzionalità per gestire una finestra all'interno del sistema operativo.
La finestra PWA
L'esecuzione sulla tua finestra, gestita dalla tua PWA, presenta tutti i vantaggi e le responsabilità di qualsiasi finestra di quel sistema operativo, ad esempio:
- La possibilità di ridimensionare e spostare la finestra sui sistemi operativi multi-finestra, come Windows o ChromeOS.
- Condivisione dello schermo con altre finestre di app, come in modalità iPadOS o schermo diviso di Android.
- Compaiono in dock, barre delle applicazioni, nel menu Alt-Tab su computer e in elenchi di finestre multitasking sui dispositivi mobili.
- Possibilità di ridurre a icona, spostare la finestra tra schermi e desktop e chiuderla in qualsiasi momento.
Spostare e ridimensionare la finestra
La finestra PWA può essere di qualsiasi dimensione e posizionata ovunque sullo schermo dei sistemi operativi desktop. Per impostazione predefinita, quando l'utente apre la PWA per la prima volta dopo l'installazione, la dimensione predefinita sarà 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 memorizza l'ultima preferenza. In questo modo, alla successiva apertura dell'app, la finestra manterrà le dimensioni e la posizione relative all'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 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 correnti dello schermo utilizzando l'oggetto window.screen
; puoi rilevare quando la finestra viene ridimensionata utilizzando l'evento resize
dall'oggetto window
. Non c'è nessun evento per acquisire lo spostamento della finestra, quindi puoi scegliere di eseguire query sulla posizione di frequente.
Navigazione su altri siti
Se vuoi indirizzare l'utente a un sito esterno che non rientra nell'ambito della PWA, puoi farlo con un elemento HTML <a href>
standard, utilizzando location.href
o aprendo una nuova finestra sulle piattaforme compatibili.
Attualmente, su tutti i browser, se la PWA è installata e accedi a un URL che non rientra nell'ambito del tuo manifest, il motore browser della PWA mostrerà un browser in-app nel contesto della finestra.
Alcune funzionalità dei browser in-app sono:
- Vengono visualizzati nella parte superiore dei tuoi contenuti.
- Hanno una barra dell'URL statica che mostra l'origine corrente, il titolo della finestra e un menu. In genere, sono incentrati sul tema
theme_color
del 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 prevedono il reindirizzamento dell'utente a un URL diverso in un'origine diversa per acquisire un token che tornerà all'origine della PWA, ad esempio tramite OAuth 2.0.
In questi casi, il browser in-app segue la procedura seguente:
- L'utente apre la PWA e fa clic per accedere.
- 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.
- L'utente può annullare il browser in-app e tornare alla PWA in qualsiasi momento.
- L'utente accede al browser in-app. Il server di autenticazione reindirizza l'utente all'origine PWA, inviando il token come argomento.
- Il browser in-app si chiude automaticamente quando rileva un URL che fa parte dell'ambito della PWA.
- Il motore reindirizza la navigazione nella finestra PWA principale all'URL a cui è stato eseguito il server di autenticazione durante il browser in-app.
- La PWA riceve il token, lo memorizza 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 usare il target _blank
degli elementi <a href>
. Questo metodo funziona solo nelle 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 presenterà una navigazione diversa nella stessa start_url
, come se aprissi due schede del browser con lo stesso URL.
Dal menu della PWA, gli utenti possono selezionare File e poi Nuova finestra e, dal codice della PWA, aprire una nuova finestra con la funzione open()
. Per ulteriori dettagli, 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 PWA, che in genere non attiva un'esperienza di navigazione esterna.
Titolo finestra
L'elemento <title>
è stato utilizzato principalmente a scopo di SEO perché lo spazio all'interno di una scheda del browser è limitato. Quando passi dal browser alla finestra in una PWA, tutto lo spazio della barra del titolo è a tua disposizione.
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 è fondamentale e viene utilizzato nella barra del titolo della finestra e talvolta nel Task Manager o nella selezione di multitasking. Se hai un'applicazione di una sola pagina, potresti voler 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 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à di applicazione a schede per PWA.
Overlay dei controlli delle finestre
Come accennato in precedenza, è possibile modificare il titolo della finestra definendo il valore dell'elemento <title>
o la proprietà document.title
. Ma è sempre un valore stringa. E se potessimo progettare la barra del titolo come vogliamo, 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à, consulta 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 di Gimp possono inserire vari strumenti di editing in finestre posizionate con precisione.
- I virtual trading desk possono mostrare le tendenze del mercato in più finestre, ciascuna delle quali può essere visualizzata in modalità a schermo intero.
- Le app slide possono mostrare le note del relatore nella schermata principale interna e la presentazione su un proiettore esterno.
L'API Window Management consente alle PWA di fare proprio questo e altro ancora.
Recupero dei dettagli dello schermo in corso...
L'API Windows Management aggiunge un nuovo metodo, window.getScreenDetails()
, che restituisce un oggetto con schermate sotto forma di array immutabile di schermate collegate. C'è anche un oggetto attivo accessibile da ScreenDetails.currentScreen
, che corrisponde all'attuale window.screen
.
L'oggetto restituito attiva anche un evento screenschange
quando l'array screens
viene modificato. Ciò 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 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].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 sposta la finestra della PWA da uno schermo a un altro, viene attivato anche un evento currentscreenchange
dall'oggetto Dettagli schermata.
Riattiva schermo
Immagina: sei in cucina e stai seguendo una ricetta sul tablet. Hai appena finito di preparare gli ingredienti. Hai le mani in disordine e torni verso il 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 l'oscuramento, la sospensione o il blocco dello schermo, consentendo agli utenti di fermarsi, avviarsi, 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 su touchscreen, come smartphone e tablet, offrono una tastiera sullo schermo virtuale che consente all'utente di digitare quando sono attivi gli elementi del modulo della PWA.
Grazie all'API VirtualKeyboard, ora la PWA 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()
enavigator.virtualKeyboard.hide()
. - Comunica al browser che ti stai occupando di chiudere personalmente la tastiera virtuale impostando
navigator.virtualKeyboard.overlaysContent
uguale atrue
. - Sapere quando la tastiera appare e scompare con l'evento
geometrychange
dinavigator.virtualKeyboard
. - Impostazione del criterio della tastiera virtuale sulla modifica degli elementi host (utilizzando
contenteditable
) con l'attributo HTMLvirtualkeyboardpolicy
. Un criterio ti consente di decidere se vuoi che la tastiera virtuale venga gestita automaticamente dal browser utilizzando il valoreauto
oppure se gestita dallo script usando il valoremanual
. - Utilizzo delle variabili di ambiente CSS per ottenere informazioni sull'aspetto della tastiera virtuale, ad esempio
keyboard-inset-height
ekeyboard-inset-top
.
Per saperne di più su questa API, consulta la pagina Controllo completo con l'API VirtualKeyboard.
Risorse
- Gestione di più display con l'API Multi-Screen Window Placement
- Modalità applicazione a schede per le PWA
- Resta sveglio 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