Rumah >hujung hadapan web >tutorial js >Pekerja Perkhidmatan

Pekerja Perkhidmatan

WBOYasal: 2024-08-09 07:28:421108semak imbas

Pekerja perkhidmatan ialah API Web yang boleh digunakan untuk tujuan "khusus" antara penyemak imbas, aplikasi dan Internet.

Service Workers

Pekerja perkhidmatan ialah skrip yang dijalankan di latar belakang aplikasi web, berasingan daripada urutan penyemak imbas utama. Mereka mendayakan pemberitahuan tolak, penyegerakan latar belakang dan keupayaan luar talian. Pekerja perkhidmatan bekerja sebagai perantara antara aplikasi web, penyemak imbas dan rangkaian. Berikut ialah contoh bagaimana dan bila pekerja perkhidmatan boleh digunakan:

1. Sokongan Luar Talian:

Pekerja perkhidmatan menyimpan sumber penting (HTML, CSS, JavaScript, imej) apabila pengguna mula-mula melawat tapak web.
Boleh mendapatkan semula daripada cache pada lawatan seterusnya, menyediakan keupayaan luar talian yang berterusan.

2. Pemberitahuan Tolak:

Pekerja perkhidmatan membenarkan anda menghantar pemberitahuan tolak walaupun aplikasi web tidak dibuka.
Pemberitahuan boleh dicetuskan oleh acara luaran atau kemas kini pelayan.

3. Penyegerakan Latar Belakang:

Pekerja perkhidmatan mendayakan penyegerakan latar belakang, yang membolehkan aplikasi mengemas kini data atau mengambil kandungan baharu di latar belakang.
Ini berguna untuk kemas kini data masa nyata.

4. Caching Kandungan Dinamik:

Pekerja perkhidmatan boleh cache kandungan secara dinamik berdasarkan gelagat pengguna pada halaman web.
Ini membantu menghantar kandungan yang kerap diakses dengan cepat.

5. Pengoptimuman Prestasi:

Pekerja perkhidmatan meningkatkan prestasi halaman web dengan ketara melalui aset dan sumber pra-cache.
Mereka boleh memuatkan sumber secara selektif berdasarkan gelagat pengguna dengan mengoptimumkan proses pemuatan.

6. Ambil Latar Belakang:

Pekerja perkhidmatan mendayakan pemuatan latar belakang, yang membolehkan memuat turun walaupun fail atau sumber yang besar.

Biasanya, apabila anda melawat halaman web, halaman web menghantar permintaan kepada pelayan dan pelayan menghantar semula data kepada anda:

Service Workers

Jika anda mempunyai pekerja Perkhidmatan yang didaftarkan, ia akan ditambahkan sebagai perisian tengah antara penyemak imbas web dan pelayan:

Service Workers

Ia menghentikan permintaan kepada pelayan dan memutuskan sama ada permintaan itu dihantar ke pelayan atau berfungsi di luar talian. Dan bukannya menunjukkan kepada anda halaman 404 Not Found dalam kes ini, anda akan dapat melihat keseluruhan halaman di luar talian. Anda juga boleh membuat halaman luar talian tersuai dengan pekerja perkhidmatan.

Jika tiada internet pada komputer anda, ia akan menunjukkan halaman ralat kepada anda.

Walaupun tiada Internet, kami akan mengakses halaman web dengan pekerja perkhidmatan.

Kitaran Hayat & Acara Pekerja Perkhidmatan

DAFTAR → PASANG → AKTIFKAN → AMBIL

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home</title>
    <!-- Scripts -->
    <script src="main.js" defer></script>
  </head>
  <body>
    <!-- istalgan kodlaringizni yozishingiz mumkin... -->
  </body>
</html>

kami menyambungkan fail main.js ke html.

utama.js

// service worker browser tomonidan support qilinishini tekshirib olamiz
if ('serviceWorker' in navigator) {
  // web sahifa browserga yuklanishi bilan ishlashini aytib o'tamiz
  window.addEventListener('load', () => {
    // 1. service workerni registratsiyadan o'tkazamiz.
    navigator.serviceWorker
      .register('sw.js') // bizda sm.js file ochib olishimiz kerak bo'ladi. va bu yerdagi register ushani target qiladi.
      .then((registration) =>
        console.log('Service Worker registered with scope:', registration.scope)
      )
      .catch((error) => {
        console.error('Service Worker registration failed:', error);
      });
  });
}

sw.js

// browser kashda qanday nom nilan saqlanishini bildirish uchun nom beramiz
const cacheName = 'my-cache-v1';

// Qaysi fayllarni kashlashini aytib o'tib ketamiz
const cacheFiles = ['index.html', 'posts.html', 'css/style.css', 'js/main.js'];

// 2. INSTALL qilamiz
self.addEventListener('install', (event) => {
  event.waitUntil(
        // kashdan biz bergan nom bilan joy ochadi va bizni fayllarimizni joylaydi.
    caches.open(cacheName).then((cache) => cache.addAll(cacheFiles))
  );
});

// 3. ACTIVATE qilish
self.addEventListener('activate', () => {
  console.log('Server worker activated');
});

// 4. FETCH, ya'ni oflayn holatimizda kashlangan fillarni ko'rsatish uchun olish
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches
      .match(event.request)
      .then((response) => response || fetch(event.request))
  );
});

Selepas melakukan ini, kita dapat melihat bahawa pengaktifan telah berlaku jika kita pergi ke lajur Aplikasi dalam bahagian alat pembangun penyemak imbas dan melihat bahagian Pekerja perkhidmatan.

Service Workers

Apabila kita pergi ke bahagian storan cache, kita akan mendapat fail yang kita tandakan dengan nama yang kita berikan.

Service Workers

Dan selepas melihat ini, kita boleh melihat hasilnya:

Seperti yang anda lihat, ia berfungsi di luar talian sekarang. Dalam keadaan luar talian, Pekerja Perkhidmatan sedang mengambil dari lokasi yang dibuka untuk kami dalam Storan Cache.

@abdulakhatov-dev
@AbdulakhatovDev

Atas ialah kandungan terperinci Pekerja Perkhidmatan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html Error register Event Thread JS background

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Mengapa TypeScript Lebih Baik Daripada JavaScript: Faedah Teratas untuk Pembangunan Web ModenArtikel seterusnya：Mengapa TypeScript Lebih Baik Daripada JavaScript: Faedah Teratas untuk Pembangunan Web Moden

Artikel berkaitan

Lihat lagi