Ứng dụng web tiến bộ: Sử dụng Workbox

1. Chào mừng bạn

Trong lớp học này, bạn sẽ lấy một trang web có trình chạy dịch vụ hiện có và chuyển đổi trang web đó để sử dụng Workbox. Đây là lớp học lập trình thứ hai trong loạt lớp học lập trình đồng hành 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à Chuyển sang chế độ ngoại tuyến. Còn 6 lớp học lập trình nữa trong loạt lớp học lập trình này.

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

  • Chuyển đổi một Service Worker hiện có để sử dụng Workbox
  • Thêm một giải pháp dự phòng ngoại tuyến vào PWA

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

  • HTML và JavaScript cơ bản

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 pwa03--workbox. 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á

  • service-worker.js – Tệp trình chạy dịch vụ của ứng dụng
  • offline.html – HTML ngoại tuyến để sử dụng khi một trang không hoạt động

3. Di chuyển sang Workbox

Nhìn vào service worker hiện có, có vẻ như quá trình lưu vào bộ nhớ đệm trước có thể được chia thành hai bước:

  • Lưu vào bộ nhớ đệm các tệp liên quan trong quá trình cài đặt Trình chạy dịch vụ
  • Phân phát lại những tệp đó bằng chiến lược Chỉ bộ nhớ đệm

Tệp index.html và tuyến đường / vẫn có ý nghĩa đối với việc lưu vào bộ nhớ đệm trước, vì HTML của ứng dụng web này sẽ không thay đổi nhiều, nhưng các tệp khác, chẳng hạn như CSS và JavaScript, có thể thay đổi và chúng ta không thực sự muốn phải trải qua toàn bộ vòng đời của Service Worker mỗi khi chúng thay đổi. Ngoài ra, service worker hiện tại chỉ tính đến một phần CSS và JavaScript của chúng ta, chúng ta muốn tất cả các phần đó đều được bao gồm. Việc lưu vào bộ nhớ đệm các mục này bằng chiến lược Stale While Revalidate (Dữ liệu cũ trong khi xác thực lại) sẽ hợp lý hơn; phản hồi nhanh có thể được cập nhật trong nền khi cần.

Xem lại tính năng lưu trước vào bộ nhớ đệm

Khi di chuyển sang Workbox, chúng ta không cần giữ lại bất kỳ mã hiện có nào, vì vậy hãy xoá mọi thứ trong service-worker.js. Trong lớp học trước, chúng ta đã thiết lập Service Worker này để được biên dịch, vì vậy, chúng ta có thể sử dụng ESModule Imports tại đây để đưa Workbox vào từ các mô-đun NPM của nó. Hãy bắt đầu bằng cách xem lại tính năng lưu trước vào bộ nhớ đệm. Trong service-worker.js, hãy thêm mã sau:

import { warmStrategyCache } from 'workbox-recipes';
import { CacheFirst } from 'workbox-strategies';
import { registerRoute } from 'workbox-routing';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

// Set up page cache
const pageCache = new CacheFirst({
  cacheName: 'page-cache',
  plugins: [
    new CacheableResponsePlugin({
      statuses: [0, 200],
    }),
    new ExpirationPlugin({
      maxAgeSeconds: 30 * 24 * 60 * 60,
    }),
  ],
});

warmStrategyCache({
  urls: ['/index.html', '/'],
  strategy: pageCache,
});

registerRoute(({ request }) => request.mode === 'navigate', pageCache);

Giải thích

Để thiết lập tính năng lưu vào bộ nhớ đệm trước cho /index.html và /, bạn cần kéo 5 mô-đun. Mặc dù có vẻ như có nhiều việc cần làm, nhưng mã này mạnh hơn nhiều so với mã đã viết trước đó.

Quá trình này bắt đầu bằng việc thiết lập một chiến lược lưu vào bộ nhớ đệm mới là Cache First (Ưu tiên bộ nhớ đệm), được chọn thay vì chiến lược Cache Only (Chỉ bộ nhớ đệm) để cho phép thêm các trang khác vào bộ nhớ đệm khi cần. Tệp này được đặt tên là page-cache. Các chiến lược của Workbox có thể sử dụng một số trình bổ trợ có thể ảnh hưởng đến vòng đời lưu và truy xuất nội dung từ bộ nhớ đệm. Ở đây, hai trình bổ trợ là trình bổ trợ Phản hồi có thể lưu vào bộ nhớ đệm và trình bổ trợ Hết hạn được dùng để đảm bảo chỉ những phản hồi tốt của máy chủ mới được lưu vào bộ nhớ đệm và mỗi mục trong bộ nhớ đệm sẽ bị xoá sau 30 ngày.

