Aplikasi berbasis web semakin " dipertajam " untuk perangkat seluler dan pekerja layanan adalah dasar dari aplikasi berbasis web canggih (PWA). Saat pertama kali melihat teknologi ini, Anda mungkin mendapat kesan bahwa tugas utama service worker adalah menyimpan konten ke dalam cache. Dan begitulah adanya. Tugas pekerja layanan adalah memastikan berfungsinya aplikasi web dalam kondisi koneksi yang tidak stabil atau sama sekali tidak ada ke Jaringan, yang dicapai dengan menggunakan cache data.
Di bawah pemotongan, beberapa pemikiran tentang konsekuensi untuk aplikasi web munculnya kemampuan untuk menyimpan data melalui pekerja layanan telah menyebabkan.
Arsitektur PWA
Berikut adalah arsitektur tiga tingkat klasik dari aplikasi web:
Menambahkan pekerja layanan dan alat persistensi data ( Cache API dan IndexedDB ) pada klien mengubah arsitektur tiga tingkat menjadi arsitektur lima tingkat:
Faktanya, jika tidak ada koneksi ke Jaringan, aplikasi web progresif harus berjalan di klien dalam mode tiga tingkat klasik:
dan ketika koneksi ke Jaringan muncul, lanjutkan ke lima tingkat:
- Presentasi (Utas Utama) : antarmuka pengguna;
- Logika Klien (Pekerja Layanan) : logika bisnis untuk memproses data pengguna tertentu, dengan mempertimbangkan pekerjaan dalam mode offline & online;
- Data Klien (Cache API & IndexedDB) : penyimpanan data khusus pengguna;
- Server Logic (Server): - ;
- Server Data (DB): ;
Offline first
web- mobile first. PWA — offline first. , ( ), .
, service worker' , . — . — (online/offline) .
, offline- — , ( - ) - , .
:
- : , (HTML/CSS/JS/images/...);
- (API): ( , JSON), ( ), ( );
() Cache API — "" — ""
(API) — IndexedDB (NoSQL JSON).
Cache
Chrome' Application / Cache / Cache Storage / < >, :
, , CDN , .
IndexedDB
Chrome' Application / Storage / IndexedDB / < > / < >, :
CRUD-, , . IndexedDB . , .
, .
service worker'
- service worker' . ( webpack') . service worker' WorkerGlobalScope.importScripts(). , . service worker' :
import('/modules/my-module.js')
.then((module) => {
// Do something with the module.
});, service worker', . — service worker web- offline-, .
service worker' ( IndexedDB) (PWA offline) ( — — ). Online- PWA "" : Client Logic/Data — Server Logic/Data. - web- : , , (, ACL ).
service worker' - service worker' (, ES6 import), service worker' , - Main Thread ( ).
web-, , :
Service worker . , online offline (.. ).
Di atas mungkin tampak sedikit membingungkan bagi sebagian orang, tetapi sebelum menulis artikel ini, pemahaman saya tentang peran pekerja layanan dalam aplikasi web progresif bahkan lebih membingungkan. Saya akan berterima kasih atas komentar yang semakin memperjelas tugas pekerja layanan dan cara menggunakannya.