Service Worker, Progressive Web Apps là gì? – Phần 1

Service worker là cốt lõi của các kỹ thuật PWA(Progressive Web Apps – Ứng dụng web tiên tiến) cho bộ nhớ đệm tài nguyên và thông báo đẩy(Push Notifications).

Service Worker là gì?

Service worker thực chất là một tệp JavaScript mà trình duyệt của bạn chạy dưới nền, tách riêng và không có tương tác nào với phía người dùng trang web và không ảnh hưởng đến hiệu suất của trang.

Service Worker dịch qua tiếng việt mình thì có nghĩa là công nhân dịch vụ, nghe có vẻ củ chuối thế nào ấy nhỉ. Service worker(công nhân dịch vụ) là một loại thuộc Web Worker.

Về cơ bản, nó sinh ra với mục đích chặn các yêu cầu mạng, lưu trữ hoặc truy xuất tài nguyên từ bộ đệm và gửi tin nhắn đẩy(push messages).

Điều kiện tiên quyết

• Trình duyệt hỗ trợ: Hiện tại Service worker được Chrome, Firefox và Opera hỗ trợ. Microsoft Edge hiện cũng đã hỗ trợ, Safari hiện tại hỗ trợ có sẵn trong Safari Technology Preview 48, macOS High Sierra 10.13.4 và iOS 11.3 beta seed 2. Bạn có thể theo dõi tiến trình tại đây Serviceworker ready site.
• Bạn cần HTTPS: Https là tương lai của Internet, trong quá trình phát triển, bạn sẽ có thể sử dụng nhân viên dịch vụ thông qua localhost, nhưng để triển khai nó trên một trang web, bạn sẽ cần phải thiết lập HTTPS trên máy chủ của mình.

Service Worker có thể làm gì?

Service worker cho phép các ứng dụng kiểm soát các yêu cầu mạng, lưu trữ các yêu cầu đó để cải thiện hiệu suất và cung cấp quyền truy cập ngoại tuyến vào nội dung được lưu trong bộ nhớ cache.

Service worker phụ thuộc vào hai API để làm cho ứng dụng hoạt động ngoại tuyến: Fetch (một cách tiêu chuẩn để truy xuất nội dung từ mạng) và Cache (lưu trữ nội dung liên tục cho dữ liệu ứng dụng). Cache(bộ nhớ đệm) này liên tục và độc lập với bộ nhớ đệm của trình duyệt hoặc trạng thái mạng.

1. Cải thiện hiệu suất của ứng dụng / trang web của bạn
2. Làm một ứng dụng “offline-first”
3. Đóng vai trò cơ sở cho các tính năng nâng cao:
   • Notifications API
   • Push API
   • Background Sync API
   • Channel Messaging API

Vòng đời của Service Worker

Một Service Worker  trải qua ba bước trong vòng đời của nó:

1. Đăng ký
2. Cài đặt
3. Kích hoạt

Cách đăng ký và phạm vi hoạt động

Để cài đặt một Service Worker, bạn cần đăng ký nó trong mã JavaScript chính của mình. Đăng ký cho trình duyệt biết vị trí Service Worker của bạn và bắt đầu cài đặt nó trong nền. Hãy xem một ví dụ:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
  .then(function(registration) {
    console.log('Registration successful, scope is:', registration.scope);
  })
  .catch(function(error) {
    console.log('Service worker registration failed, error:', error);
  });
}

Mã này bắt đầu bằng cách kiểm tra trình duyệt có hỗ trợ hay không với navigator.serviceWorker. Sau đó service worker được đăng ký bởi navigator.serviceWorker.register, và trả lại một promise khi đăng ký thành công, error khi đăng ký thất bại. Phạm vi hoạt động của service worker được ghi lại bởi registration.scope , Scope này chính là phạm vi hoạt động của service worker, ví dụ:

navigator.serviceWorker.register('/service-worker.js', {
  scope: '/app/'
});

navigator.serviceWorker.register('/service-worker.js', {
  scope: '/'
});

Ở hai đoạn code trên như các bạn thấy mình có truyền vào một tham số bổ sung(scope) khi đăng ký. Đoạn code thứ nhất truyền vào scope: ‘/app/’ có nghĩa là thằng công nhân này chỉ được phép hoạt động ở phạm vi từ app(yourdomain.com/app/) trở đi: /app/sub-page-app/, /app/sub-page-app-1/, /app/sub-page-app-2/,.. còn những thứ ở trước /app/ thì sẽ không thể truy cập.

Ở đoạn code 2 thì ngược lại, service worker này có thể truy cập hết tất cả các tài nguyên trên domain của bạn.

Theo mặc định nếu bạn không truyền vào scope thì serviceWorker nó sẽ tự hiểu rằng được phép truy cập toàn bộ tài nguyên trên website của bạn.

Cài đặt service worker

Sự kiện Install phải được được kích hoạt với mục đích là lưu trữ các tài nguyên vào bộ nhớ cache để thực hiện sự kiện kích hoạt.

Cài đặt Service worker theo đoạn code dưới đây:

// Listen for install event, set callback
self.addEventListener('install', function(event) {
    // Perform some task
});

Kích hoạt service worker

Khi một service worker đã cài đặt thành công, nó sẽ chuyển sang giai đoạn kích hoạt .

Service worker được kích hoạt theo đoạn code dưới đây:

self.addEventListener('activate', function(event) {
  // Perform some task
});

Các sự kiện trong Service worker

Ngoài các sự kiện như install và activate thì còn có các sự kiện khác như message, fetch, push và sync.

Sắp tới mình sẽ có một bài demo nho nhỏ về Service worker cho các bạn.

Phần 2 mình sẽ nói qua về Progressive Web Apps  cũng như một số đặc điểm của PWA.

tobe continued…