Jako deweloper aplikacji internetowych powinieneś projektować aplikacje przy użyciu modelu zabezpieczeń o najniższym poziomie zaufania, np. progresywnej aplikacji internetowej (PWA). Takie podejście maksymalizuje zasięg, minimalizuje obciążenie związane z bezpieczeństwem, którym musisz zarządzać, i zapewnia największą elastyczność zarówno deweloperom, jak i użytkownikom. Jednak ze względu na to, że internet jest domyślnie bezpieczny, jego konserwatywny model zabezpieczeń naturalnie ogranicza dostęp do systemu operacyjnego i niektórych zaawansowanych interfejsów API urządzenia.
Izolowane aplikacje internetowe (IWA) rozwiązują ten problem, zapewniając izolowany, spakowany, wersjonowany, podpisany i wysoce zaufany model aplikacji oparty na platformie internetowej. Zanim jednak zdecydujesz się na IWA, warto rozważyć bardziej stopniowe rozwiązanie: połączenie PWA z rozszerzeniem Chrome. Ta technika jest dostępna w zarządzanych środowiskach ChromeOS, takich jak zarządzane sesje użytkownika, zarządzane sesje gościa (MGS) lub tryb kiosku. Umożliwia ona aplikacji korzystanie z interfejsów API rozszerzeń niższego poziomu za pomocą bezpiecznego przekazywania wiadomości. Poniższy diagram ilustruje to progresywne podejście: zaczynając od standardowej aplikacji internetowej, dodając zdolności, aby stała się progresywną aplikacją internetową z możliwością zainstalowania, a na koniec poznając ścieżkę PWA i rozszerzenia do Chrome, aby odblokować dodatkowe interfejsy API.
Jeśli Twoja aplikacja wymaga zaawansowanych funkcji, które są niedostępne nawet w przypadku interfejsów Chrome Extension API, takich jak Controlled Frame czy Direct Sockets API, najlepszym rozwiązaniem będzie przejście na izolowaną aplikację internetową (IWA). Chociaż IWAs odblokowują nowe, zaawansowane funkcje internetowe, możesz nadal potrzebować konkretnych interfejsów API na poziomie urządzenia, które są dostępne tylko w rozszerzeniach Chrome, np. chrome.runtime.restart() do ponownego uruchamiania urządzenia z ChromeOS w trybie kiosku.
Na szczęście możesz połączyć IWA z rozszerzeniem Chrome, stosując dokładnie takie samo podejście jak w przypadku PWA. Ta technika jest opisana w kolejnych krokach.
Implementacja krok po kroku
Wdrażanie rozszerzenia Companion
Rozszerzenia są wdrażane za pomocą konsoli administracyjnej Chrome. W zależności od środowiska docelowego skonfiguruj to ustawienie w odpowiedniej sekcji (np. w przypadku trybu kiosku otwórz Urządzenia > Chrome > Aplikacje i rozszerzenia > Kioski, a w przypadku użytkowników i przeglądarek lub zarządzanych sesji gościa – odpowiednie karty). Możesz samodzielnie hostować rozszerzenie pod publicznie dostępnym linkiem lub hostować je bezpośrednio w Chrome Web Store. Szczegółowe instrukcje dotyczące zarządzania rozszerzeniami znajdziesz w oficjalnej dokumentacji.
Wdrażanie przekazywania wiadomości
Konfiguracja rozszerzenia
Aby otrzymywać wiadomości z aplikacji internetowej i na nie odpowiadać, udostępnij skrypt działający w tle, który nasłuchuje wiadomości przychodzących od klienta (aplikacji internetowej), a następnie przekazuje te żądania do odpowiedniego wywołania interfejsu API. W poniższym przykładzie żądanie jest przekazywane w celu ponownego uruchomienia urządzenia z ChromeOS, gdy aplikacja internetowa wyśle niestandardowy obiekt wiadomości zawierający methodName o wartości callRestart.
Background.js
// message handler - extension code
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
if (request.methodName == 'callRestart') {
chrome.runtime.restart();
}
});
Plik manifestu rozszerzenia można skonfigurować tak, aby zezwalał na zewnętrzne wywołania funkcji w rozszerzeniu za pomocą klucza externally_connectable, który określa, które witryny i rozszerzenia mogą wywoływać metody w rozszerzeniu. Więcej informacji o rozszerzeniach Chrome i pliku manifestu w wersji 3 znajdziesz w oficjalnej dokumentacji.
Jeśli łączysz się z progresywnej aplikacji internetowej (PWA), w tablicy matches podaj standardową domenę HTTPS, w której jest hostowana Twoja aplikacja. Oto przykład pliku manifestu skonfigurowanego dla aplikacji PWA działającej w trybie kiosku:
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/*"
]
}
}
Jeśli łączysz się z izolowanej aplikacji internetowej (IWA), mechanizm jest dokładnie taki sam, ale zmienia się schemat URI adresu URL. Aplikacje IWA są bezpiecznie spakowane i nie działają na standardowych serwerach internetowych, dlatego używają własnego protokołu. Musisz dodać origin IWA za pomocą schematu 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://*/*"
]
}
}
Jest to minimalna ilość kodu wymagana w rozszerzeniu do nasłuchiwania wiadomości z PWA lub IWA.
Konfiguracja PWA i IWA
Aby wywołać rozszerzenie z aplikacji internetowej, musisz znać jego statyczny identyfikator.
Ten identyfikator znajdziesz na stronie chrome://extensions, która wyświetla się podczas instalowania rozszerzenia do Chrome, lub w Chrome Web Store po przesłaniu rozszerzenia. Dzięki temu aplikacja internetowa może określić dokładne rozszerzenie, z którym ma się komunikować. Następnie wywołaj funkcję
chrome.runtime.sendMessage
i przekaż identyfikator rozszerzenia wraz z wiadomością do wysłania do rozszerzenia.
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');
Więcej informacji o łączeniu aplikacji internetowych z rozszerzeniami w celu przesyłania wiadomości znajdziesz w dokumentacji rozszerzeń.
Prezentacja
Aby zobaczyć tę implementację w działaniu, zapoznaj się z repozytorium IWA Kitchen Sink.
Ten projekt to kompleksowe środowisko testowe różnych funkcji IWA, które zawiera wersje demonstracyjne interfejsów API o wysokim poziomie zaufania, takich jak Direct Sockets i Controlled Frame.
Zawiera też kompletny, działający przykład połączenia między aplikacją internetową a rozszerzeniem do Chrome. Repozytorium zawiera przykładowe rozszerzenie towarzyszące i dedykowany interfejs internetowy, który pokazuje, jak używać bezpiecznego przekazywania wiadomości do wywoływania metod dostępnych tylko w rozszerzeniu. Możesz na przykład przetestować pobieranie informacji z profilu użytkownika za pomocą chrome.identity.getProfileUserInfo()interfejsu API bezpośredniochrome.identity.getProfileUserInfo() z izolowanej aplikacji internetowej.
Podsumowanie
Połączenie aplikacji internetowych z rozszerzeniem do Chrome zapewnia bezpieczną i progresywną ścieżkę do odblokowania funkcji urządzenia podobnych do natywnych. Podczas projektowania architektury aplikacji pamiętaj o tych najważniejszych kwestiach:
- Zacznij od internetu: domyślnie używaj aplikacji PWA, aby uzyskać największy zasięg i najniższe obciążenie związane z bezpieczeństwem.
- Wypełnij lukę za pomocą rozszerzeń: w przypadku funkcji głęboko zintegrowanych na poziomie systemu operacyjnego (takich jak ponowne uruchamianie urządzenia w trybie kiosku) wdróż powiązane rozszerzenie Chrome i połącz je z aplikacją za pomocą bezpiecznego przekazywania wiadomości.
- Uaktualniaj do izolowanych aplikacji internetowych tylko w razie potrzeby: używaj izolowanych aplikacji internetowych, gdy potrzebujesz interfejsów API o wysokim poziomie zaufania, takich jak Direct Sockets, Controlled Frame lub innych interfejsów API dostępnych tylko w izolowanych aplikacjach internetowych.