Connessione di un'estensione da una PWA kiosk

Le app di Chrome verranno ritirate dopo Chrome 102 per Windows, Linux e macOS. Per ChromeOS, le app di Chrome saranno supportate almeno fino a gennaio 2025, ma consigliamo vivamente di eseguire la migrazione alle app web, in quanto è previsto il ritiro delle app di Chrome. In precedenza, le app Chrome avevano funzionalità aggiuntive disponibili in modalità kiosk che al momento non sono supportate dalle sole app web. Puoi continuare a utilizzare alcune di queste funzionalità eseguendo il deployment di un'estensione complementare con l'applicazione web del kiosk.

Come vengono implementate le estensioni?

Le estensioni vengono implementate tramite la Console di amministrazione Chrome nella schermata di configurazione del kiosk (che si trova in Devices > Chrome > Apps & Extensions > Kiosks). Le estensioni possono essere ospitate autonomamente tramite un link accessibile pubblicamente o tramite l'hosting dell'estensione nel Chrome Web Store. Per ulteriori informazioni sulla gestione delle estensioni in un ambiente aziendale o scolastico, consulta questo documento.

Come posso chiamare le API delle estensioni dalla mia app web?

Poiché puoi eseguire il deployment delle estensioni complementari con la tua app web per chiosco, puoi sfruttare le funzionalità delle estensioni chiamando le API delle estensioni per svolgere attività come ottenere informazioni utili sul dispositivo e sulla piattaforma hardware o gestire le funzionalità di accessibilità di Chrome.

Se utilizzerai API solo per kiosk, dovrai abilitarle nel manifest. Quindi implementa il passaggio di messaggi tra l'app web kiosk e l'estensione complementare in modo che possano comunicare tra loro.

Abilitare le API di estensione solo per Kiosk

Esistono alcune API di estensione disponibili solo in modalità Kiosk. Affinché l'estensione possa chiamare queste API solo per i chioschi, devi aggiungere il campo "kiosk_enabled" al manifest e impostarlo su true:

{
    "manifest_version": 3,
    "version": "1.0",
    ...
    "kiosk_enabled": true
 }

Implementare il passaggio di messaggi

Configurazione dell'estensione

Per ricevere e rispondere ai messaggi dalla tua app web, devi esporre uno script di background che ascolti l'arrivo dei messaggi dal client (la tua app web) e poi inoltri 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.

// 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 tramite la chiave externally_connectable, che specifica quali siti ed estensioni sono autorizzati a chiamare metodi nell'estensione. Per ulteriori informazioni sulle estensioni di Chrome e su Manifest V3, consulta la documentazione ufficiale.

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

Configurazione dell'app web

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

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ù sul collegamento delle pagine web alle estensioni per il passaggio dei messaggi, consulta questa documentazione.

Nota:le estensioni e le app web non possono comunicare arbitrariamente tra loro. L'estensione tenterà di ascoltare solo i messaggi provenienti dai domini elencati nella sezione externally_connectable del manifest. Allo stesso modo, un'app web deve conoscere l'ID statico dell'estensione con cui vuole comunicare.