Menghubungkan PWA dan IWA dengan Ekstensi Chrome

Demián Renzulli

Sebagai developer web, praktik terbaiknya adalah mendesain aplikasi Anda menggunakan model keamanan dengan tingkat kepercayaan terendah yang memungkinkan, seperti Aplikasi Web Progresif (PWA). Pendekatan ini memaksimalkan jangkauan Anda, meminimalkan overhead keamanan yang harus Anda kelola, dan menawarkan fleksibilitas terbesar bagi developer dan pengguna. Namun, karena web dirancang agar aman secara default, model keamanan konservatifnya secara alami membatasi akses ke sistem operasi dan API perangkat canggih tertentu.

Aplikasi Web Terisolasi (IWA) menyelesaikan masalah ini dengan menyediakan model aplikasi yang terisolasi, di-bundle, diberi versi, ditandatangani, dan sangat tepercaya yang dibangun di atas platform web. Namun, sebelum beralih ke IWA, sebaiknya pertimbangkan langkah yang lebih bertahap: menghubungkan PWA Anda dengan Ekstensi Chrome. Tersedia di lingkungan ChromeOS terkelola—seperti sesi pengguna terkelola, Sesi Tamu Terkelola (MGS), atau mode Kios—teknik ini memungkinkan aplikasi Anda menggunakan API ekstensi tingkat bawah melalui penerusan pesan yang aman. Diagram berikut menggambarkan pendekatan progresif ini: dimulai dengan aplikasi web standar, menambahkan kemampuan untuk menjadi PWA yang dapat diinstal, dan terakhir menjelajahi jalur PWA dan Ekstensi Chrome untuk mengakses API tambahan.

Jika aplikasi Anda memerlukan kemampuan lanjutan yang tetap tidak tersedia meskipun dengan Chrome Extension API—seperti Controlled Frame atau Direct Sockets API—maka bermigrasi ke Aplikasi Web Terisolasi (IWA) adalah cara terbaik untuk melanjutkan. Namun, meskipun IWA membuka fitur web baru yang canggih, Anda mungkin masih memerlukan API tingkat perangkat tertentu yang eksklusif untuk Ekstensi Chrome, seperti chrome.runtime.restart() untuk memulai ulang perangkat ChromeOS dalam mode Kios. Untungnya, Anda dapat menghubungkan IWA ke Ekstensi Chrome menggunakan pendekatan yang sama persis dengan PWA. Teknik ini dibahas dalam langkah-langkah berikut.

Penerapan langkah demi langkah

Men-deploy Ekstensi Pendamping

Ekstensi di-deploy melalui Konsol Admin Chrome. Bergantung pada lingkungan target, Anda akan mengonfigurasi ini di bagian yang sesuai (misalnya, buka Perangkat > Chrome > Aplikasi & Ekstensi > Kios untuk mode Kios, atau tab masing-masing untuk Pengguna & Browser atau Sesi Tamu Terkelola). Anda dapat menghosting sendiri ekstensi di link yang dapat diakses secara publik atau menghostingnya langsung di Chrome Web Store. Untuk mengetahui petunjuk yang lebih mendetail tentang cara mengelola ekstensi, lihat dokumentasi resmi.

Menerapkan penerusan pesan

Penyiapan ekstensi

Untuk menerima dan merespons pesan dari aplikasi web, ekspos skrip latar belakang yang memproses pesan yang tiba dari klien (aplikasi web Anda), lalu teruskan permintaan tersebut ke panggilan API yang sesuai. Dalam contoh berikut, permintaan di-proxy untuk memulai ulang perangkat ChromeOS saat aplikasi web mengirim objek pesan kustom yang berisi methodName callRestart.

Background.js

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

Manifes untuk ekstensi dapat dikonfigurasi untuk mengizinkan panggilan fungsi eksternal ke ekstensi menggunakan kunci externally_connectable⁠⁠ yang menentukan situs dan ekstensi yang diizinkan untuk memanggil metode di ekstensi. Informasi selengkapnya tentang ekstensi Chrome dan Manifes V3 dapat ditemukan di dokumentasi resmi⁠⁠.

Jika terhubung dari Progressive Web App (PWA), Anda akan mencantumkan domain HTTPS standar tempat aplikasi dihosting di bagian array kecocokan. Berikut adalah contoh manifes yang dikonfigurasi untuk PWA yang berjalan dalam mode Kios:

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

Jika Anda terhubung dari Aplikasi Web Terisolasi (IWA), mekanisme ini persis sama, tetapi skema URL berubah. Karena dikemas dengan aman dan tidak berjalan di server web standar, IWA menggunakan protokolnya sendiri. Anda harus menambahkan asal IWA menggunakan skema 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://*/*"
    ]
  }
}

Ini adalah jumlah minimum kode yang diperlukan dalam ekstensi untuk memproses pesan dari PWA atau IWA.

Penyiapan PWA dan IWA

Untuk memanggil ekstensi dari aplikasi web, Anda harus mengetahui ID ekstensi statisnya. ID ini dapat ditemukan di halaman chrome://extensions, yang ditampilkan saat Anda menginstal ekstensi Chrome, atau dari Chrome Web Store setelah ekstensi diupload. Hal ini memungkinkan aplikasi web Anda menentukan ekstensi yang tepat untuk berkomunikasi dengan. Setelah itu, panggil chrome.runtime.sendMessage⁠⁠ dan teruskan ID ekstensi dengan pesan yang akan dikirim ke ekstensi.

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

Untuk mengetahui informasi selengkapnya tentang cara menghubungkan aplikasi web ke ekstensi untuk meneruskan pesan, lihat dokumentasi Ekstensi⁠⁠.

Demo

Untuk melihat penerapan ini, jelajahi repositori IWA Kitchen Sink. Project ini berfungsi sebagai platform eksperimental yang komprehensif untuk berbagai kemampuan IWA, yang menampilkan demo untuk API dengan tingkat kepercayaan tinggi seperti Direct Sockets dan Controlled Frame. Contoh ini juga memberikan contoh lengkap dan berfungsi dari koneksi IWA ke Ekstensi Chrome. Repositori ini mencakup contoh ekstensi pendamping dan antarmuka web khusus yang menunjukkan cara menggunakan penerusan pesan yang aman untuk memicu metode khusus ekstensi. Misalnya, Anda dapat menguji pengambilan informasi profil pengguna dengan chrome.identity.getProfileUserInfo() API secara langsung dari Aplikasi Web Terisolasi.

Kesimpulan

Menghubungkan aplikasi web Anda ke Ekstensi Chrome menawarkan jalur progresif yang aman untuk memanfaatkan kemampuan perangkat seperti aplikasi native. Saat mendesain arsitektur aplikasi, perhatikan poin-poin penting berikut:

1. Mulai dengan Web: Gunakan PWA secara default untuk jangkauan terbaik dan overhead keamanan terendah.
2. Menjembatani kesenjangan dengan Ekstensi: Untuk fitur tingkat OS yang terintegrasi secara mendalam (seperti memulai ulang perangkat dalam mode Kios), deploy Ekstensi Chrome pendamping dan hubungkan ke aplikasi Anda menggunakan penerusan pesan yang aman.
3. Lakukan upgrade ke IWA hanya jika diperlukan: Gunakan Aplikasi Web Terisolasi jika Anda memerlukan API dengan tingkat kepercayaan tinggi seperti Direct Sockets, Controlled Frame, atau API lain yang hanya tersedia untuk IWA.