Als Webentwickler sollten Sie Ihre Anwendungen am besten mit dem Sicherheitsmodell mit der geringsten Vertrauenswürdigkeit entwerfen, z. B. als Progressive Web-App (PWA). Dieser Ansatz maximiert Ihre Reichweite, minimiert den Sicherheitsaufwand, den Sie verwalten müssen, und bietet sowohl Entwicklern als auch Nutzern die größte Flexibilität. Da das Web jedoch standardmäßig sicher ist, schränkt sein konservatives Sicherheitsmodell den Zugriff auf das Betriebssystem und bestimmte leistungsstarke Geräte-APIs ein.
Isolierte Web-Apps (IWAs) bieten eine Lösung für dieses Problem, indem sie ein isoliertes, gebündeltes, versioniertes, signiertes und hochgradig vertrauenswürdiges Anwendungsmodell auf der Webplattform bereitstellen. Bevor Sie jedoch den Sprung zu einer IWA wagen, sollten Sie einen schrittweisen Ansatz in Betracht ziehen: die Verbindung Ihrer PWA mit einer Chrome-Erweiterung. Diese Technik ist in verwalteten ChromeOS-Umgebungen wie verwalteten Nutzersitzungen, verwalteten Gastsitzungen (Managed Guest Sessions, MGS) oder im Kioskmodus verfügbar und ermöglicht es Ihrer App, über eine sichere Nachrichtenübermittlung Erweiterungs-APIs auf niedrigerer Ebene zu verwenden. Das folgende Diagramm veranschaulicht diesen progressiven Ansatz: Zuerst wird eine Standard-Webanwendung erstellt, dann werden die Funktionen hinzugefügt, die für eine installierbare PWA erforderlich sind, und schließlich werden die PWA- und Chrome-Erweiterungspfade untersucht, um zusätzliche APIs freizuschalten.
Wenn Ihre Anwendung erweiterte Funktionen benötigt, die auch mit Chrome-Erweiterungs-APIs nicht verfügbar sind, z. B. Controlled Frame oder die Direct Sockets API, ist die Migration zu einer isolierten Web-App (Isolated Web App, IWA) die beste Option. Mit IWAs lassen sich zwar leistungsstarke neue Webfunktionen nutzen, aber möglicherweise benötigen Sie weiterhin bestimmte APIs auf Geräteebene, die nur für Chrome-Erweiterungen verfügbar sind, z. B. chrome.runtime.restart() zum Neustarten eines ChromeOS-Geräts im Kioskmodus.
Glücklicherweise können Sie eine IWA auf genau dieselbe Weise mit einer Chrome-Erweiterung verbinden wie eine PWA. Diese Technik wird in den folgenden Schritten beschrieben.
Schrittweise Implementierung
Companion-Erweiterung bereitstellen
Erweiterungen werden über die Chrome-Admin-Konsole bereitgestellt. Je nach Zielumgebung konfigurieren Sie dies im entsprechenden Bereich (z. B. Geräte > Chrome > Apps & Erweiterungen > Kioske für den Kioskmodus oder die entsprechenden Tabs für Nutzer und Browser oder Verwaltete Gastsitzungen). Sie können die Erweiterung entweder selbst über einen öffentlich zugänglichen Link hosten oder direkt im Chrome Web Store. Eine detailliertere Anleitung zum Verwalten von Erweiterungen finden Sie in der offiziellen Dokumentation.
Nachrichtenübermittlung implementieren
Einrichtung von Erweiterungen
Damit Sie Nachrichten von Ihrer Web-App empfangen und darauf antworten können, müssen Sie ein Hintergrundskript bereitstellen, das auf Nachrichten vom Client (Ihrer Web-App) wartet und diese Anfragen dann an einen entsprechenden API-Aufruf weiterleitet. Im folgenden Beispiel wird eine Anfrage weitergeleitet, um das ChromeOS-Gerät neu zu starten, wenn die Web-App ein benutzerdefiniertes Nachrichtenobjekt mit einem methodName von callRestart sendet.
Background.js
// message handler - extension code
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
if (request.methodName == 'callRestart') {
chrome.runtime.restart();
}
});
Das Manifest für die Erweiterung kann so konfiguriert werden, dass externe Funktionsaufrufe an die Erweiterung über den externally_connectable-Schlüssel möglich sind. Dieser Schlüssel gibt an, welche Websites und Erweiterungen Methoden in der Erweiterung aufrufen dürfen. Weitere Informationen zu Chrome-Erweiterungen und Manifest V3 finden Sie in der offiziellen Dokumentation.
Wenn Sie eine Verbindung über eine progressive Web-App (PWA) herstellen, listen Sie die Standard-HTTPS-Domain, auf der Ihre App gehostet wird, im Array „matches“ auf. Hier sehen Sie ein Beispiel für ein Manifest, das für eine PWA konfiguriert ist, die im Kioskmodus ausgeführt wird:
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/*"
]
}
}
Wenn Sie eine Verbindung über eine isolierte Web-App (IWA) herstellen, ist der Mechanismus genau derselbe, aber das URL-Schema ändert sich. Da IWAs sicher verpackt sind und nicht auf Standard-Webservern ausgeführt werden, verwenden sie ein eigenes Protokoll. Sie müssen den Ursprung der IWA mit dem isolated-app://-Schema hinzufügen.
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://*/*"
]
}
}
Dies ist die Mindestmenge an Code, die in einer Erweiterung erforderlich ist, um auf Nachrichten von einer PWA oder IWA zu warten.
PWA- und IWA-Einrichtung
Wenn Sie die Erweiterung über eine Web-App aufrufen möchten, benötigen Sie ihre statische Erweiterungs-ID.
Diese ID finden Sie auf der Seite chrome://extensions, die bei der Installation Ihrer Chrome-Erweiterung angezeigt wird, oder im Chrome Web Store, nachdem die Erweiterung hochgeladen wurde. So kann Ihre Web-App die genaue Erweiterung angeben, mit der sie kommunizieren soll. Rufen Sie danach chrome.runtime.sendMessage
auf und übergeben Sie die Erweiterungs-ID mit einer Nachricht, die an die Erweiterung gesendet werden soll.
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');
Weitere Informationen zum Verbinden von Web-Apps mit Erweiterungen für die Nachrichtenübermittlung finden Sie in der Dokumentation zu Erweiterungen.
Demo
Wenn Sie diese Implementierung in Aktion sehen möchten, können Sie sich das IWA Kitchen Sink-Repository ansehen.
Dieses Projekt dient als umfassende Testumgebung für verschiedene IWA-Funktionen und bietet Demos für APIs mit hohem Vertrauen wie Direct Sockets und Controlled Frame.
Außerdem wird ein vollständiges, funktionierendes Beispiel für die Verbindung zwischen IWA und Chrome-Erweiterung bereitgestellt. Das Repository enthält eine Beispiel-Companion-Erweiterung und eine spezielle Weboberfläche, die zeigt, wie sich mit sicherer Nachrichtenübermittlung Erweiterungsmethoden auslösen lassen. Sie können beispielsweise testen, ob die Profilinformationen des Nutzers mit der chrome.identity.getProfileUserInfo() API direkt aus der Isolated Web App abgerufen werden können.
Fazit
Wenn Sie Ihre Webanwendungen mit einer Chrome-Erweiterung verbinden, erhalten Sie einen sicheren, progressiven Weg, um geräteinterne Funktionen freizuschalten. Beachten Sie beim Entwerfen der Architektur Ihrer App die folgenden wichtigen Punkte:
- Mit dem Web beginnen:Verwenden Sie standardmäßig eine PWA, um die beste Reichweite und den geringsten Sicherheitsaufwand zu erzielen.
- Lücke mit Erweiterungen schließen:Für tief integrierte Funktionen auf Betriebssystemebene (z. B. Neustart des Geräts im Kioskmodus) stellen Sie eine begleitende Chrome-Erweiterung bereit und verbinden Sie sie über sichere Nachrichtenübermittlung mit Ihrer Anwendung.
- Nur bei Bedarf auf IWAs umstellen:Verwenden Sie isolierte Web-Apps, wenn Sie APIs mit hohem Vertrauensniveau wie Direct Sockets, Controlled Frame oder eine der anderen APIs benötigen, die nur für IWAs verfügbar sind.