Brauzer kengaytmasining fon skriptlari: JavaScript Service Worker migratsiyasini qabul qilish

Brauzer kengaytmalari ishlab chiqish sohasi doimiy ravishda rivojlanib bormoqda. Eng so'nggi muhim o'zgarishlardan biri bu an'anaviy doimiy fon sahifalaridan fon skriptlari uchun JavaScript Service Workerlarga o'tishdir. Asosan Chromium-ga asoslangan brauzerlarda Manifest V3 (MV3) tomonidan boshqariladigan bu migratsiya ko'plab afzalliklarni taqdim etadi, ammo ishlab chiquvchilar uchun o'ziga xos qiyinchiliklarni ham keltirib chiqaradi. Ushbu keng qamrovli qo'llanmada biz ushbu o'zgarishning sabablari, afzalliklari va kamchiliklari hamda kengaytmangiz uchun silliq o'tishni ta'minlaydigan migratsiya jarayonining batafsil tavsifini ko'rib chiqamiz.

Nima uchun Service Workerlarga o'tish kerak?

Ushbu o'tishning asosiy sababi brauzer unumdorligi va xavfsizligini yaxshilashdir. Manifest V2 (MV2) da keng tarqalgan bo'lgan doimiy fon sahifalari, hatto bo'sh turganda ham sezilarli resurslarni iste'mol qilishi mumkin, bu batareya quvvati va umumiy brauzerning javob berish qobiliyatiga ta'sir qiladi. Boshqa tomondan, Service Workerlar hodisalarga asoslangan va faqat kerak bo'lganda faol bo'ladi.

Service Workerlarning afzalliklari:

• Yaxshilangan unumdorlik: Service Workerlar faqat API chaqiruvi yoki kengaytmaning boshqa qismidan kelgan xabar kabi hodisa ularni ishga tushirganda faol bo'ladi. Bu "hodisalarga asoslangan" tabiat resurslar sarfini kamaytiradi va brauzer unumdorligini oshiradi.
• Kuchaytirilgan xavfsizlik: Service Workerlar cheklanganroq muhitda ishlaydi, bu hujum yuzasini kamaytiradi va kengaytmaning umumiy xavfsizligini yaxshilaydi.
• Kelajakka tayyorlik: Aksariyat yirik brauzerlar kengaytmalardagi fon jarayonlari uchun standart sifatida Service Workerlarga o'tmoqda. Hozir migratsiya qilish kengaytmangizning mosligini ta'minlaydi va kelajakdagi eskirish muammolarining oldini oladi.
• Bloklanmaydigan amallar: Service Workerlar asosiy oqimni bloklamasdan fonda vazifalarni bajarish uchun mo'ljallangan, bu esa foydalanuvchi tajribasini silliqroq qiladi.

Kamchiliklar va qiyinchiliklar:

• O'rganish jarayoni: Service Workerlar doimiy fon sahifalariga o'rganib qolgan ishlab chiquvchilar uchun qiyin bo'lishi mumkin bo'lgan yangi dasturlash modelini taqdim etadi. Hodisalarga asoslangan tabiat holatni boshqarish va aloqa qilish uchun boshqacha yondashuvni talab qiladi.
• Doimiy holatni boshqarish: Service Worker faollashuvlari davomida doimiy holatni saqlab qolish ehtiyotkorlikni talab qiladi. Storage API yoki IndexedDB kabi texnikalar juda muhim bo'lib qoladi.
• Nosozliklarni tuzatishning murakkabligi: Service Workerlarni tuzatish ularning vaqti-vaqti bilan ishlashi tufayli an'anaviy fon sahifalarini tuzatishdan ko'ra murakkabroq bo'lishi mumkin.
• DOMga cheklangan kirish: Service Workerlar DOMga bevosita kira olmaydi. Veb-sahifalar bilan o'zaro ishlash uchun ular kontent skriptlari bilan aloqa qilishlari kerak.

