Collegare PWA e IWA con le estensioni di Chrome

Demián Renzulli

In qualità di sviluppatore web, la best practice è progettare le applicazioni utilizzando il modello di sicurezza con il livello di attendibilità più basso possibile, ad esempio un'app web progressiva (PWA). Questo approccio massimizza la copertura, riduce al minimo il sovraccarico di sicurezza da gestire e offre la massima flessibilità sia per gli sviluppatori che per gli utenti. Tuttavia, poiché il web è progettato per essere sicuro per impostazione predefinita, il suo modello di sicurezza conservativo limita naturalmente l'accesso al sistema operativo e a determinate API del dispositivo potenti.

Le app web isolate (IWA) risolvono questo problema fornendo un modello di applicazione isolato, in bundle, con controllo delle versioni, firmato e altamente affidabile basato sulla piattaforma web. Tuttavia, prima di passare a un'IWA, vale la pena considerare un passaggio più graduale: collegare la PWA a un'estensione Chrome. Disponibile negli ambienti ChromeOS gestiti, come sessioni utente gestite, sessioni Ospite gestite (MGS) o modalità kiosk, questa tecnica consente alla tua app di utilizzare API di estensione di livello inferiore tramite il passaggio sicuro di messaggi. Il seguente diagramma illustra questo approccio progressivo: a partire da un'applicazione web standard, aggiungendo le funzionalità per diventare un'app web progressiva installabile ed esplorando infine il percorso dell'app web progressiva e dell'estensione di Chrome per sbloccare API aggiuntive.

Se la tua applicazione richiede funzionalità avanzate che rimangono non disponibili anche con le API delle estensioni di Chrome, ad esempio Controlled Frame o l'API Direct Sockets, la migrazione a un'app web isolata (IWA) è la soluzione migliore. Tuttavia, mentre le app web installabili sbloccano nuove potenti funzionalità web, potresti comunque aver bisogno di API specifiche a livello di dispositivo esclusive delle estensioni di Chrome, ad esempio chrome.runtime.restart() per riavviare un dispositivo ChromeOS in modalità Kiosk. Fortunatamente, puoi connettere un'app web installabile a un'estensione Chrome utilizzando lo stesso approccio di una PWA. Questa tecnica è illustrata nei passaggi seguenti.

Implementazione passo passo

Eseguire il deployment dell'estensione Companion

Le estensioni vengono implementate tramite la Console di amministrazione Chrome. A seconda dell'ambiente di destinazione, configura questa impostazione nella sezione corrispondente (ad esempio, vai a Dispositivi > Chrome > App ed estensioni > Kiosk per la modalità Kiosk o alle schede corrispondenti per Utenti e browser o Sessioni Ospite gestite). Puoi eseguire l'hosting autonomo dell'estensione a un link accessibile pubblicamente o ospitarla direttamente nel Chrome Web Store. Per istruzioni più dettagliate sulla gestione delle estensioni, consulta la documentazione ufficiale.

Implementare il passaggio di messaggi

Configurazione dell'estensione

Per ricevere e rispondere ai messaggi dalla tua app web, esponi uno script di background che rimane in ascolto dell'arrivo dei messaggi dal client (la tua app web) e poi inoltra queste richieste a una chiamata API corrispondente. Nell'esempio seguente, una richiesta viene inviata tramite proxy per riavviare il dispositivo ChromeOS quando l'app web invia un oggetto messaggio personalizzato che contiene un methodName di callRestart.

Background.js

// message handler - extension code
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
  if (request.methodName == 'callRestart') {
    chrome.runtime.restart();
  }
});

Il manifest dell'estensione può essere configurato per consentire chiamate di funzioni esterne all'estensione utilizzando la chiave externally_connectable⁠⁠, che specifica a quali siti ed estensioni è consentito chiamare metodi nell'estensione. Ulteriori informazioni sulle estensioni di Chrome e su Manifest V3 sono disponibili nella documentazione ufficiale⁠⁠.