Tiếp theo, bộ nhớ đệm của chiến lược sẽ được làm nóng bằng /index.html và / bằng cách sử dụng công thức Workbox bộ nhớ đệm chiến lược làm nóng. Thao tác này sẽ thêm những mục đó vào bộ nhớ đệm này trong sự kiện cài đặt của trình chạy dịch vụ.

Cuối cùng, một tuyến đường mới sẽ được đăng ký. Mọi yêu cầu là một thao tác điều hướng trang sẽ được quản lý bằng chiến lược Ưu tiên bộ nhớ đệm này, bằng cách lấy dữ liệu từ bộ nhớ đệm hoặc mạng rồi lưu phản hồi vào bộ nhớ đệm.

Lưu trữ thành phần vào bộ nhớ đệm

Sau khi sắp xếp tính năng lưu trước vào bộ nhớ đệm cho tuyến đường, đã đến lúc triển khai lại tính năng lưu vào bộ nhớ đệm cho các tài sản của trang web, đó là CSS và JavaScript. Để làm việc này, trước tiên, hãy thêm StaleWhileRevalidate vào nội dung nhập workbox-strategies, sau đó thêm mã sau vào cuối Service Worker:

// Set up asset cache
registerRoute(
  ({ request }) => ['style', 'script', 'worker'].includes(request.destination),
  new StaleWhileRevalidate({
    cacheName: 'asset-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  }),
);

Giải thích

Tuyến đường này bắt đầu bằng cách xác định xem loại yêu cầu là kiểu, tập lệnh hay trình chạy, tương ứng với CSS, JavaScript hoặc Trình chạy web. Nếu có, thì nó sẽ sử dụng chiến lược Stale While Revalidate, cố gắng phân phát từ bộ nhớ đệm trước, quay lại mạng nếu không có sẵn, đồng thời cố gắng cập nhật phiên bản trong bộ nhớ đệm từ mạng nếu có thể. Giống như chiến lược trang, chiến lược này sẽ chỉ lưu vào bộ nhớ đệm các phản hồi tốt.

4. Thêm bản dự phòng ngoại tuyến

Khi trình chạy dịch vụ ban đầu được di chuyển sang Workbox, bạn cần làm thêm một việc nữa để ngăn PWA gặp sự cố khi không có mạng: thêm một phương án dự phòng khi không có mạng.

Bạn có thể đặt các giải pháp dự phòng ngoại tuyến cho mọi thứ có thể không dùng được khi không có mạng: trang, phông chữ, CSS, JavaScript, hình ảnh, v.v. Tối thiểu, bạn phải đặt một trang dự phòng cho tất cả các PWA để nếu người dùng chuyển đến một trang không có trong bộ nhớ đệm, họ sẽ vẫn ở trong bối cảnh của ứng dụng.

Các công thức của Workbox cung cấp một công thức dự phòng ngoại tuyến mà bạn có thể dùng để thực hiện chính xác điều này! Để sử dụng, trước tiên hãy thêm offlineFallback vào nội dung nhập workbox-recipes, sau đó thêm mã sau vào cuối Service Worker:

// Set up offline fallback
offlineFallback({
  pageFallback: '/offline.html',
});

Giải thích

Công thức dự phòng ngoại tuyến thiết lập một chiến lược Chỉ lưu vào bộ nhớ đệm được làm nóng bằng các thành phần dự phòng được cung cấp. Sau đó, nó thiết lập một trình xử lý bắt lỗi mặc định của Workbox, bắt mọi yêu cầu định tuyến không thành công (nếu không có gì trong bộ nhớ đệm và không thể truy cập vào mạng), kéo nội dung của các tệp có liên quan từ bộ nhớ đệm và trả về nội dung đó miễn là yêu cầu tiếp tục không thành công.

5. Xin chúc mừng!

Bạn đã tìm hiểu cách sử dụng Workbox để thiết lập chiến lược lưu vào bộ nhớ đệm cho các tuyến đường và cung cấp các giải pháp dự phòng ngoại tuyến cho PWA của mình.

Lớp học lập trình tiếp theo trong loạt bài này là IndexedDB