Tìm hiểu Java Service Worker
Tìm hi u Service Workerể
Chào t c c các b n. Khi chúng ta m trình duy t Google Chrome ho c ấ ả ạ ở ệ ặ
Firefox thì s có xu t hi n thông báo t google, facebook ho c là youtobe... ẽ ấ ệ ừ ặ
Mà không c n m trang các trang web đó lên. Đ có th làm đ c nh v yầ ở ể ể ượ ư ậ
thì th ng mà chúng ta s tìm hi u sau đây là Service Worker có th đáp ng ằ ẽ ể ể ứ
đ c và gi i quy t đ c vi c đó. V y...ượ ả ế ượ ệ ậ
JavaScript Service Worker là gì?
Service Worker là m t script mà trình duy t ch y d i background, tách ộ ệ ạ ở ướ
kh i trang web và giúp th c hi n các tính năng không c n đ n trang web, ỏ ự ệ ầ ế
hay t ng tác ng i dùng. Service Worker có m t s đ c đi m quan tr ng ươ ườ ộ ố ặ ể ọ
là:
Không liên k t v i m t trang c th Không truy c p đ n DOM Có th ế ớ ộ ụ ể ậ ế ể
d ng khi không s d ng và ch y khi c n thi t. Ch h tr HTTPS V i ừ ử ụ ạ ầ ế ỉ ỗ ợ ớ
Service Worker chúng ta có th :ể
Làm cho trang web ch y nhanh h n và có th ch y offline Th c hi n m t ạ ơ ể ạ ự ệ ộ
s tính năng background nh : push message và background ố ở ư
synchronization. Có l đ n đây thì b n đã hi u ph n nào v JavaScript ẽ ế ạ ể ầ ề
Service Worker r i. Ti p theo, chúng ta s tìm hi u v cách s d ng nó.ồ ế ẽ ể ề ử ụ
Đăng ký JavaScript Service Worker
Gi s , tôi có m t trang web đ n gi n và c u trúc các t p tin nh sau:ả ử ộ ơ ả ấ ệ ư
index.html
service_worker.js
main.js
style.css
Lúc này, tôi s đăng ký Service Worker trong file main.js:ẽ
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service_worker.js')
.then(reg => {
console.log('Registered service worker');
}).catch(err => {
console.log('Register service worker failed', err);
});
}
Có m t s l u ý quan tr ng khi đăng ký Service Worker là:ộ ố ư ọ
V trí c a file service_worker.js quy t đ nh đ n URL c a các trang mà nó ị ủ ế ị ế ủ
đi u khi n. đây, tôi đ t file service_worker.js cùng th m c v i ề ể Ở ặ ư ụ ớ
index.html. Có nghĩa là Service Worker s qu n lý URL c a toàn b trang ẽ ả ủ ộ
web. Ng c l i, n u tôi đ t nó m t th m c khác, gi s là: ượ ạ ế ặ ở ộ ư ụ ả ử
/apps/service_worker.js thì Service Worker s ch qu n lý các URL b t đ u ẽ ỉ ả ắ ầ
t /apps/. Hàm đăng ký .register tr v m t Promise. Trang đăng ký Service ừ ả ề ộ
Worker ph i là HTTPS. Service Worker ph i n m trên cùng trang web đăng ả ả ằ
ký nó (same origin). Vì v y, b n không th đ t file service_worker.js m t ậ ạ ể ặ ở ộ
n i khác, r i s d ng importScripts() đ c. Tôi có tham kh o đ c m t ví ơ ồ ử ụ ượ ả ượ ộ
d m u v cách tri n khai JavaScript Service Worker nh sau:ụ ẫ ề ể ư
const PRECACHE = 'my-precache-v1';
const RUNTIME = 'my-runtime';
// A list of local resources we always 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())
);
});
// 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())
);
});
// 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;
});
});
});
})
);
}
});
Sau khi đăng ký thành công, Service Worker s đ c download v phía ẽ ượ ề
client và th c hi n nh ng vi c sau đây.ự ệ ữ ệ
Service Worker - Install
Đo n code dùng đ install Service Worker:ạ ể
const PRECACHE = 'my-precache-v1';
const RUNTIME = 'my-runtime'; // A list of local resources we always 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 c a c a vi c install là đ l u m t s resources đ c đ nh nghĩa ụ ủ ủ ệ ể ư ộ ố ượ ị
array PRECACHE_URLS vào b nh đ m cache v i tên đ nh nghĩa b i ở ộ ớ ệ ớ ị ở
**PRECACHE. ** Sau khi l u xong h t t t c các resources c n thi t, hàmư ế ấ ả ầ ế
self.skipWaiting() dùng đ d ng công vi c hi n t i l i và chuy n ngay sangể ừ ệ ệ ạ ạ ể
công vi c ti p theo.ệ ế
JavaScript Service Worker - activate
Đo n code dùng đ active Service Worker là:ạ ể
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 => {
có thể bạn quan tâm
Tìm hiểu tiến trình Windows Modules Installer Worker
4
998
298
Cơ sở dữ liệu
4
(New)
Những khái niệm cơ bản cần tìm hiểu khi làm quen AWS (Amazon Web Servi...
10
1.053
256
Tài liệu CNTT khác
10
(New)
Easy Service Optimizer: Công cụ tối ưu hóa hiệu suất hoạt động của Win...
4
962
224
Tài liệu CNTT khác
4
(New)
Cách sửa lỗi 503 Service Unavailable
5
1.002
345
Tài liệu CNTT khác
5
(New)
Tiếng Anh lớp 7 mới Unit 3 - Community service
10
1.147
198
Tiếng Anh phổ thông
10
(New)
Giải bài tập tiếng Anh lớp 7 chương trình mới Unit 3: Community Servic...
25
2.338
246
Tiếng Anh phổ thông
25
(New)
Giải bài tập SBT Tiếng Anh lớp 7 chương trình mới Unit 3 - Community S...
11
1.550
277
Tiếng Anh phổ thông
11
(New)
Cách xử lý lỗi trong Java
4
1.009
332
Lập trình
4
(New)
thông tin tài liệu
Khi chúng ta mở trình duyệt Google Chrome hoặc Firefox thì sẽ có xuất hiện thông báo từ google, facebook hoặc là youtobe... Mà không cần mở trang các trang web đó lên. Để có thể làm được như vậy thì thằng mà chúng ta sẽ tìm hiểu sau đây là Service Worker có thể đáp ứng được và giải quyết được việc đó.
Mở rộng để xem thêm
từ khóa liên quan
tài liệu mới trong mục này
tài liệu hot trong mục này
tài liệu giúp tôi
Nếu bạn không tìm thấy tài liệu mình cần có thể gửi yêu cầu ở đây để chúng tôi tìm giúp bạn!
xem nhiều trong tuần
Tâm lý xã hội VÀ Hệ tư tưởng
Tham khảo 12 bài tập nguyên lý thống kê có lời giải
4 đề thi học sinh giỏi Toán lớp 2, có đáp án kèm theo
Trắc nghiệm kinh tế
Địa lý 12 Phát triển cây công nghiệp lâu năm Tây Nguyên
Mẫu slide về các môn thể thao
yêu cầu tài liệu
Giúp bạn tìm tài liệu chưa có
×