Asosiy tushunchalarni anglash

Migratsiya jarayoniga kirishishdan oldin, Service Workerlar ortidagi asosiy tushunchalarni tushunib olish muhim:

Hayotiy siklni boshqarish

Service Workerlar quyidagi bosqichlardan iborat bo'lgan o'ziga xos hayotiy siklga ega:

• O'rnatish: Service Worker kengaytma birinchi marta yuklanganda yoki yangilanganda o'rnatiladi. Bu statik resurslarni keshlash va dastlabki sozlash vazifalarini bajarish uchun ideal vaqt.
• Faollashtirish: O'rnatilgandan so'ng, Service Worker faollashtiriladi. Bu nuqtada u hodisalarni qayta ishlashni boshlashi mumkin.
• Bo'sh turish: Service Worker bo'sh turadi va uni ishga tushiradigan hodisalarni kutadi.
• Tugatish: Service Worker endi kerak bo'lmaganda tugatiladi.

Hodisalarga asoslangan arxitektura

Service Workerlar hodisalarga asoslangan, ya'ni ular faqat ma'lum hodisalarga javoban kodni bajaradi. Umumiy hodisalar quyidagilarni o'z ichiga oladi:

• install: Service Worker o'rnatilganda ishga tushadi.
• activate: Service Worker faollashtirilganda ishga tushadi.
• fetch: Brauzer tarmoq so'rovini amalga oshirganda ishga tushadi.
• message: Service Worker kengaytmaning boshqa qismidan xabar olganda ishga tushadi.

Jarayonlararo aloqa

Service Workerlar kengaytmaning kontent skriptlari va popup skriptlari kabi boshqa qismlari bilan aloqa qilish usuliga muhtoj. Bu odatda chrome.runtime.sendMessage va chrome.runtime.onMessage APIlari yordamida amalga oshiriladi.

Qadamma-qadam migratsiya qo'llanmasi

Keling, oddiy brauzer kengaytmasini doimiy fon sahifasidan Service Workerga ko'chirish jarayonini ko'rib chiqamiz.

1-qadam: Manifest faylingizni yangilang (manifest.json)

Birinchi qadam manifest.json faylingizni Service Workerga o'tishni aks ettirish uchun yangilashdir. `"background"` maydonini olib tashlang va uni `"service_worker"` xususiyatini o'z ichiga olgan `"background"` maydoni bilan almashtiring.

Manifest V2 misoli (Doimiy fon sahifasi):

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "permissions": [
    "storage",
    "activeTab"
  ]
}

Manifest V3 misoli (Service Worker):

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "storage",
    "activeTab"
  ]
}

Muhim jihatlar:

• manifest_version 3 ga o'rnatilganligiga ishonch hosil qiling.
• "service_worker" xususiyati Service Worker skriptingizga yo'lni ko'rsatadi.

2-qadam: Fon skriptingizni qayta ishlang (background.js)

Bu migratsiya jarayonidagi eng muhim qadamdir. Fon skriptingizni Service Workerlarning hodisalarga asoslangan tabiatiga moslashtirish uchun qayta ishlashingiz kerak.

1. Doimiy holat o'zgaruvchilarini olib tashlang

MV2 fon sahifalarida siz turli hodisalar bo'yicha holatni saqlash uchun global o'zgaruvchilarga tayanasiz. Biroq, Service Workerlar bo'sh turganda to'xtatiladi, shuning uchun global o'zgaruvchilar doimiy holat uchun ishonchli emas.

Misol (MV2):

var counter = 0;

chrome.browserAction.onClicked.addListener(function(tab) {
  counter++;
  console.log("Counter: " + counter);
});

Yechim: Storage API yoki IndexedDB dan foydalaning

Storage API (chrome.storage.local yoki chrome.storage.sync) ma'lumotlarni doimiy ravishda saqlash va olish imkonini beradi. IndexedDB murakkabroq ma'lumotlar tuzilmalari uchun yana bir variantdir.

