Verbind PWA's en IWA's met Chrome-extensies.

Demián Renzulli

Als webontwikkelaar is het raadzaam om je applicaties te ontwerpen met het laagst mogelijke beveiligingsmodel, zoals een Progressive Web App (PWA). Deze aanpak maximaliseert je bereik, minimaliseert de beveiligingslast en biedt de grootste flexibiliteit voor zowel ontwikkelaars als gebruikers. Omdat het web echter standaard is ontworpen om veilig te zijn, beperkt het conservatieve beveiligingsmodel vanzelfsprekend de toegang tot het besturingssysteem en bepaalde krachtige API's van apparaten.

Geïsoleerde webapps (IWA's) lossen dit op door een geïsoleerd, gebundeld, versiebeheerd, ondertekend en zeer betrouwbaar applicatiemodel te bieden dat bovenop het webplatform is gebouwd. Voordat u echter de overstap naar een IWA maakt, is het de moeite waard om een ​​meer geleidelijke stap te overwegen: uw PWA koppelen aan een Chrome-extensie. Deze techniek, beschikbaar in beheerde ChromeOS-omgevingen – zoals beheerde gebruikerssessies, beheerde gastsessies (MGS) of kioskmodus – stelt uw app in staat om API's van extensies op een lager niveau te gebruiken via beveiligde berichtuitwisseling. Het volgende diagram illustreert deze stapsgewijze aanpak: beginnend met een standaard webapplicatie, het toevoegen van de mogelijkheden om een ​​installeerbare PWA te worden, en ten slotte het verkennen van het PWA- en Chrome-extensiepad om extra API's te ontsluiten.

Als uw applicatie geavanceerde mogelijkheden vereist die zelfs met Chrome Extension API's niet beschikbaar zijn, zoals Controlled Frame of de Direct Sockets API , dan is migreren naar een Isolated Web App (IWA) de beste oplossing. Hoewel IWA's krachtige nieuwe webfuncties ontsluiten, heeft u mogelijk nog steeds specifieke API's op apparaatniveau nodig die exclusief zijn voor Chrome Extensions, zoals chrome.runtime.restart() voor het herstarten van een ChromeOS-apparaat in kioskmodus. Gelukkig kunt u een IWA op dezelfde manier aan een Chrome Extension koppelen als een PWA. Deze techniek wordt in de volgende stappen beschreven.

Stapsgewijze implementatie

De bijbehorende extensie implementeren

Extensies worden geïmplementeerd via de Chrome-beheerconsole. Afhankelijk van uw doelomgeving configureert u dit in de betreffende sectie (bijvoorbeeld via Apparaten > Chrome > Apps en extensies > Kiosken voor de kioskmodus, of de respectievelijke tabbladen voor Gebruikers en browsers of Beheerde gastsessies ). U kunt de extensie zelf hosten via een openbaar toegankelijke link of rechtstreeks in de Chrome Web Store. Raadpleeg de officiële documentatie voor meer gedetailleerde instructies over het beheren van extensies.

Implementeer berichtoverdracht

Uitbreiding instellen

Om berichten van uw webapp te ontvangen en te beantwoorden, kunt u een achtergrondscript beschikbaar stellen dat luistert naar berichten die van de client (uw webapp) binnenkomen en deze verzoeken vervolgens doorstuurt naar een overeenkomstige API-aanroep. In het volgende voorbeeld wordt een verzoek doorgestuurd om het ChromeOS-apparaat opnieuw op te starten wanneer de webapp een aangepast berichtobject verzendt met een methodName van callRestart .

Achtergrond.js

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

Het manifest voor de extensie kan zo worden geconfigureerd dat externe functieaanroepen naar de extensie zijn toegestaan ​​met behulp van de sleutel externally_connectable⁠⁠ , die aangeeft welke sites en extensies methoden in de extensie mogen aanroepen. Meer informatie over Chrome-extensies en manifest v3 is te vinden in de officiële documentatie .

Als u verbinding maakt vanuit een Progressive Web App (PWA), moet u het standaard HTTPS-domein waar uw app wordt gehost, vermelden in de array 'matches'. Hier is een voorbeeld van een manifest dat is geconfigureerd voor een PWA die in kioskmodus draait:

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

Als u verbinding maakt vanuit een Isolated Web App (IWA), is het mechanisme exact hetzelfde, maar het URL-schema verandert. Omdat IWA's veilig verpakt zijn en niet op standaard webservers draaien, gebruiken ze hun eigen protocol. U moet de oorsprong van de IWA toevoegen met behulp van het isolated-app:// schema.

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

Dit is de minimale hoeveelheid code die nodig is in een extensie om berichten van een PWA of IWA te ontvangen.

PWA- en IWA-configuratie

Om de extensie vanuit een webapplicatie aan te roepen, moet je de statische extensie-ID kennen. Deze ID vind je op de pagina chrome://extensions , die wordt weergegeven tijdens de installatie van je Chrome-extensie, of in de Chrome Web Store nadat de extensie is geüpload. Hiermee kan je webapplicatie de exacte extensie specificeren waarmee gecommuniceerd moet worden. Roep vervolgens chrome.runtime.sendMessage aan en geef de extensie-ID mee, samen met het bericht dat naar de extensie moet worden verzonden.

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

Voor meer informatie over het verbinden van webapps met extensies voor het doorgeven van berichten, raadpleeg de documentatie over extensies .

Demo

Om deze implementatie in actie te zien, kunt u de IWA Kitchen Sink-repository verkennen. Dit project dient als een uitgebreide testomgeving voor diverse IWA-functionaliteiten, met demo's voor API's met een hoge mate van vertrouwen, zoals Direct Sockets en Controlled Frame. Het biedt ook een volledig, werkend voorbeeld van de verbinding tussen IWA en een Chrome-extensie. De repository bevat een voorbeeld-extensie en een speciale webinterface die laat zien hoe u beveiligde berichtoverdracht kunt gebruiken om extensie-exclusieve methoden te activeren. U kunt bijvoorbeeld rechtstreeks vanuit de Isolated Web App testen hoe u de profielinformatie van de gebruiker ophaalt met de API chrome.identity.getProfileUserInfo() .

Conclusie

Door uw webapplicaties te koppelen aan een Chrome-extensie kunt u op een veilige en vooruitstrevende manier toegang krijgen tot native apparaatfunctionaliteiten. Houd bij het ontwerpen van de architectuur van uw app rekening met de volgende belangrijke punten:

1. Begin met het web: kies standaard voor een PWA voor het grootste bereik en de laagste beveiligingskosten.
2. Overbrug de kloof met extensies: voor diep geïntegreerde functies op besturingssysteemniveau (zoals het opnieuw opstarten van het apparaat in kioskmodus) implementeer je een bijbehorende Chrome-extensie en verbind je deze met je applicatie via beveiligde berichtuitwisseling.
3. Upgrade alleen naar IWA's als dat nodig is: gebruik Isolated Web Apps wanneer u API's met een hoge mate van vertrouwen nodig hebt, zoals Direct Sockets, Controlled Frame of een van de andere API's die alleen beschikbaar zijn voor IWA's.