Progressive Web Apps phải nhanh và có thể cài đặt, có nghĩa là chúng hoạt động trực tuyến, ngoại tuyến và trên các kết nối gián đoạn và chậm. Để đạt được điều này, chúng tôi cần lưu giao diện ứng dụng vào bộ nhớ cache bằng cách sử dụng service worker, để luôn có sẵn nhanh chóng và đáng tin cậy. 

Service worker là gì

Service worker là tập lệnh mà trình duyệt của bạn chạy ẩn, tách riêng khỏi trang web, mở cửa cho các tính năng không cần trang web hoặc tương tác người dùng. Hiện nay, chúng đã bao gồm các tính năng như thông báo đẩy và đồng bộ hóa nền. Trong tương lai, service worker sẽ hỗ trợ những thứ khác như đồng bộ định kỳ hoặc khoanh vùng địa lý. Tính năng cốt lõi được thảo luận trong hướng dẫn này là khả năng chặn và xử lý các yêu cầu mạng, bao gồm quản lý có lập trình bộ nhớ cache các phản hồi.

Đây là một API thú vị bởi nó cho phép bạn hỗ trợ trải nghiệm ngoại tuyến, cho phép các nhà phát triển kiểm soát hoàn toàn trải nghiệm.

Trước service worker, có một API khác cung cấp cho người dùng trải nghiệm ngoại tuyến trên web có tên là AppCache. Các vấn đề chính với AppCache là số lượng ẩn cũng như thực tế là mặc dù thiết kế đặc biệt hiệu quả cho các ứng dụng web một trang nhưng không hiệu quả cho các trang web nhiều trang. Service worker đã được thiết kế để tránh những điểm bất ổn phổ biến này.

Những điều cần lưu ý về service worker:

• Vốn là JavaScript Worker, vì vậy service worker không thể trực tiếp truy cập vào DOM. Thay vào đó, service worker có thể giao tiếp với các trang mà nó kiểm soát bằng cách phản hồi các thông báo được gửi qua giao diện postMessage và những trang này có thể thao tác DOM nếu cần.
• Service worker là một proxy mạng có thể lập trình, cho phép bạn kiểm soát các yêu cầu mạng từ trang của bạn được xử lý như thế nào.
• Nó bị chấm dứt khi không sử dụng và khởi động lại khi cần, vì vậy bạn không thể dựa vào global state trong các trình xử lý onfetch và onmessage của service worker. Nếu có thông tin rằng bạn cần kiên trì và sử dụng lại trong các lần khởi động lại, service worker sẽ có quyền truy cập vào IndexedDB API.
• Service worker tận dụng promise, vì vậy nếu bạn mới biết promise, bạn nên ngừng đọc và xem Giới thiệu về Promise.

Vòng đời của service worker

Service worker có vòng đời hoàn toàn tách rời khỏi trang web của bạn.

Để cài đặt service worker cho trang web, bạn cần đăng ký trong JavaScript trang web của bạn. Đăng ký service worker sẽ khiến trình duyệt bắt đầu bước cài đặt service worker dưới nền.

Thông thường trong bước cài đặt, bạn sẽ muốn lưu vào bộ nhớ cache một số phần tử tĩnh. Nếu tất cả các tệp được lưu vào bộ nhớ cache thành công, thì service worker sẽ được cài đặt. Nếu bất kỳ tệp nào không tải xuống và lưu vào bộ nhớ cache được, thì bước cài đặt sẽ không thành công và service worker sẽ không kích hoạt (nghĩa là sẽ không được cài đặt). Nếu điều đó xảy ra, đừng lo lắng, nó sẽ thử lại lần sau. Nhưng điều đó có nghĩa là nếu cài đặt, bạn biết bạn có những phần tử tĩnh đó trong bộ nhớ cache.

Khi được cài đặt, tiếp theo sẽ là bước kích hoạt và đây là cơ hội tuyệt vời để xử lý quản lý bộ nhớ cache cũ mà chúng tôi sẽ đề cập trong phần cập nhật service worker.

Sau bước kích hoạt, service worker sẽ kiểm soát tất cả các trang nằm trong phạm vi của nó, mặc dù trang đăng ký service worker lần đầu tiên sẽ không bị kiểm soát cho đến khi trang được tải lại. Khi service worker kiểm soát, service worker sẽ ở một trong hai trạng thái: service worker sẽ bị chấm dứt để tiết kiệm bộ nhớ hoặc sẽ xử lý sự kiện tìm nạp và thông báo xảy ra khi yêu cầu mạng hoặc thông báo được thực hiện từ trang của bạn.

Dưới đây là phiên bản đơn giản hóa quá mức vòng đời service worker trong quá trình cài đặt lần đầu.

Service worker có đòi hỏi chúng tôi suy nghĩ lại cách chúng tôi cấu trúc ứng dụng không?

Service worker ngụ ý một số thay đổi tinh tế trong kiến ​​trúc ứng dụng. Thay vì nén tất cả ứng dụng của bạn vào một chuỗi HTML, nó có thể có lợi cho việc làm những thứ theo phong cách AJAX. Đây là nơi bạn có giao diện (luôn được lưu vào bộ nhớ cache và luôn có thể khởi động mà không cần mạng) và nội dung được làm mới thường xuyên và được quản lý riêng biệt.

Những hàm ý của sự phân chia này rất lớn. Trong lần truy cập đầu tiên, bạn có thể hiển thị nội dung trên máy chủ và cài đặt service worker trên máy khách. Trong các lần truy cập tiếp theo bạn chỉ cần yêu cầu dữ liệu.

* Nguồn: Google