Se ti connetti da una PWA (Progressive Web App), elencherai il dominio HTTPS standard in cui è ospitata la tua app nell'array delle corrispondenze. Ecco un esempio di manifest configurato per una PWA in esecuzione in modalità Kiosk:

Manifest.json

{
  "manifest_version": 3,
  "name": "Restart your kiosk app",
  "version": "1.0",
  "description": "This restarts your ChromeOS device.",
  "background": {
    "service_worker": "background.js"
  },
  "externally_connectable": {
    "accepts_tls_channel_id": false,
    "matches": [
      "*://developer.chrome.com/*"
    ]
  }
}

Se ti connetti da un'app web isolata (IWA), il meccanismo è esattamente lo stesso, ma lo schema dell'URL cambia. Poiché le IWA sono pacchettizzate in modo sicuro e non vengono eseguite su server web standard, utilizzano un proprio protocollo. Devi aggiungere l'origine dell'IWA utilizzando lo schema isolated-app://.

Manifest.json

{
  "manifest_version": 3,
  "name": "IWA Companion Extension",
  "version": "1.1",
  "description": "Companion extension for the IWA",
  "background": {
    "service_worker": "/scripts/background.js"
  },
  "externally_connectable": {
    "matches": [
      "isolated-app://*/*"
    ]
  }
}

Si tratta della quantità minima di codice richiesta in un'estensione per ascoltare i messaggi di una PWA o di un'IWA.

Configurazione di PWA e IWA

Per chiamare l'estensione da un'app web, devi conoscere il suo ID estensione statico. Questo ID è disponibile nella pagina chrome://extensions, visualizzata quando installi l'estensione di Chrome, o nel Chrome Web Store dopo il caricamento dell'estensione. In questo modo, la tua app web può specificare l'estensione esatta con cui comunicare. Dopodiché, chiama chrome.runtime.sendMessage⁠⁠ e trasmetti l'ID interno con un messaggio da inviare all'interno.

const STATIC_EXTENSION_ID = 'abcdefghijklmnopqrstuvwxyz';
// found from chrome extensions page of chrome web store.
const callExtensionAPI = function (method) {
  chrome.runtime.sendMessage(STATIC_EXTENSION_ID, {
    methodName: method,
  });
};
callExtensionAPI('callRestart');

Per saperne di più su come connettere le app web alle estensioni per il passaggio dei messaggi, consulta la documentazione sulle estensioni⁠⁠.

Demo

Per vedere questa implementazione in azione, esplora il repository IWA Kitchen Sink. Questo progetto funge da playground completo per varie funzionalità delle IWA, con demo per API ad alta affidabilità come Direct Sockets e Controlled Frame. Fornisce inoltre un esempio completo e funzionante della connessione IWA-to-Chrome-Extension. Il repository include un'estensione complementare di esempio e un'interfaccia web dedicata che mostra come utilizzare il passaggio di messaggi sicuro per attivare metodi esclusivi dell'estensione. Ad esempio, puoi testare il recupero delle informazioni del profilo dell'utente con l'API chrome.identity.getProfileUserInfo() direttamente dall'app web isolata.

Conclusione

Il collegamento delle tue applicazioni web a un'estensione Chrome offre un percorso sicuro e progressivo per sbloccare funzionalità del dispositivo simili a quelle native. Quando progetti l'architettura della tua app, tieni presente questi punti chiave:

1. Inizia con il web:scegli una PWA per ottenere la massima copertura e il minimo overhead di sicurezza.
2. Colma il divario con le estensioni:per funzionalità integrate a livello di sistema operativo (come il riavvio del dispositivo in modalità Kiosk), esegui il deployment di un'estensione Chrome complementare e connettila alla tua applicazione utilizzando il passaggio di messaggi sicuro.
3. Esegui l'upgrade alle IWA solo se necessario:utilizza le app web isolate quando hai bisogno di API ad alta affidabilità come Direct Sockets, Controlled Frame o qualsiasi altra API solo per IWA.