Service Worker Là Gì? Chú Ý Khi Làm Việc Với Service Worker


nhân viên phục vụ là gì? Khi làm công nhân dịch vụ cần chú ý những vấn đề gì? Đây là một trong những câu hỏi mà nhiều độc giả thắc mắc trong thời gian gần đây khi tìm hiểu về công việc nhân viên phục vụ.

Để giúp các bạn hiểu rõ hơn về công việc này, Glints đã tổng hợp những thông tin liên quan đến nhân viên phục vụ trong bài viết dưới đây, cùng theo dõi để có câu trả lời chính xác nhất cho thắc mắc của mình.

nhân viên phục vụ là gì

Service worker nổi tiếng là một tệp phương trình được viết bằng ngôn ngữ lập trình javascript, được trình duyệt chạy trong nền và tách biệt với trang web. Nhân viên dịch vụ giúp mở ra cơ hội cho các tính năng không yêu cầu giao diện người dùng hoặc tương tác, ví dụ: đồng bộ hóa ngầm và thông báo đẩy, v.v.

Trong một tương lai không xa, nhân viên dịch vụ sẽ hỗ trợ định vị địa lý hoặc đồng bộ hóa định kỳ, nắm bắt khả năng xử lý các yêu cầu trên mạng và có thể quản lý bộ nhớ đệm của các phản hồi được trả về. Nhờ đó, có thể chạy trang web trong trường hợp không có mạng.

Cụ thể hơn, người làm dịch vụ hội tụ những điểm sau:

  • Service worker là một file javascript không can thiệp trực tiếp vào DOM của website, thay vào đó quá trình giao tiếp sẽ đi qua các trang của một giao diện đặc biệt, và tương tác với DOM qua các trang đó.
  • SW cũng là một mạng có thể lập trình cho phép chúng ta kiểm soát cách các yêu cầu sẽ được xử lý.
  • Tự động tắt khi không sử dụng và khởi động lại khi cần.
  • Nhân viên dịch vụ khái niệm hóa rộng rãi các Lời hứa.
nhân viên phục vụ là gì
Nhân viên dịch vụ hoạt động như thế nào (tín dụng: Blog SessionStack)

Vòng đời của nhân viên dịch vụ

Để cài đặt nhân viên phục vụ của một trang web, bạn cần phải đăng ký nó bằng cách sử dụng javascript của trang web. Sau khi đăng ký thành công sẽ bắt đầu đăng ký ngầm SW, ở bước này nếu muốn bạn có thể cache static assets, khi cache xong là SW được cài đặt hoàn chỉnh.

Trường hợp các file cache không thành công hoặc không tải được thì SW worker sẽ không cài được và không active được, sau khi cài sw thành công sẽ qua giai đoạn active.

Đối với giai đoạn sw chủ động, bạn cần kiểm soát trang web trong phạm vi cho phép của nó. Khi sw nắm quyền điều khiển sẽ rơi vào 2 trạng thái cụ thể:

  • SW sẽ kết thúc ngay lập tức để tối ưu hóa bộ nhớ hoặc xử lý các sự kiện tìm kiếm và hiển thị khi được yêu cầu qua mạng.
  • Hoặc thông báo xảy ra.

Vai trò của nhân viên phục vụ là gì?

  • Kiểm soát Lưu lượng Mạng: Dễ dàng quản lý Lưu lượng Mạng của trang web của bạn và can thiệp nếu cần.
  • Bộ đệm: Có thể lưu vào bộ đệm bất kỳ cặp yêu cầu/phản hồi nào với công nhân phục vụ và API bộ đệm. Cuối cùng, truy cập những nội dung ngoại tuyến này bất cứ lúc nào.
  • Quản lý thông báo đẩy: Dễ dàng quản lý thông báo đẩy với nhân viên dịch vụ và hiển thị thông báo cho người dùng.
  • Không có kết nối vẫn có thể sử dụng: Trong trường hợp mất kết nối, bạn vẫn có thể bắt đầu bất kỳ quy trình nào thông qua Đồng bộ hóa nền và nhân viên dịch vụ.
  • Không truy cập được đối tượng window: Mặc dù không quản lý được phần tử DOM nhưng vẫn có thể giao tiếp với window thông qua postMessage và xử lý nếu muốn.
  • Không thể làm việc trên cổng 80: Hiện tại service worker chỉ có thể làm việc trên giao thức HTTPS, ngoài ra bạn có thể làm việc trên localhost trong quá trình phát triển.

Đăng ký sw. Làm sao?

Để đăng ký SW, bạn cần đăng ký qua javascript trên trang web, bằng cách này, bạn cho trình duyệt biết cách đặt nhân viên dịch vụ.

if (‘serviceWorker’ trong hoa tiêu) {

window.addEventListener(‘load’, function() {

navigator.serviceWorker.register(‘/sw.js’).then(function(registration) {

// Đăng ký đã thành công

console.log(‘Đăng ký ServiceWorker thành công với phạm vi: ‘, register.scope);

}, hàm (err) {

//đăng ký thất bại

console.log(‘Đăng ký ServiceWorker không thành công: ‘, err);

});

});

}

