Gestione delle finestre

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.

Un browser in-app su una PWA desktop durante la navigazione in un URL che non rientra nell&#39;ambito.

Un browser in-app su un iPhone durante l&#39;esplorazione di un URL che non rientra nell&#39;ambito di una PWA autonoma.

Un browser in-app su Android durante la navigazione in un URL che non rientra nell&#39;ambito di una PWA autonoma.

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:

  1. L'utente apre la PWA e fa clic per accedere.
  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 all'origine PWA, inviando il token come argomento.
  5. Il browser in-app si chiude automaticamente quando rileva un URL che fa parte dell'ambito della PWA.
  6. Il motore reindirizza la navigazione nella finestra PWA principale all'URL a cui è stato eseguito il server di autenticazione durante il browser in-app.
  7. 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 stessa PWA installata con diverse finestre aperte su un sistema operativo desktop.

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.

Con l&#39;overlay dei controlli delle finestre, puoi visualizzare i contenuti nella barra del titolo.

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() e navigator.virtualKeyboard.hide().
  • Comunica al browser che ti stai occupando di chiudere personalmente la tastiera virtuale impostando navigator.virtualKeyboard.overlaysContent uguale a true.
  • Sapere quando la tastiera appare e scompare con l'evento geometrychange di navigator.virtualKeyboard.
  • Impostazione del criterio della tastiera virtuale sulla 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 utilizzando il valore auto oppure se gestita 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 la pagina Controllo completo con l'API VirtualKeyboard.

Risorse