Service worker là gì? Khi làm công việc service worker cần chú ý đến những vấn đề nào? Đây là một trong số những thắc mắc của nhiều bạn đọc trong thời gian gần đây khi nhắc đến công việc service worker.
Để giúp bạn hiểu rõ hơn về công việc này, Chúng tôi đã tổng hợp các thông tin liên quan đến service worker trong bài viết sau đây, theo dõi ngay để có được câu trả lời chính xác nhất cho những thắc mắc của mình nhé.
Service worker là gì?
Service worker được nhiều người biết đến là một tệp phương trình được viết bằng ngôn ngữ lập trình javascript, được browser chạy ngầm và tách biệt khỏi trang web. service worker giúp mở ra cánh cửa cho các tính năng không đòi hỏi về giao diện hoặc tương tác với người dùng ví dụ như: đồng bộ ngầm và push notifications, v.v.
Trong tương lai không xa, service worker sẽ hỗ trợ định vị địa lý hoặc đồng bộ định kỳ, nắm bắt được khả năng xử lý các request trên mạng và có thể quản lý việc cache các response trả về. Nhờ đó, có thể chạy được website trong trường hợp không có mạng.
Cụ thể hơn service worker hội tụ các điểm sau:
- Service worker là một file javascript không có sự can thiệp trực tiếp và DOM của website, thay vào đó quá trình giao tiếp sẽ thông qua các page của một giao diện đặc biệt, đồng thời tương tác với DOM thông qua các page đó.
- SW còn là một mạng có thể lập trình được, nó cho phép chúng ta điều khiển cách mà các request sẽ thực hiện xử lý.
- Tự động tắt khi không dùng đến và khởi động lại khi cần.
- service worker rộng rãi khái niệm Promise.
Vòng đời của service workers
Để cài đặt service worker của một trang web, bạn cần đăng ký nó bằng javascript của trang web. Khi đăng ký đăng ký thành công sẽ bắt đầu đăng ký SW ngầm, ở bước này nếu muốn bạn có thể cache các assets tĩnh, khi cache hoàn thành có nghĩa SW được cài đặt hoàn chỉnh.
Trong trường hợp các tệp không được cache thành công hoặc không tải thành công thì SW worker sẽ không thể cài đặt được và không active, sau khi cài đặt sw thành công sẽ qua bước giai đoạn active.
Đối với giai đoạn active sw bạn cần tiến hành điều khiển web page trong phạm vi cho phép của nó. Khi sw nắm được quyền điều khiển nó sẽ rơi vào 2 trạng thái cụ thể:
- SW sẽ kết thúc luôn để tối ưu bộ nhớ hoặc xử lý việc tìm kiếm và hiển thị các event khi có yêu cầu qua mạng.
- Hoặc notification diễn ra.
Vai trò của service worker là gì?
- Kiểm soát Network Traffic: Dễ dàng quản lý các Network Traffic của trang và can thiệp vào nếu cầu thiết.
- Cache: Có thể cache bất cứ cặp request/response nào với service workers và Cache API. Cuối cùng là access những nội dung offline này bất cứ lúc nào.
- Quản lý push notification: Dễ dàng hơn trong việc quản lý push notification với service worker và hiển thị tin nhắn đến người dùng.
- Không có kết nối vẫn sử dụng được: Trong trường hợp bị mất kết nối vẫn có thể start bất kỳ process nào thông qua Background Sync và service worker.
- Không thể access object window: Mặc dù không thể quản lý DOM element nhưng vẫn có thể giao tiếp với window thông qua postMessage và process nếu muốn.
- Không thể làm việc trên port 80: Hiện tại service worker chỉ có thể làm việc trong trên giao thức HTTPS, ngoài ra bạn cũng có thể làm việc trên localhost trong quá trình phát triển.
Đăng ký sw. như thế nào?
Để đăng ký SW bạn cần đăng ký thông qua javascript ở trang web, cách này giúp bạn thông báo với browser cách đặt file service worker.
if (‘serviceWorker’ in navigator) {
window.addEventListener(‘load’, function() {
navigator.serviceWorker.register(‘/sw.js’).then(function(registration) {
// Registration was successful
console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope);
}, function(err) {
// registration failed 🙁
console.log(‘ServiceWorker registration failed: ‘, err);
});
});
}
Đoạn code trên giúp bạn kiểm tra sự hỗ trợ của browser với sw, trong trường hợp có hỗ trợ sẽ tiến hành đăng ký file SW khi trang được chạy.
Thông qua đó, bạn có thể gọi giao thức register () mà không phải quan tâm SW đã cài đặt hay chưa, browser sẽ biết SW đã được cài đặt theo yêu cầu hay chưa hoặc không cần chạy theo phương thức trên. Trong quá trình đăng ký bạn cần lưu ý đến phạm vi của nó.
Hướng dẫn cơ bản về sử dụng worker service
Cách cài đặt service worker
Sử dụng đoạn code sau đây để cài đặt service worker:
const PRECACHE = “my-precache-v1”;
const RUNTIME = “my-runtime”; // A list of local resources want to be cached.
const PRECACHE_URLS = [
“index.html”,
“./”, // Alias for index.html
“style.css”,
“main.js”,
];
// The install handler takes care of precaching the resources we always need.
self.addEventListener(“install”, (event) => {
event.waitUntil(
caches
.open(PRECACHE)
.then((cache) => cache.addAll(PRECACHE_URLS))
.then(self.skipWaiting())
);
});
Mục đích chính của việc cài đặt là để lưu các resources được định nghĩa ở array PRECACHE_URLS vào bộ nhớ đệm cache với tên định nghĩa PRECACHE. Sau khi đã lưu thành công tất cả các resources cần thiết, bạn dùng hàm self.skipWaiting() để dừng tiến trình công việc hiện tại và chuyển sang thực hiện công việc tiếp theo.
Cách kích hoạt service worker
Sử dụng đoạn code sau đây để kích hoạt service worker:
// The activate handler takes care of cleaning up old caches.
self.addEventListener(“activate”, (event) => {
const currentCaches = [PRECACHE, RUNTIME];
event.waitUntil(
caches
.keys()
.then((cacheNames) => {
return cacheNames.filter(
(cacheName) => !currentCaches.includes(cacheName)
);
})
.then((cachesToDelete) => {
return Promise.all(
cachesToDelete.map((cacheToDelete) => {
return caches.delete(cacheToDelete);
})
);
})
.then(() => self.clients.claim())
);
});
Mục đích của công việc này là xóa các bộ nhớ đệm cache cũ, giữa lại các cache mới và cuối cùng là kích hoạt service worker.
Xử lý lệnh fetch như thế nào?
Đoạn code được dùng để xử lý lệnh fetch:
/*
* The fetch handler serves responses for same-origin resources from a cache.
* If no response is found, it populates the runtime cache with the response
* from the network before returning it to the page.
*/
self.addEventListener(“fetch”, (event) => {
// Skip cross-origin requests, like those for Google Analytics.
if (event.request.url.startsWith(self.location.origin)) {
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse;
}
return caches.open(RUNTIME).then((cache) => {
return fetch(event.request).then((response) => {
// Put a copy of the response in the runtime cache.
return cache.put(event.request, response.clone()).then(() => {
return response;
});
});
});
})
);
}
});
Quy trình xử lý lệnh fetch như sau:
- Bước 1: Khi có request được yêu cầu từ phía trình duyệt nếu URL không thuộc cùng trang web có thể bỏ qua.
- Bước 2: Nếu trùng URL cần thực hiện kiểm tra bộ nhớ cache để xem đã có response tương ứng hay chưa. Trường hợp tồn tại trả về response đó cho trình duyệt.
- Bước 4: Ngược lại, gửi request lên server rồi lấy response trả về.
- Bước 5: Thực hiện clone response rồi lưu vào RUNTIME cache để thực hiện cho lần request tiếp theo, sau đó trả về response đó cho trình duyệt.
Đọc thêm: Các Vị Trí Trong Ngành Công Nghệ Thông Tin
Lời kết
Trên đây là toàn bộ những thông tin về service worker là gì mà Chúng tôi muốn chia sẻ đến bạn đọc. Hy vọng những chia sẻ trên của chúng tôi sẽ giúp bạn hiểu rõ hơn về service worker và những thông tin liên quan đến nó.
Vietnamese 
English