Ứng dụng web tiến bộ: Trình chạy dịch vụ bao gồm

1. Chào mừng bạn

Trong phòng thí nghiệm này, bạn sẽ lấy một ứng dụng web hiện có và thêm một phản hồi tuyến đường truyền phát để cải thiện hiệu suất. Đây là lớp học lập trình thứ bảy trong loạt lớp học lập trình đi kèm cho hội thảo về Ứng dụng web tiến bộ. Lớp học lập trình trước đây là Nâng cao PWA. Vẫn còn một lớp học lập trình nữa trong loạt lớp học này.

Kiến thức bạn sẽ học được

  • Thêm phản hồi truyền trực tuyến vào một service worker

Những điều bạn cần biết

  • JavaScript

Bạn cần có

2. Bắt đầu thiết lập

Bắt đầu bằng cách sao chép hoặc tải mã khởi đầu cần thiết để hoàn tất lớp học lập trình này:

Nếu bạn sao chép repo, hãy đảm bảo rằng bạn đang ở nhánh pwa06--service-worker-includes. Tệp zip cũng chứa mã cho nhánh đó.

Cơ sở mã này yêu cầu Node.js 14 trở lên. Sau khi có mã, hãy chạy npm ci từ dòng lệnh trong thư mục mã để cài đặt tất cả các phần phụ thuộc mà bạn sẽ cần. Sau đó, hãy chạy npm start để khởi động máy chủ phát triển cho lớp học lập trình.

Tệp README.md của mã nguồn cung cấp nội dung giải thích cho tất cả các tệp được phân phối. Ngoài ra, sau đây là các tệp hiện có chính mà bạn sẽ sử dụng trong suốt lớp học lập trình này:

Tệp khoá

  • js/preview.js – Xem trước tệp JavaScript của trang
  • service-worker.js – Tệp trình chạy dịch vụ của PWA

3. Bản xem trước nội dung phát trực tuyến

Trang xem trước có thể được chia thành 3 phần rõ ràng: phần đầu, phần nội dung đã biên dịch và phần chân trang. Hiện tại, phần nội dung đã biên dịch đang được kết xuất phía máy khách, nhưng không có lý do gì để làm như vậy. Hãy chuyển nó sang Service Worker.

Để biên dịch nội dung, cần có một quy trình tra cứu nội dung không đồng bộ. Vì công việc không đồng bộ trong phản hồi điều hướng tốn nhiều tài nguyên, nên đây là cơ hội tốt để truyền trực tuyến nội dung đã biết đến trình duyệt trước.

Để làm như vậy, trước tiên hãy xoá nội dung trong js/preview.js để đảm bảo rằng nội dung đó không còn biên dịch nữa. Sau đó, trong service-worker.js, hãy làm như sau:

  • Nhập tệp xuất có tên strategy từ workbox-streams dưới dạng streamsStrategy
  • Nhập tệp xuất có tên openDB và từ idb, đồng thời nhập tệp xuất có tên marked từ marked
  • Trước khi đăng ký tuyến đường cho hoạt động chỉ đường, hãy thêm một chế độ đăng ký tuyến đường mới
    • Bạn nên kiểm tra để đảm bảo rằng pathname của URL là /preview
    • Nó phải sử dụng một chiến lược truyền phát trực tiếp
      1. Phản hồi bằng nội dung của preview/index.html thông qua nội dung của thẻ main
      2. Phản hồi bằng một hàm mở settings-store IndexedDB, lấy nội dung từ kho đối tượng settings và trả về phiên bản markdown đã kết xuất của nội dung đó.
      3. Trả lời bằng các thẻ đóng main, body và html.

Sau khi có phản hồi truyền trực tuyến, hãy quay lại và mở bản xem trước trang web trong trình duyệt. Bạn sẽ thấy rằng nội dung trang hiện đang được hiển thị trực tiếp từ trình chạy dịch vụ mà không cần mã phía máy khách!

4. Xin chúc mừng!

Bạn đã tìm hiểu cách chuyển ứng dụng web sang chế độ ngoại tuyến bằng cách sử dụng các worker dịch vụ và API bộ nhớ đệm.

Lớp học lập trình tiếp theo trong loạt bài này là Làm việc với Worker