hộp làm việc sw

Mô-đun workbox-sw cung cấp một cách cực kỳ dễ dàng để thiết lập và chạy các mô-đun Workbox, đơn giản hoá việc tải các mô-đun Workbox và cung cấp một số phương thức trợ giúp đơn giản.

Bạn có thể sử dụng workbox-sw qua CDN của chúng tôi hoặc sử dụng với một nhóm tệp hộp làm việc trên máy chủ của riêng bạn.

Sử dụng Workbox SW qua CDN

Cách dễ nhất để bắt đầu sử dụng mô-đun này là thông qua CDN. Bạn chỉ cần thêm đoạn mã sau vào trình chạy dịch vụ:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

Bằng cách này, bạn sẽ có không gian tên workbox trong trình chạy dịch vụ giúp cung cấp quyền truy cập vào tất cả các mô-đun Workbox.

workbox.precaching.*
workbox.routing.*
etc

Có điều kỳ diệu xảy ra khi bạn bắt đầu sử dụng các mô-đun bổ sung.

Khi bạn tham chiếu một mô-đun lần đầu tiên, workbox-sw sẽ phát hiện và tải mô-đun trước khi cung cấp. Bạn có thể thấy điều này xảy ra trên thẻ mạng trong Công cụ cho nhà phát triển.

Tải thư viện hộp công việc trong Công cụ cho nhà phát triển

Những tệp này sẽ được trình duyệt của bạn lưu vào bộ nhớ đệm và bạn có thể sử dụng chúng khi không có mạng trong tương lai.

Sử dụng tệp Workbox cục bộ thay vì CDN

Nếu không muốn sử dụng CDN, bạn có thể dễ dàng chuyển sang các tệp Workbox được lưu trữ trên miền của riêng mình.

Phương pháp đơn giản nhất là lấy các tệp thông qua lệnh copyLibraries của workbox-cli, sau đó cho workbox-sw biết nơi tìm các tệp này thông qua tuỳ chọn cấu hình modulePathPrefix.

Nếu đặt các tệp trong /third_party/workbox-vX.Y.Z/, bạn sẽ sử dụng các tệp như sau:

importScripts('/third_party/workbox-vX.Y.Z/workbox-sw.js');

workbox.setConfig({
  modulePathPrefix: '/third_party/workbox-vX.Y.Z/',
});

Tránh nhập không đồng bộ

Trong trường hợp này, việc tải các mô-đun mới lần đầu tiên liên quan đến việc gọi importScripts() kèm theo đường dẫn đến tệp JavaScript tương ứng (được lưu trữ trên CDN hoặc thông qua một URL cục bộ). Trong cả hai trường hợp, một hạn chế quan trọng sẽ được áp dụng: các lệnh gọi ngầm định đến importScripts() chỉ có thể xảy ra bên trong trình xử lý install của trình chạy dịch vụ hoặc trong quá trình thực thi ban đầu đồng bộ của tập lệnh trình chạy dịch vụ.

Để tránh vi phạm quy định hạn chế này, bạn nên tham chiếu nhiều không gian tên workbox.* bên ngoài mọi trình xử lý sự kiện hoặc hàm không đồng bộ.

Ví dụ: mã trình chạy dịch vụ cấp cao nhất sau đây là hợp lệ:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will work!
workbox.routing.registerRoute(
  ({request}) => request.destination === 'image',
  new workbox.strategies.CacheFirst()
);

Tuy nhiên, mã bên dưới có thể gây ra vấn đề nếu bạn chưa tham chiếu workbox.strategies ở nơi nào khác trong trình chạy dịch vụ của mình:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Oops! This causes workbox-strategies.js to be imported inside a fetch handler,
    // outside of the initial, synchronous service worker execution.
    const cacheFirst = new workbox.strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});

Nếu cần viết mã để vi phạm quy định hạn chế này, bạn có thể kích hoạt lệnh gọi importScripts() bên ngoài trình xử lý sự kiện một cách rõ ràng bằng cách sử dụng phương thức workbox.loadModule():

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will trigger the importScripts() for workbox.strategies and its dependencies:
workbox.loadModule('workbox-strategies');

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Referencing workbox.strategies will now work as expected.
    const cacheFirst = new workbox.strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});

Ngoài ra, bạn có thể tạo thông tin tham chiếu đến các không gian tên có liên quan bên ngoài trình xử lý sự kiện, rồi sử dụng thông tin tham chiếu đó sau:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will trigger the importScripts() for workbox.strategies and its dependencies:
const {strategies} = workbox;

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Using the previously-initialized strategies will work as expected.
    const cacheFirst = new strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});

Buộc sử dụng bản gỡ lỗi hoặc bản dựng chính thức

Tất cả mô-đun Workbox đều đi kèm với hai bản dựng, một bản gỡ lỗi chứa tính năng ghi nhật ký và kiểm tra loại bổ sung, và một bản dựng chính thức có thể bỏ qua việc kiểm tra loại và ghi nhật ký.

Theo mặc định, workbox-sw sẽ sử dụng bản gỡ lỗi cho các trang web trên máy chủ cục bộ, nhưng đối với mọi nguồn gốc khác, bản dựng này sẽ sử dụng bản dựng chính thức.

Nếu muốn buộc gỡ lỗi hoặc tạo bản dựng chính thức, bạn có thể đặt tuỳ chọn cấu hình debug:

workbox.setConfig({
  debug: true,
});

Chuyển đổi mã bằng cách sử dụng câu lệnh nhập để sử dụng workbox-sw

Khi tải Workbox bằng workbox-sw, tất cả các gói Workbox đều được truy cập thông qua không gian tên workbox.* chung.

Nếu có một mã mẫu sử dụng câu lệnh import mà bạn muốn chuyển đổi để sử dụng workbox-sw, thì bạn chỉ cần tải workbox-sw và thay thế tất cả câu lệnh import bằng biến cục bộ tham chiếu đến các mô-đun đó trên không gian tên chung.

Cách này hiệu quả vì mọi gói trình chạy dịch vụ của Workbox được phát hành thành npm cũng có sẵn trên không gian tên workbox chung thông qua phiên bản tên camelCase (ví dụ: bạn có thể tìm thấy tất cả các mô-đun đã xuất từ gói workbox-precaching npm trên workbox.precaching.*. Và tất cả các mô-đun được xuất từ gói workbox-background-sync npm có thể được tìm thấy trên workbox.backgroundSync.*).

Ví dụ: dưới đây là một số mã sử dụng câu lệnh import tham chiếu đến các mô-đun Workbox:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponse} from 'workbox-cacheable-response';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
  })
);

Và đây là cùng một mã được viết lại để sử dụng workbox-sw (xin lưu ý rằng chỉ có các câu lệnh nhập đã thay đổi – logic chưa được chạm đến):

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

const {registerRoute} = workbox.routing;
const {CacheFirst} = workbox.strategies;
const {CacheableResponse} = workbox.cacheableResponse;

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
  })
);