GALAXY TECH
Chuyên gia Công nghệ
Thứ tư, 15/08/2018 | 00:00 GMT+7

Bắt đầu với Nhân viên Dịch vụ

Service Worker là một API tương đối mới đã được giới thiệu trong các trình duyệt web hiện đại trong vài năm qua. Đó là một công nghệ thực sự quan trọng. Đó là một loại web worker đặc biệt có thể được cài đặt trong trình duyệt của bạn để cung cấp các tính năng đặc biệt mà trước đây không có cho các trang web thông thường như cho phép truy cập offline nội dung trang web.

Nhân viên Dịch vụ là cốt lõi của Ứng dụng web tiến bộ vì chúng cho phép lưu vào bộ nhớ đệm tài nguyên và thông báo đẩy, hai trong số các tính năng phân biệt chính cho đến nay đã tạo sự khác biệt cho các ứng dụng root .

Các tính năng nằm trong ô ứng dụng web tiến bộ hầu hết đều hướng tới khả năng xây dựng ứng dụng di động đầy đủ tính năng bằng cách sử dụng công nghệ web không phải là trải nghiệm phụ so với ngăn xếp root .

Service Worker chạy trên một chuỗi riêng biệt. Điều này nghĩa là bạn không thể truy cập nhiều đối tượng có sẵn trong chuỗi JavaScript chính, bao gồm quyền truy cập vào DOM và một số API như XHR hoặc Cookie. Mặt tích cực, bất kỳ hoạt động nào của Service Worker đều không thể chặn chuỗi giao diện user vì nó hoàn toàn riêng biệt.

Lưu ý nhân viên dịch vụ cần được cung cấp qua HTTPS, nếu không, trình duyệt sẽ không đăng ký họ.

Các tính năng chính của nhân viên dịch vụ

Mục tiêu cuối cùng của Ứng dụng web tiến bộ (PWA) là trở nên xuất sắc trên thiết bị di động và một điều mà web luôn thất bại trên thiết bị di động là xử lý trạng thái offline .

Service worker có thể chặn các yêu cầu mạng , thêm chúng vào bộ nhớ cache của trình duyệt, sử dụng API Cache và họ có thể cung cấp các tài nguyên được lưu trong bộ nhớ cache nếu họ phát hiện thấy trình duyệt offline và mạng không khả dụng.

Một tính năng lớn khác là bật thông báo đẩy , thông qua việc sử dụng API đẩy và API thông báo , hai API nền tảng web riêng biệt mà nhà phát triển có thể sử dụng trong các nhân viên dịch vụ.

Cách cài đặt Service Worker

Service worker cần được cài đặt trong trình duyệt trước khi chúng được dùng .

Trước tiên, bạn cần kiểm tra xem trình duyệt có triển khai service worker hay không.

Cách tốt nhất là kiểm tra sự tồn tại của serviceWorker trên đối tượng chuyển :

if (!('serviceWorker' in navigator)) {
  // service workers not supported 😣
  return
}

Nếu nhân viên dịch vụ khả dụng, bạn có thể đăng ký nhân viên dịch vụ của bạn bằng cách chỉ định file nơi có thể tìm thấy file đó. Bạn luôn có một file riêng biệt, có thể truy cập bằng trình duyệt. Ví dụ: bạn có thể có nó trong file worker.js được đặt trong folder root .

Bạn đợi cho đến khi trang được tải, sau đó bạn đăng ký service worker bằng phương thức navigator.serviceWorker.register() :

window.addEventListener('load', () => {
  if (!('serviceWorker' in navigator)) {
    // service workers not supported 😣
    return
  }

  navigator.serviceWorker.register('/worker.js').then(
    () => {
      // registered! 👍🏼
    },
    err => {
      console.error('SW registration failed! 😱', err)
    }
  )
})

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

Tôi đã đề cập rằng một nhân viên dịch vụ cần được cài đặt trong trình duyệt trước khi nó được dùng .

Khi user lần đầu tiên truy cập trang web , điều duy nhất mà nhân viên dịch vụ có thể làm là cài đặt.

Mọi thứ bên trong service worker, bất kỳ chức năng nào mà nó đi kèm, đều không được kích hoạt cho đến khi user truy cập trang thứ hai trên trang web hoặc làm mới trang hiện tại. Đây là do thiết kế.

Có gì trong Service Worker

Ta vừa xem cách cài đặt service worker nằm trong file worker.js , nhưng ta chưa xem xét file đó.

Trong service worker, bạn có thể nghe một số sự kiện do trình duyệt phát ra:

  • fetch được gửi khi nào một trang trên trang web yêu cầu tài nguyên mạng. Nó có thể là một trang mới, một API JSON, một hình ảnh, một file CSS, bất cứ thứ gì.
  • install được gửi khi nhân viên dịch vụ đang được cài đặt.
  • activate được gửi khi nhân viên dịch vụ đã được đăng ký và cài đặt. Nơi này là nơi bạn có thể dọn dẹp mọi thứ liên quan đến version cũ hơn của service worker nếu nó được cập nhật.
  • sync được gửi nếu trước đó trình duyệt phát hiện ra rằng kết nối không khả dụng và bây giờ báo hiệu cho nhân viên dịch vụ rằng kết nối internet đang hoạt động.
  • push được gọi bởi API Push khi nhận được sự kiện push mới.

Cung cấp tài nguyên được lưu trong bộ nhớ cache

Khi cài đặt service worker, ta có thể yêu cầu trình duyệt lưu vào bộ nhớ cache các tài nguyên cụ thể mà ta cần để cung cấp trang khi offline sau này:

self.addEventListener('install', event => {
  event.waitUntil(
    caches
      .open('my-site-name')
      .then(cache =>
        cache.addAll([
          'favicon.ico',
          'style.css',
          'script.js',
          'https://fonts.googleapis.com/css?family=Inconsolata:400,700'
        ])
      )
  )
})

Đoạn mã này sử dụng Cache API để làm cho trình duyệt lưu vào bộ nhớ cache tất cả các tài nguyên đó trong bộ nhớ cache có tên là my-site-name .

Hãy xem cách lắng nghe sự kiện fetch để cung cấp cho user tài nguyên được lưu trong bộ nhớ cache vào lần tiếp theo một trang từ trang web của ta được truy cập:

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      if (response) {
        //we found an entry in the cache!
        return response
      }
      return fetch(event.request)
    })
  )
})

Ta kiểm tra xem bộ nhớ đệm có chứa tài nguyên được xác định bởi thuộc tính request hay không và nếu không, ta chạy một yêu cầu tìm nạp để lấy nó.

Cũng lưu ý việc sử dụng self trong các ví dụ trên. Người lao động có được một thuộc tính global chỉ self đọc để cho phép truy cập vào chính họ.

Cập nhật nhân viên dịch vụ

Sau khi cài đặt service worker, nó sẽ tiếp tục chạy cho đến khi bị user gỡ bỏ hoặc bạn cập nhật nó.

Để cập nhật service worker, bạn chỉ cần đẩy version mới của nó trong server (thậm chí thay đổi một byte cũng đủ) và trình duyệt sẽ phát hiện đó là version mới, nó sẽ download và cài đặt nó.

Giống như khi được cài đặt lần đầu, service worker mới sẽ không khả dụng cho đến khi tải trang tiếp theo.

Tags:

Các tin liên quan