Bermula dengan pekerja perkhidmatan

Pekerja Perkhidmatan: Aplikasi Web Luar Talian dan Beyond

Artikel ini meneroka pekerja perkhidmatan, skrip latar belakang yang membolehkan ciri -ciri seperti pemberitahuan push dan fungsi luar talian dengan memintas permintaan rangkaian. Kami akan meliputi teknik pendaftaran, caching, pengemaskinian, dan debug.

Konsep Utama:

• Operasi Latar Belakang: Pekerja perkhidmatan berjalan secara bebas dari laman web, walaupun tapak ditutup. Mereka berkomunikasi dengan halaman melalui postMessage.
• Secure Origins: Pekerja perkhidmatan memerlukan https (atau localhost) atas alasan keselamatan. Pendaftaran berbilang dikendalikan secara automatik oleh penyemak imbas. (chrome://serviceworker-internals untuk pemeriksaan).
• Pengendalian Acara: Mereka bertindak balas terhadap peristiwa seperti install, activate, dan fetch, yang membolehkan kawalan ke atas permintaan caching dan rangkaian.
• Caching: Komponen laman web Cache Web Service, membolehkan akses luar talian pada lawatan berikutnya.
• Debugging: Debugging adalah ciri eksperimen (membolehkan dalam Chrome Devtools). Unregistration manual boleh dilakukan melalui chrome://serviceworker-internals/.

Bermula: Pendaftaran

Mendaftarkan pekerja perkhidmatan melibatkan pemeriksaan sokongan penyemak imbas dan menggunakan navigator.serviceWorker.register(). Parameter scope mentakrifkan laluan URL kawalan pekerja.

if (navigator.serviceWorker) {
    navigator.serviceWorker.register('./service-worker.js', {scope: './about'})
        .then(registration => console.log(registration))
        .catch(e => console.error(e));
} else {
    console.log('Service Worker not supported.');
}

Pemasangan dan pengaktifan: Acara

mencetuskan pada pertemuan pertama.

Menandakan kawalan pekerja. Perhatikan bahawa pembalakan dalam pekerja perkhidmatan memerlukan debugging di devtools. install activate

self.addEventListener('install', event => console.log(event));
self.addEventListener('activate', event => console.log(event));

Memintas permintaan rangkaian:

Acara

membolehkan permintaan memintas. Kami boleh melayani kandungan cache atau permintaan ke hadapan ke pelayan.

memuat skrip luaran (mis., Cache-polyfill untuk keserasian yang lebih luas). fetch importScripts()

importScripts('js/cache-polyfill.js');
const CACHE_VERSION = 'app-v1';
const CACHE_FILES = [ '/', 'images/background.jpeg', 'js/app.js', 'css/styles.css', 'https://fonts.googleapis.com/css?family=Roboto:100' ];

self.addEventListener('install', event => {
    event.waitUntil(caches.open(CACHE_VERSION).then(cache => cache.addAll(CACHE_FILES)));
});

self.addEventListener('fetch', event => {
    event.respondWith(caches.match(event.request).then(res => res || requestBackend(event)));
});

function requestBackend(event) {
    const url = event.request.clone();
    return fetch(url).then(res => {
        if (!res || res.status !== 200 || res.type !== 'basic') return res;
        const response = res.clone();
        caches.open(CACHE_VERSION).then(cache => cache.put(event.request, response));
        return res;
    });
}

kemas kini cache:

Mengemas kini cache memerlukan kenaikan

. Pekerja perkhidmatan baru menunggu sehingga semua halaman terkawal ditutup sebelum mengaktifkan, membersihkan versi cache lama dalam acara

. CACHE_VERSION activate

self.addEventListener('activate', event => {
    event.waitUntil(caches.keys().then(keys => Promise.all(keys.map(key => (key !== CACHE_VERSION ? caches.delete(key) : null)))));
});

Debugging:

Membolehkan Debugging Pekerja Perkhidmatan di Chrome Devtools (Bendera, Eksperimen). Panel Resources memaparkan pekerja berdaftar, yang membolehkan pendaftaran manual.

Soalan -soalan yang sering ditanya:

Bahagian ini merangkumi jawapan kepada soalan umum tentang pekerja perkhidmatan, yang meliputi perbezaan dari pekerja web, strategi ujian, pengendalian permintaan HTTP, mekanisme kemas kini, kesesuaian data masa nyata, kaedah debugging, keserasian API, aspek keselamatan, sokongan pelayar, dan pendaftaran Prosedur.

Output yang disemak ini mengekalkan lokasi dan format imej asal, sementara dengan ketara menuliskan teks untuk kejelasan dan aliran yang lebih baik, mengelakkan plagiarisme langsung. Maklumat utama tetap sama.

Atas ialah kandungan terperinci Bermula dengan pekerja perkhidmatan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!