Misol (MV3, Storage API bilan):

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.storage.local.get(['counter'], function(result) {
    var counter = result.counter || 0;
    counter++;
    chrome.storage.local.set({counter: counter}, function() {
      console.log("Counter: " + counter);
    });
  });
});

Misol (MV3, IndexedDB bilan):

// IndexedDB ma'lumotlar bazasini ochish funksiyasi
function openDatabase() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('myDatabase', 1);

    request.onerror = (event) => {
      reject('Error opening database');
    };

    request.onsuccess = (event) => {
      resolve(event.target.result);
    };

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      db.createObjectStore('myObjectStore', { keyPath: 'id' });
    };
  });
}

// IndexedDB dan ma'lumotlarni olish funksiyasi
function getData(db, id) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['myObjectStore'], 'readonly');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.get(id);

    request.onerror = (event) => {
      reject('Error getting data');
    };

    request.onsuccess = (event) => {
      resolve(request.result);
    };
  });
}

// IndexedDB ga ma'lumotlarni joylash funksiyasi
function putData(db, data) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['myObjectStore'], 'readwrite');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.put(data);

    request.onerror = (event) => {
      reject('Error putting data');
    };

    request.onsuccess = (event) => {
      resolve();
    };
  });
}

chrome.browserAction.onClicked.addListener(async (tab) => {
  try {
    const db = await openDatabase();
    let counterData = await getData(db, 'counter');
    let counter = counterData ? counterData.value : 0;

    counter++;

    await putData(db, { id: 'counter', value: counter });
    db.close();
    console.log("Counter: " + counter);

  } catch (error) {
    console.error("IndexedDB Error: ", error);
  }
});

2. Hodisa tinglovchilarini xabar almashish bilan almashtiring

Agar sizning fon skriptingiz kontent skriptlari yoki kengaytmaning boshqa qismlari bilan aloqa qilsa, siz xabar almashishdan foydalanishingiz kerak bo'ladi.

Misol (fon skriptidan kontent skriptiga xabar yuborish):

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.message === "get_data") {
      // Ma'lumotlarni olish uchun biror narsa qiling
      let data = "Example Data";
      sendResponse({data: data});
    }
  }
);

Misol (kontent skriptidan fon skriptiga xabar yuborish):

chrome.runtime.sendMessage({message: "get_data"}, function(response) {
  console.log("Received data: " + response.data);
});

3. `install` hodisasida ishga tushirish vazifalarini bajaring

install hodisasi Service Worker birinchi marta o'rnatilganda yoki yangilanganda ishga tushadi. Bu ma'lumotlar bazalarini yaratish yoki statik resurslarni keshlash kabi ishga tushirish vazifalarini bajarish uchun eng zo'r joy.

Misol:

chrome.runtime.onInstalled.addListener(function() {
  console.log("Service Worker installed.");
  // Ishga tushirish vazifalarini shu yerda bajaring
  chrome.storage.local.set({initialized: true});
});

4. Offscreen hujjatlarni ko'rib chiqing

Manifest V3 fon sahifalarida ilgari DOMga kirishni talab qiladigan vazifalarni, masalan, audio ijro etish yoki vaqtinchalik xotira bilan ishlashni boshqarish uchun offscreen (ekrandan tashqari) hujjatlarni taqdim etdi. Ushbu hujjatlar alohida kontekstda ishlaydi, lekin service worker nomidan DOM bilan o'zaro aloqa qila oladi.

Agar sizning kengaytmangiz DOMni keng miqyosda o'zgartirishi yoki xabar almashish va kontent skriptlari bilan osonlikcha erishib bo'lmaydigan vazifalarni bajarishi kerak bo'lsa, offscreen hujjatlar to'g'ri yechim bo'lishi mumkin.

Misol (Offscreen hujjat yaratish):

