เชื่อมต่อ PWA และ IWA กับส่วนขยาย Chrome

Demián Renzulli

ในฐานะนักพัฒนาเว็บ แนวทางปฏิบัติแนะนำคือการออกแบบแอปพลิเคชันโดยใช้ รูปแบบความปลอดภัยที่มีความน่าเชื่อถือต่ำที่สุดเท่าที่จะเป็นไปได้ เช่น Progressive Web App (PWA) วิธีนี้จะช่วยเพิ่มการเข้าถึง ลดภาระด้านความปลอดภัยที่คุณต้องจัดการ และมอบความยืดหยุ่นสูงสุดสำหรับทั้งนักพัฒนาแอปและผู้ใช้ อย่างไรก็ตาม เนื่องจากเว็บได้รับการออกแบบมาให้ปลอดภัยโดยค่าเริ่มต้น โมเดลความปลอดภัยที่เข้มงวดจึงจำกัดการเข้าถึงระบบปฏิบัติการและ API ของอุปกรณ์ที่มีประสิทธิภาพบางอย่างโดยอัตโนมัติ

Isolated Web App (IWA) แก้ปัญหานี้ด้วยการจัดหาโมเดลแอปพลิเคชันที่แยกต่างหาก รวมเป็นแพ็กเกจ มีการกำหนดเวอร์ชัน ลงนาม และมีความน่าเชื่อถือสูง ซึ่งสร้างขึ้นบนแพลตฟอร์มเว็บ แต่ก่อนที่จะเปลี่ยนไปใช้ IWA คุณควรพิจารณาขั้นตอนที่ค่อยเป็นค่อยไปมากกว่านี้ นั่นคือการเชื่อมต่อ PWA กับส่วนขยาย Chrome เทคนิคนี้พร้อมใช้งานในสภาพแวดล้อม ChromeOS ที่มีการจัดการ เช่น เซสชันผู้ใช้ที่มีการจัดการ เซสชันผู้เยี่ยมชมที่มีการจัดการ (MGS) หรือโหมดคีออสก์ ซึ่งช่วยให้แอปของคุณใช้ API ส่วนขยายระดับล่างผ่านการส่งข้อความที่ปลอดภัยได้ แผนภาพต่อไปนี้แสดงแนวทางแบบค่อยเป็นค่อยไปนี้ โดยเริ่มจากเว็บแอปพลิเคชันมาตรฐาน เพิ่มความสามารถเพื่อเป็น PWA ที่ติดตั้งได้ และสุดท้ายคือการสำรวจเส้นทาง PWA และส่วนขยาย Chrome เพื่อ ปลดล็อก API เพิ่มเติม

หากแอปพลิเคชันของคุณต้องใช้ความสามารถขั้นสูงที่ยังคงไม่พร้อมใช้งานแม้จะใช้ส่วนขยาย Chrome API เช่น Controlled Frame หรือ Direct Sockets API การย้ายข้อมูลไปยัง Isolated Web App (IWA) จะเป็นแนวทางที่ดีที่สุด อย่างไรก็ตาม แม้ว่า IWA จะปลดล็อกฟีเจอร์ใหม่ๆ ที่ทรงพลังบนเว็บ แต่คุณอาจยังคงต้องใช้ API ระดับอุปกรณ์ที่เฉพาะเจาะจง ซึ่งมีเฉพาะในส่วนขยาย Chrome เช่น chrome.runtime.restart() สำหรับการรีบูตอุปกรณ์ ChromeOS ในโหมดคีออสก์ โชคดีที่คุณเชื่อมต่อ IWA กับส่วนขยาย Chrome ได้โดยใช้แนวทางเดียวกับ PWA เราจะอธิบายเทคนิคนี้ในขั้นตอนต่อไปนี้

การติดตั้งใช้งานทีละขั้นตอน

ติดตั้งใช้งานส่วนขยาย Companion

ส่วนขยายได้รับการติดตั้งใช้งานผ่านคอนโซลผู้ดูแลระบบของ Chrome คุณจะกำหนดค่านี้ในส่วนที่เกี่ยวข้องได้โดยขึ้นอยู่กับสภาพแวดล้อมเป้าหมาย (เช่น ไปที่อุปกรณ์ > Chrome > แอปและส่วนขยาย > คีออสก์สำหรับโหมดคีออสก์ หรือแท็บที่เกี่ยวข้องสำหรับผู้ใช้และเบราว์เซอร์หรือเซสชันผู้เยี่ยมชมที่มีการจัดการ) คุณจะโฮสต์ส่วนขยายด้วยตนเองที่ลิงก์ที่เข้าถึงได้แบบสาธารณะ หรือโฮสต์ใน Chrome เว็บสโตร์โดยตรงก็ได้ ดูวิธีการโดยละเอียดเพิ่มเติม เกี่ยวกับการจัดการส่วนขยายได้ในเอกสารประกอบอย่างเป็นทางการ

ใช้การส่งข้อความ

การตั้งค่าส่วนขยาย

