اتصال PWAها و IWAها با افزونه‌های کروم

Demián Renzulli

به عنوان یک توسعه‌دهنده وب، بهترین روش این است که برنامه‌های خود را با استفاده از مدل امنیتی با کمترین اعتماد ممکن، مانند یک برنامه وب پیش‌رونده (PWA) طراحی کنید. این رویکرد، دسترسی شما را به حداکثر می‌رساند، سربار امنیتی که باید مدیریت کنید را به حداقل می‌رساند و بیشترین انعطاف‌پذیری را هم برای توسعه‌دهندگان و هم برای کاربران ارائه می‌دهد. با این حال، از آنجا که وب به طور پیش‌فرض طوری طراحی شده است که ایمن باشد، مدل امنیتی محافظه‌کارانه آن به طور طبیعی دسترسی به سیستم عامل و برخی از APIهای قدرتمند دستگاه را محدود می‌کند.

برنامه‌های وب ایزوله (IWA) این مشکل را با ارائه یک مدل برنامه ایزوله، بسته‌بندی‌شده، نسخه‌بندی‌شده، امضاشده و بسیار قابل اعتماد که بر روی پلتفرم وب ساخته شده است، حل می‌کنند. با این حال، قبل از جهش به سمت یک IWA، ارزش دارد که یک گام تدریجی‌تر را در نظر بگیرید: اتصال PWA خود به یک افزونه کروم. این تکنیک که در محیط‌های مدیریت‌شده ChromeOS - مانند جلسات مدیریت‌شده کاربر، جلسات مدیریت‌شده مهمان (MGS) یا حالت کیوسک - موجود است، به برنامه شما اجازه می‌دهد از APIهای افزونه سطح پایین‌تر از طریق ارسال پیام امن استفاده کند. نمودار زیر این رویکرد مترقی را نشان می‌دهد: شروع با یک برنامه وب استاندارد، اضافه کردن قابلیت‌ها برای تبدیل شدن به یک PWA قابل نصب، و در نهایت بررسی مسیر PWA و افزونه کروم برای باز کردن APIهای اضافی.

اگر برنامه شما به قابلیت‌های پیشرفته‌ای نیاز دارد که حتی با APIهای افزونه‌های کروم - مانند Controlled Frame یا Direct Sockets API - در دسترس نیستند، مهاجرت به یک برنامه وب ایزوله (IWA) بهترین مسیر پیش روی شماست. با این حال، در حالی که IWAها ویژگی‌های وب جدید و قدرتمندی را ارائه می‌دهند، ممکن است هنوز به APIهای سطح دستگاه خاصی نیاز داشته باشید که مختص افزونه‌های کروم هستند، مانند chrome.runtime.restart() برای راه‌اندازی مجدد دستگاه ChromeOS در حالت Kiosk. خوشبختانه، می‌توانید یک IWA را با استفاده از همان رویکرد PWA به یک افزونه کروم متصل کنید. این تکنیک در مراحل زیر پوشش داده شده است.

اجرای گام به گام

افزونه Companion را مستقر کنید

افزونه‌ها از طریق کنسول مدیریت کروم مستقر می‌شوند. بسته به محیط هدف شما، این مورد را در بخش مربوطه پیکربندی خواهید کرد (برای مثال، برای حالت کیوسک به Devices > Chrome > Apps & Extensions > Kiosks یا برای Users & Browsers یا Managed Guest Sessions به تب‌های مربوطه بروید). می‌توانید افزونه را در یک لینک عمومی میزبانی کنید یا آن را مستقیماً در فروشگاه وب کروم میزبانی کنید. برای دستورالعمل‌های دقیق‌تر در مورد مدیریت افزونه‌ها به مستندات رسمی مراجعه کنید.

پیاده‌سازی ارسال پیام

تنظیمات افزونه

برای دریافت و پاسخ به پیام‌ها از برنامه وب خود، یک اسکریپت پس‌زمینه را در معرض نمایش قرار دهید که منتظر دریافت پیام‌ها از کلاینت (برنامه وب شما) باشد و سپس آن درخواست‌ها را به یک فراخوانی API مربوطه پروکسی کند. در مثال زیر، هنگامی که برنامه وب یک شیء پیام سفارشی که حاوی یک methodName با مقدار callRestart است ارسال می‌کند، یک درخواست برای راه‌اندازی مجدد دستگاه ChromeOS پروکسی می‌شود.

پس‌زمینه.js

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

