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ề việc làm này, Glints đã tổng hợp những thông tin tương quan đến service worker trong bài viết sau đây, theo dõi ngay để có được câu vấn đáp đúng chuẩn nhất cho những vướng mắc của mình nhé .
Tóm Tắt
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ẽ tương hỗ xác định địa lý hoặc đồng điệu định kỳ, chớp lấy được năng lực giải quyết và xử lý những request trên mạng và hoàn toàn có thể quản trị việc cache những response trả về. Nhờ đó, hoàn toàn có thể chạy được website trong trường hợp không có mạng .
Cụ thể hơn service worker quy tụ những đ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.
Cách hoạt động của service worker (credit: SessionStack Blog)
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 những tệp không được cache thành công xuất sắc hoặc không tải thành công xuất sắc thì SW worker sẽ không hề thiết lập được và không active, sau khi setup sw thành công xuất sắc sẽ qua bước tiến trình active .
Đối với quá trình active sw bạn cần triển khai tinh chỉnh và điều khiển web page trong khoanh vùng phạm vi được cho phép của nó. Khi sw nắm được quyền tinh chỉnh và điều khiển nó sẽ rơi vào 2 trạng thái đơn cử :
- 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?
Để ĐK SW bạn cần ĐK trải qua javascript ở website, cách này giúp bạn thông tin 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ự tương hỗ của browser với sw, trong trường hợp có tương hỗ sẽ triển khai ĐK file SW khi trang được chạy .
Thông qua đó, bạn hoàn toàn có thể gọi giao thức register ( ) mà không phải chăm sóc SW đã thiết lập hay chưa, browser sẽ biết SW đã được thiết lập theo nhu yếu hay chưa hoặc không cần chạy theo phương pháp trên. Trong quy trình ĐK bạn cần chú ý quan tâm đến khoanh vùng 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 để setup 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 ”, ( sự kiện ) => {
sự kiện. waitUntil (
caches
. open ( PRECACHE )
. then ( ( cache ) => cache. addAll ( PRECACHE_URLS ) )
. then ( self. skipWaiting ( ) )
) ;
} ) ;
Mục đích chính của việc thiết lập là để lưu những 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 xuất sắc tổng thể những resources thiết yếu, bạn dùng hàm self. skipWaiting ( ) để dừng tiến trình việc làm hiện tại và chuyển sang triển khai việc làm tiếp theo .
Sử dụng service worker như thế nào?
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 ”, ( sự kiện ) => {
const currentCaches = [ PRECACHE, RUNTIME ] ;
sự kiện. 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 việc làm này là xóa những bộ nhớ đệm cache cũ, giữa lại những cache mới và ở đầu cuối là kích hoạt service worker .
Xử lý lệnh fetch như thế nào?
Đoạn code được dùng để giải quyết và 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 ”, ( sự kiện ) => {
/ / Skip cross-origin requests, like those for Google Analytics .
if ( event.request.url. startsWith ( self.location.origin ) ) {
sự kiện. 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 giải quyết và 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à 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 dụng so với bạn ?
Đánh giá trung bình 0 / 5. Lượt nhìn nhận : 0 Chưa có nhìn nhận nào ! Hãy là người tiên phong nhìn nhận bài viết. Chúng tôi rất buồn khi bài viết không hữu dụng với bạn Hãy giúp chúng tôi cải tổ bài viết này ! Làm sao để chúng tôi cải tổ bài viết này ?
Tác Giả
Source: https://final-blade.com
Category : Kiến thức Internet