หากต้องการรับและตอบกลับข้อความจากเว็บแอป ให้แสดงสคริปต์พื้นหลังที่รอรับข้อความจากไคลเอ็นต์ (เว็บแอปของคุณ) แล้วส่งต่อคำขอเหล่านั้นไปยังการเรียก API ที่เกี่ยวข้อง ในตัวอย่างต่อไปนี้ ระบบจะพร็อกซีคำขอเพื่อรีสตาร์ทอุปกรณ์ ChromeOS เมื่อเว็บแอปส่งออบเจ็กต์ข้อความที่กำหนดเองซึ่งมี methodName เป็น callRestart

Background.js

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

คุณสามารถกำหนดค่าไฟล์ Manifest ของส่วนขยายเพื่ออนุญาตการเรียกฟังก์ชันภายนอกไปยังส่วนขยายได้โดยใช้คีย์ externally_connectable⁠⁠ ซึ่งจะระบุว่าเว็บไซต์และส่วนขยายใดบ้างที่ได้รับอนุญาตให้เรียกใช้เมธอดในส่วนขยาย ดูข้อมูลเพิ่มเติมเกี่ยวกับส่วนขยาย Chrome และ Manifest V3 ได้ในเอกสารประกอบอย่างเป็นทางการ⁠⁠

หากเชื่อมต่อจาก Progressive Web App (PWA) คุณจะต้องระบุโดเมน HTTPS มาตรฐานที่โฮสต์แอปไว้ในอาร์เรย์ matches ตัวอย่างไฟล์ Manifest ที่กำหนดค่าสำหรับ PWA ที่ทำงานในโหมดคีออสก์มีดังนี้

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

หากคุณเชื่อมต่อจาก Isolated Web App (IWA) กลไกจะเหมือนกันทุกประการ แต่ URL Scheme จะเปลี่ยนไป เนื่องจาก IWA ได้รับการแพ็กเกจอย่างปลอดภัย และไม่ได้ทำงานบนเว็บเซิร์ฟเวอร์มาตรฐาน จึงใช้โปรโตคอลของตัวเอง คุณต้อง เพิ่มต้นทางของ IWA โดยใช้รูปแบบ 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://*/*"
    ]
  }
}

นี่คือจำนวนโค้ดขั้นต่ำที่ต้องมีในส่วนขยายเพื่อรอรับฟังข้อความจาก PWA หรือ IWA

การตั้งค่า PWA และ IWA

หากต้องการเรียกใช้ส่วนขยายจากเว็บแอป คุณต้องทราบรหัสส่วนขยายแบบคงที่ คุณดูรหัสนี้ได้ในchrome://extensionsหน้าเว็บที่แสดงเมื่อคุณติดตั้ง ส่วนขยาย Chrome หรือจาก Chrome เว็บสโตร์หลังจากอัปโหลดส่วนขยายแล้ว ซึ่งช่วยให้เว็บแอปของคุณระบุส่วนขยายที่ต้องการสื่อสารด้วยได้อย่างแม่นยำ หลังจากนั้น ให้เรียกใช้ 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 กับส่วนขยาย Chrome ที่ใช้งานได้จริงและสมบูรณ์ ที่เก็บมีส่วนขยายคู่หูตัวอย่างและ อินเทอร์เฟซเว็บเฉพาะที่แสดงวิธีใช้การส่งข้อความที่ปลอดภัยเพื่อทริกเกอร์ เมธอดเฉพาะส่วนขยาย เช่น คุณสามารถทดสอบการดึงข้อมูลโปรไฟล์ของผู้ใช้ด้วย chrome.identity.getProfileUserInfo() API โดยตรง จาก Isolated Web App

บทสรุป

การเชื่อมต่อเว็บแอปพลิเคชันกับส่วนขยาย Chrome จะช่วยให้คุณปลดล็อกความสามารถของอุปกรณ์ที่เหมือนกับแอปเนทีฟได้อย่างปลอดภัย และค่อยเป็นค่อยไป ขณะออกแบบสถาปัตยกรรมของแอป โปรดคำนึงถึงประเด็นสำคัญต่อไปนี้

1. เริ่มต้นด้วยเว็บ: ใช้ PWA เป็นค่าเริ่มต้นเพื่อให้เข้าถึงได้ดีที่สุดและมีค่าใช้จ่ายด้านความปลอดภัยต่ำที่สุด
2. เชื่อมช่องว่างด้วยส่วนขยาย: สำหรับฟีเจอร์ระดับระบบปฏิบัติการที่ผสานรวมอย่างลึกซึ้ง (เช่น การรีบูตอุปกรณ์ในโหมดคีออสก์) ให้ทำให้ใช้งานได้ส่วนขยาย Chrome ที่มาพร้อมกัน และเชื่อมต่อกับแอปพลิเคชันโดยใช้การส่งข้อความที่ปลอดภัย
3. อัปเกรดเป็น IWA เฉพาะในกรณีที่จำเป็น: ใช้ Isolated Web App เมื่อคุณต้องการ API ที่มีความน่าเชื่อถือสูง เช่น Direct Sockets, Controlled Frame หรือ API อื่นๆ ที่ใช้ได้เฉพาะใน IWA เท่านั้น