// Fon skriptingizda:
async function createOffscreen() {
  if (await chrome.offscreen.hasDocument({
    reasons: [chrome.offscreen.Reason.WORKER],
    justification: 'reason for needing the document'
  })) {
    return;
  }
  await chrome.offscreen.createDocument({
    url: 'offscreen.html',
    reasons: [chrome.offscreen.Reason.WORKER],
    justification: 'reason for needing the document'
  });
}

chrome.runtime.onStartup.addListener(createOffscreen);
chrome.runtime.onInstalled.addListener(createOffscreen);

Misol (offscreen.html):

<!DOCTYPE html>
<html>
<head>
  <title>Offscreen Document</title>
</head>
<body>
  <script src="offscreen.js"></script>
</body>
</html>

Misol (offscreen.js, offscreen hujjatida ishlaydi):

// Service workerdan kelgan xabarlarni tinglash
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'doSomething') {
    // Bu yerda DOM bilan biror narsa qiling
    document.body.textContent = 'Action performed!';
    sendResponse({ result: 'success' });
  }
});

3-qadam: Kengaytmangizni sinchkovlik bilan sinab ko'ring

Fon skriptingizni qayta ishlagandan so'ng, kengaytmangiz yangi Service Worker muhitida to'g'ri ishlashini ta'minlash uchun uni sinchkovlik bilan sinab ko'rish juda muhim. Quyidagi sohalarga alohida e'tibor bering:

• Holatni boshqarish: Doimiy holatingiz Storage API yoki IndexedDB yordamida to'g'ri saqlanayotgani va olinayotganini tekshiring.
• Xabar almashish: Xabarlar fon skripti, kontent skriptlari va popup skriptlari o'rtasida to'g'ri yuborilayotgani va qabul qilinayotganiga ishonch hosil qiling.
• Hodisalarni qayta ishlash: Barcha hodisa tinglovchilarining kutilganidek ishga tushishini tekshiring.
• Unumdorlik: Kengaytmangizning ortiqcha resurslar sarflamayotganini ta'minlash uchun uning unumdorligini kuzatib boring.

4-qadam: Service Workerlarni tuzatish

Service Workerlarni tuzatish ularning vaqti-vaqti bilan ishlashi tufayli qiyin bo'lishi mumkin. Service Worker-ni tuzatishga yordam beradigan ba'zi maslahatlar:

• Chrome DevTools: Service Worker-ni tekshirish, konsol jurnallarini ko'rish va to'xtash nuqtalarini o'rnatish uchun Chrome DevTools-dan foydalaning. Service Worker-ni "Application" yorlig'i ostida topishingiz mumkin.
• Doimiy konsol jurnallari: Service Worker-ning bajarilish oqimini kuzatib borish uchun console.log iboralaridan keng foydalaning.
• To'xtash nuqtalari: Bajarilishni to'xtatib turish va o'zgaruvchilarni tekshirish uchun Service Worker kodingizda to'xtash nuqtalarini o'rnating.
• Service Worker inspektori: Service Worker-ning holati, hodisalari va tarmoq so'rovlarini ko'rish uchun Chrome DevTools-dagi Service Worker inspektoridan foydalaning.

Service Worker migratsiyasi uchun ilg'or tajribalar

Brauzer kengaytmangizni Service Workerlarga ko'chirayotganda quyidagi ilg'or tajribalarga amal qiling:

