Home » Thế Giới Công Sở » Service Worker Là Gì? Các Chú Ý Khi Làm Việc Với Service Worker
Home » Thế Giới Công Sở » Service Worker Là Gì? Các Chú Ý Khi Làm Việc Với Service Worker
Ngày đăng: 21/11/2022 | Không có phản hồi
Ngày cập nhật: 19/11/2022
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, Glints đã 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é.
Mục Lục
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:
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ể:
Vai trò của service worker là gì?
Đă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
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.
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.
Đ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:
Đọ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à Glints 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ó.
Bài viết có hữu ích đối với bạn?
Đánh giá trung bình 0 / 5. Lượt đánh giá: 0
Chưa có đánh giá nào! Hãy là người đầu tiên đánh giá bài viết.
Chúng tôi rất buồn khi bài viết không hữu ích với bạn
Hãy giúp chúng tôi cải thiện bài viết này!
Làm sao để chúng tôi cải thiện bài viết này?
Tác Giả
PREVIOUS
NEXT
Có thể bạn cũng thích
Workaholic là gì? Dấu Hiệu Cho Thấy Bạn Là Một Người Workaholic
Ngoc Bich – 04/01/2023
Tham Vọng Là Gì? Hai Mặt Của Tham Vọng Đối Với Sự Nghiệp Của Mỗi Người
Glints Writers – 04/01/2023
Tìm Hiểu Công Việc Nhân Viên Đánh Máy Tại Nhà Và Thu Nhập Chi Tiết
Glints Writers – 03/01/2023
Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Glints là nền tảng tuyển dụng dẫn đầu sứ mệnh hỗ trợ doanh nghiệp thành lập đội ngũ hàng đầu tại Châu Á, và đồng hành trên con đường theo đuổi đam mê nghề nghiệp của thế hệ nhân lực trẻ tài năng.
CÔNG TY
Địa chỉ: Tầng 6, Số 100, Đường Nguyễn Thị Minh Khai, Phường 06, Quận 3, Thành phố Hồ Chí Minh, Việt Nam
Email: vn-content@glints.com
Hotline: (028) 7100 3030
GIẢI PHÁP NHÂN SỰ
Glints dành cho Nhà tuyển dụng
KẾT NỐI CÙNG GLINTS
8.000+ việc làm đang chờ bạn
Home » Thế Giới Công Sở » Service Worker Là Gì? Các Chú Ý Khi Làm Việc Với Service Worker