می‌توان مانیفست افزونه را طوری پیکربندی کرد که با استفاده از کلید externally_connectable⁠⁠ امکان فراخوانی توابع خارجی به افزونه را فراهم کند. این کلید مشخص می‌کند که چه سایت‌ها و افزونه‌هایی مجاز به فراخوانی متدها در افزونه هستند. اطلاعات بیشتر در مورد افزونه‌های کروم و مانیفست نسخه ۳ را می‌توانید در مستندات رسمی بیابید.

اگر از یک برنامه وب پیش‌رونده (PWA) متصل می‌شوید، دامنه استاندارد HTTPS که برنامه شما در آن میزبانی می‌شود را در زیر آرایه matches فهرست خواهید کرد. در اینجا مثالی از مانیفست پیکربندی شده برای یک PWA که در حالت Kiosk اجرا می‌شود، آورده شده است:

فایل مانیفست.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/*"
    ]
  }
}

اگر از یک برنامه وب ایزوله (IWA) متصل می‌شوید، مکانیسم دقیقاً یکسان است، اما طرح URL تغییر می‌کند. از آنجا که IWAها به صورت ایمن بسته‌بندی شده‌اند و روی سرورهای وب استاندارد اجرا نمی‌شوند، از پروتکل خاص خود استفاده می‌کنند. شما باید مبدا IWA را با استفاده از طرح isolated-app:// اضافه کنید.

فایل مانیفست.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://*/*"
    ]
  }
}

این حداقل مقدار کد مورد نیاز در یک افزونه برای گوش دادن به پیام‌های یک PWA یا IWA است.

راه‌اندازی PWA و IWA

برای فراخوانی افزونه از یک برنامه وب، باید شناسه استاتیک افزونه آن را بدانید. این شناسه را می‌توانید در صفحه chrome://extensions که هنگام نصب افزونه کروم نمایش داده می‌شود، یا پس از آپلود افزونه از فروشگاه وب کروم پیدا کنید. این به برنامه وب شما اجازه می‌دهد افزونه دقیقی را که باید با آن ارتباط برقرار کند، مشخص کند. پس از آن، chrome.runtime.sendMessage را فراخوانی کنید و شناسه افزونه را به همراه پیامی برای ارسال به افزونه وارد کنید.

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

برای اطلاعات بیشتر در مورد اتصال برنامه‌های وب به افزونه‌ها برای ارسال پیام، به مستندات افزونه‌ها مراجعه کنید.

نسخه آزمایشی

برای مشاهده‌ی این پیاده‌سازی در عمل، مخزن IWA Kitchen Sink را بررسی کنید. این پروژه به عنوان یک زمین بازی جامع برای قابلیت‌های مختلف IWA عمل می‌کند و شامل نسخه‌های نمایشی برای APIهای با اعتماد بالا مانند Direct Sockets و Controlled Frame است. همچنین یک مثال کامل و کاربردی از اتصال IWA-to-Chrome-Extension ارائه می‌دهد. این مخزن شامل یک افزونه‌ی همراه نمونه و یک رابط وب اختصاصی است که نحوه‌ی استفاده از ارسال پیام امن برای فعال کردن روش‌های منحصر به افزونه را نشان می‌دهد. به عنوان مثال، می‌توانید دریافت اطلاعات پروفایل کاربر را با API chrome.identity.getProfileUserInfo() مستقیماً از برنامه‌ی وب ایزوله آزمایش کنید.

نتیجه‌گیری

اتصال برنامه‌های وب شما به یک افزونه کروم، مسیری امن و رو به پیشرفت را برای دسترسی به قابلیت‌های مشابه دستگاه‌های بومی ارائه می‌دهد. هنگام طراحی معماری برنامه خود، این نکات کلیدی را در نظر داشته باشید:

1. با وب شروع کنید: برای بهترین دسترسی و کمترین سربار امنیتی، به طور پیش‌فرض از PWA استفاده کنید.
2. با افزونه‌ها، شکاف را پر کنید: برای ویژگی‌های کاملاً یکپارچه در سطح سیستم عامل (مانند راه‌اندازی مجدد دستگاه در حالت کیوسک)، یک افزونه کروم همراه راه‌اندازی کنید و آن را با استفاده از ارسال پیام امن به برنامه خود متصل کنید.
3. فقط در صورت نیاز به IWA ارتقا دهید: وقتی به APIهای با اعتماد بالا مانند Direct Sockets، Controlled Frame یا هر یک از APIهای منحصر به IWA دیگر نیاز دارید، از Isolated Web Apps استفاده کنید.