• Erta boshlang: Service Workerlarga ko'chishni oxirgi daqiqagacha kutmang. Kodingizni qayta ishlash va kengaytmangizni sinab ko'rish uchun o'zingizga yetarli vaqt berish uchun migratsiya jarayonini imkon qadar tezroq boshlang.
• Vazifani qismlarga bo'ling: Migratsiya jarayonini kichikroq, boshqariladigan vazifalarga bo'ling. Bu jarayonni kamroq qo'rqinchli va kuzatishni osonlashtiradi.
• Tez-tez sinab ko'ring: Xatolarni erta aniqlash uchun migratsiya jarayonida kengaytmangizni tez-tez sinab ko'ring.
• Doimiy holat uchun Storage API yoki IndexedDB dan foydalaning: Doimiy holat uchun global o'zgaruvchilarga tayanmang. Buning o'rniga Storage API yoki IndexedDB dan foydalaning.
• Aloqa uchun xabar almashishdan foydalaning: Fon skripti, kontent skriptlari va popup skriptlari o'rtasida aloqa qilish uchun xabar almashishdan foydalaning.
• Kodingizni optimallashtiring: Resurslar sarfini minimallashtirish uchun kodingizni unumdorlik uchun optimallashtiring.
• Offscreen hujjatlarni ko'rib chiqing: Agar DOMni keng miqyosda o'zgartirishingiz kerak bo'lsa, offscreen hujjatlardan foydalanishni ko'rib chiqing.

Xalqarolashtirish (Internationalization) masalalari

Global auditoriya uchun brauzer kengaytmalari ishlab chiqayotganda, xalqarolashtirish (i18n) va mahalliylashtirishni (l10n) hisobga olish juda muhim. Kengaytmangiz butun dunyo bo'ylab foydalanuvchilar uchun qulay bo'lishini ta'minlash uchun ba'zi maslahatlar:

• _locales jildidan foydalaning: Kengaytmangizning tarjima qilingan satrlarini _locales jildida saqlang. Bu jild har bir qo'llab-quvvatlanadigan til uchun kichik jildlarni o'z ichiga oladi, ularda tarjimalarni o'z ichiga olgan messages.json fayli mavjud.
• __MSG_messageName__ sintaksisidan foydalaning: Kodingiz va manifest faylingizda tarjima qilingan satrlarga havola qilish uchun __MSG_messageName__ sintaksisidan foydalaning.
• O'ngdan-chapga (RTL) tillarni qo'llab-quvvatlang: Kengaytmangizning joylashuvi va uslubi arab va ibroniy kabi RTL tillariga to'g'ri moslashishini ta'minlang.
• Sana va vaqt formatlashni hisobga oling: Har bir hudud uchun tegishli sana va vaqt formatidan foydalaning.
• Madaniy jihatdan mos kontentni taqdim eting: Kengaytmangizning kontentini turli mintaqalar uchun madaniy jihatdan mos bo'lishi uchun moslashtiring.

Misol (_locales/en/messages.json):

{
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension"
  },
  "buttonText": {
    "message": "Click Me",
    "description": "The text for the button"
  }
}

Misol (kodingizda tarjima qilingan satrlarga havola qilish):

document.getElementById('myButton').textContent = chrome.i18n.getMessage("buttonText");

Xulosa

Brauzer kengaytmangizning fon skriptini JavaScript Service Workerga ko'chirish - bu unumdorlik, xavfsizlikni yaxshilash va kengaytmangizni kelajakka tayyorlash yo'lidagi muhim qadamdir. Garchi bu o'tish ba'zi qiyinchiliklarni keltirib chiqarishi mumkin bo'lsa-da, uning afzalliklari sarflangan harakatlarga arziydi. Ushbu qo'llanmada keltirilgan qadamlarga rioya qilish va ilg'or tajribalarni qo'llash orqali siz silliq va muvaffaqiyatli migratsiyani ta'minlab, butun dunyo bo'ylab foydalanuvchilaringizga yaxshiroq tajriba taqdim etishingiz mumkin. Service Workerlarning kuchidan to'liq foydalanish uchun sinchkovlik bilan sinovdan o'tkazishni va yangi hodisalarga asoslangan arxitekturaga moslashishni unutmang.

Qo'shimcha manbalar

• Chrome Kengaytmasi Manifest V3 Hujjatlari
• Mozilla Service Worker API Hujjatlari
• Service Worker Asoslari