Como conectar uma extensão de um PWA de quiosque

Os apps do Chrome serão descontinuados após o Chrome 102 para Windows, Linux e MacOS. No ChromeOS, os apps do Chrome vão ter suporte até pelo menos janeiro de 2025, mas recomendamos migrar para apps da Web, já que os apps do Chrome serão descontinuados. Antes, os apps do Chrome tinham funcionalidades extras disponíveis no modo quiosque que não são compatíveis apenas com apps da Web. Você pode continuar usando parte dessa funcionalidade implantando uma extensão complementar com o aplicativo da Web do quiosque.

Como as extensões são implantadas?

As extensões são implantadas pelo Admin Console do Chrome na tela de configuração do quiosque (Devices > Chrome > Apps & Extensions > Kiosks). Elas podem ser auto-hospedadas em um link acessível publicamente ou hospedadas na Chrome Web Store. Para mais informações sobre como gerenciar extensões em uma empresa ou instituição de ensino, consulte este documento.

Como posso chamar APIs de extensão do meu web app?

Como é possível implantar extensões complementares com seu web app de quiosque, você pode aproveitar os recursos da extensão chamando APIs de extensão para fazer coisas como receber informações úteis sobre o dispositivo e a plataforma de hardware ou gerenciar recursos de acessibilidade do Chrome.

Se você for usar APIs somente para quiosques, será necessário ativá-las no manifesto. Em seguida, implemente a transmissão de mensagens entre o app da Web de quiosque e a extensão complementar para que eles possam se comunicar.

Ativar APIs de extensão somente para quiosques

Algumas APIs de extensão estão disponíveis apenas no modo quiosque. Para que sua extensão chame essas APIs exclusivas para quiosques, adicione o campo "kiosk_enabled" ao manifesto e defina como true:

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

Implementar a transmissão de mensagens

Configuração da extensão

Para receber e responder a mensagens do seu web app, é necessário expor um script em segundo plano que fique aguardando a chegada de mensagens do cliente (seu web app) e, em seguida, encaminhe essas solicitações para uma chamada de API correspondente. No exemplo a seguir, uma solicitação é encaminhada por proxy para reiniciar o dispositivo ChromeOS quando o app da Web envia um objeto de mensagem personalizada que contém um methodName de callRestart.

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

O manifesto da extensão pode ser configurado para permitir chamadas de função externas à extensão usando a chave externally_connectable, que especifica quais sites e extensões podem chamar métodos na extensão. Para mais informações sobre extensões do Chrome e o Manifest V3, consulte a documentação oficial.

{
    "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/" ]
      }
 }

Configuração do app da Web

Para chamar a extensão de um app da Web, é necessário saber o ID estático dela. Esse ID pode ser encontrado na página chrome://extensions, mostrada quando você instala a extensão do Chrome, ou na Chrome Web Store depois que a extensão é enviada. Isso permite que o web app especifique a extensão exata com que quer se comunicar. Depois disso, chame chrome.runtime.sendMessage e transmita o ID da extensão com uma mensagem que você quer enviar para ela.

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');

Para mais informações sobre como conectar páginas da Web a extensões para transmissão de mensagens, consulte esta documentação.

Observação:as extensões e os web apps não podem se comunicar arbitrariamente entre si. A extensão só vai tentar ouvir mensagens de domínios listados na seção externally_connectable do manifesto. Da mesma forma, um app da Web precisa saber o ID estático da extensão com que quer se comunicar.