Đoạn code trên giúp bạn kiểm tra hỗ trợ sw của trình duyệt, trường hợp support sẽ đăng ký file SW khi chạy trang.

Qua đó có thể gọi giao thức register() mà không cần quan tâm SW đã cài đặt hay chưa, trình duyệt sẽ biết SW đã cài đặt đúng yêu cầu hay chưa hoặc có cần chạy phương thức trên hay không. Trong quá trình đăng ký, bạn cần phải nhận thức được phạm vi của nó.

Hướng dẫn cơ bản sử dụng worker service

Cách cài đặt nhân viên dịch vụ

Sử dụng đoạn mã sau để cài đặt nhân viên dịch vụ:

const PRECACHE = “my-precache-v1”;

const RUNTIME = “thời gian chạy của tôi”; // Danh sách các tài nguyên cục bộ muốn được lưu vào bộ đệm.

const PRECACHE_URLS = [

  “index.html”,

  “./”, // Alias for index.html

  “style.css”,

  “main.js”,

];

// Trình xử lý cài đặt đảm nhiệm việc lưu trữ trước các tài nguyên mà chúng ta luôn cần.

self.addEventListener(“cài đặt”, (sự kiện) => {

sự kiện.waitUntil(

bộ đệm

.open(PRECACHE)

.then((cache) => cache.addAll(PRECACHE_URLS))

.then(self.skipWaiting())

);

});

Mục đích chính của việc triển khai là lưu các tài nguyên được xác định trong mảng PRECACHE_URLS vào bộ đệm có tên được xác định là PRECACHE. Sau khi bạn đã lưu thành công tất cả các tài nguyên cần thiết, bạn sử dụng self.skipWaiting() để dừng tiến trình công việc hiện tại và chuyển sang công việc tiếp theo.

công nhân phục vụ
Làm thế nào để sử dụng nhân viên dịch vụ?

Cách kích hoạt nhân viên phục vụ

Sử dụng đoạn mã sau để kích hoạt nhân viên dịch vụ:

// Trình xử lý kích hoạt đảm nhiệm việc dọn dẹp bộ đệm cũ.

self.addEventListener(“kích hoạt”, (sự kiện) => {

const currentCaches = [PRECACHE, RUNTIME];

sự kiện.waitUntil(

bộ đệm

.key()

.then((cacheNames) => {

trả về cacheNames.filter(

(cacheName) => !currentCaches.includes(cacheName)

);

})

.then((cachesToDelete) => {

trả lại Promise.all(

cachesToDelete.map((cacheToDelete) => {

trả về caches.delete(cacheToDelete);

})

);

})

.then(() => self.clients.claim())

);

});

Mục đích của công việc này là xóa bộ nhớ cache cũ, giữ bộ nhớ cache mới và cuối cùng kích hoạt nhân viên dịch vụ.

Làm cách nào để xử lý lệnh tìm nạp?

Mã được sử dụng để xử lý lệnh tìm nạp:

/*

* Trình xử lý tìm nạp phục vụ phản hồi cho các tài nguyên có cùng nguồn gốc từ bộ đệm.

* Nếu không tìm thấy phản hồi, nó sẽ điền vào bộ đệm thời gian chạy với phản hồi

* từ mạng trước khi đưa nó trở lại trang.

*/

self.addEventListener(“tìm nạp”, (sự kiện) => {

// Bỏ qua các yêu cầu trên nhiều nguồn gốc, giống như các yêu cầu dành cho Google Analytics.

if (event.request.url.startsWith(self.location.origin)) {

event.ResponseWith(

caches.match(event.request).then((cachedResponse) => {

nếu (phản hồi trong bộ nhớ cache) {

trả về cachedResponse;

}

trả về caches.open(RUNTIME).then((cache) => {

trả về tìm nạp(event.request).then((response) => {

// Đặt một bản sao của phản hồi vào bộ đệm thời gian chạy.

trả về cache.put(event.request, response.clone()).then(() => {

phản hồi trở lại;

});

});

});

})

);

}

});

Quy trình lệnh tìm nạp như sau:

  • Bước 1: Khi một yêu cầu được yêu cầu từ trình duyệt, nếu URL không thuộc cùng một trang web, nó có thể bị bỏ qua.
  • Bước 2: Nếu URL bị trùng, bạn cần kiểm tra cache xem có phản hồi tương ứng hay không. Trường hợp tồn tại trả lại phản hồi đó cho trình duyệt.
  • Bước 4: Ngược lại, gửi yêu cầu đến máy chủ và nhận lại phản hồi.
  • Bước 5: Tạo phản hồi sao chép và lưu nó vào bộ đệm RUNTIME cho yêu cầu tiếp theo, sau đó trả lại phản hồi đó cho trình duyệt.

Đọc thêm: Các vị trí trong ngành Công nghệ thông tin

phần kết

Đây là tất cả thông tin về nhân viên phục vụ là gì mà Glints muốn chia sẻ với bạn đọc. Hi vọng những chia sẻ trên đây của chúng tôi sẽ giúp bạn hiểu rõ hơn về dịch vụ thợ và những thông tin liên quan đến nó.

Tác giả

tải mẫu cv file word


Tham khảo: https://glints.com/vn/blog/service-worker-la-gi/

Leave a Comment