Truy cập vào bộ nhớ đệm qua cửa sổ

Với tất cả công việc chúng ta đang thực hiện bên ngoài window, bạn có thể cho rằng chỉ có thể truy cập các thực thể Cache trong phạm vi trình chạy dịch vụ. Thực tế là bạn có thể truy cập các thực thể Cache trong cả phạm vi trình chạy dịch vụ trong mã truyền thống của ứng dụng web, chạy trong window. Điều này giúp người dùng dễ dàng tương tác trực tiếp với bộ nhớ đệm của trình chạy dịch vụ hoặc cập nhật giao diện người dùng dựa trên trạng thái bộ nhớ đệm.

Một trường hợp sử dụng tiềm năng là cung cấp tính năng "lưu để sử dụng ngoại tuyến" cho các trang mà người dùng có thể muốn đọc sau, nhưng biết rằng trang có thể không có kết nối mạng vào thời điểm đó. Đoạn video nhúng bị lỗi bên dưới cho biết cách thực hiện việc này bằng Workbox.

Trong nội dung nhúng ở trên, bạn có thể thấy tập lệnh app.js ghi vào bộ nhớ đệm ngoại tuyến từ ngữ cảnh window khi người dùng nhấp vào nút "lưu để dùng khi không có mạng". Trong trình chạy dịch vụ, các tài sản tĩnh của trang được lưu trước vào bộ nhớ đệm để truy cập ngoại tuyến. Chiến lược NetworkOnly được sử dụng với một trình xử lý đặc biệt quản lý quyền truy cập ngoại tuyến cho các trang đã lưu vào bộ nhớ đệm và được truyền đến NavigationRoute.

Để kiểm tra chức năng trong quy trình nhúng Vấn đề, hãy làm như sau:

  1. Mở cửa sổ trình duyệt mới rồi chuyển đến https://save-for-offline-test.glitch.me/
  2. Nhấp vào nút có nội dung Thêm vào danh sách đọc ngoại tuyến.
  3. Mở công cụ cho nhà phát triển của trình duyệt trong Firefox hoặc Chrome. Nếu bạn đang sử dụng Chrome, hãy chuyển đến bảng điều khiển ứng dụng. Trong Firefox, hãy chuyển đến bảng điều khiển bộ nhớ.
  4. Trong công cụ dành cho nhà phát triển của một trong hai trình duyệt, bạn sẽ thấy mục Bộ nhớ đệm ở ngăn bên trái. Nhấp để mở rộng. Trong mục offline-cache, bạn sẽ thấy URL trang mà bạn vừa thêm vào ngăn bên phải.
  5. Nhấp vào bất kỳ đường liên kết trang nào khác ở cuối trang.
  6. Bật/tắt chế độ ngoại tuyến trên một trong hai trình duyệt để mô phỏng kết nối ngoại tuyến.
  7. Nhấp vào đường liên kết của trang mà bạn đã thêm vào bộ nhớ đệm ngoại tuyến. Đường liên kết này sẽ xuất hiện ngay cả khi bạn không có kết nối mạng.
  8. Nhấp vào đường liên kết của trang mà bạn chưa thêm vào bộ nhớ đệm ngoại tuyến. Yêu cầu này sẽ không thành công.

Đây không phải là trường hợp sử dụng duy nhất để làm việc với các thực thể Cache trong window. Ví dụ: bạn có thể dự đoán việc tìm nạp trước và tài sản lưu vào bộ nhớ đệm mà bạn biết rằng người dùng sẽ cần thực hiện một hành động cụ thể. Việc này sẽ làm giảm hoặc tránh độ trễ khi tải các thành phần đó xuống theo yêu cầu.

Có những trường hợp sử dụng tiềm năng khác. Ngoài ra, vì bạn có thể tương tác với các thực thể Cache khi không có trình chạy dịch vụ, nên không phải tất cả các phiên bản đều yêu cầu cài đặt một trình chạy dịch vụ.