hộp làm việc sw

Mô-đun workbox-sw cung cấp một cách thiết lập và chạy cực kỳ dễ dàng bằng mô-đun Hộp làm việc, đơn giản hoá việc tải mô-đun Hộp làm việc và cung cấp một số phương pháp 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ụ của bạn:

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ụ. cung cấp quyền truy cập vào tất cả các mô-đun Hộp làm việc.

workbox.precaching.*
workbox.routing.*
etc

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

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

Các tệp này sẽ được trình duyệt của bạn lưu vào bộ nhớ đệm để bạn có thể sử dụng trong tương lai sử dụng ngoại tuyến.

Sử dụng tệp hộp làm việc 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 tệp Workbox được lưu trữ trên tên miền của riêng bạn.

Cách đơn giản nhất là lấy các tệp thông qua lệnh copyLibraries của workbox-cli, sau đó yêu cầu workbox-sw 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ộ

Về sau, việc tải các mô-đun mới trong lần đầu tiên sẽ bao gồm lệnh gọi importScripts() có đường dẫn đến tệp JavaScript tương ứng (được lưu trữ trên CDN hoặc qua URL cục bộ). Trong cả hai trường hợp, một quy tắc hạn chế quan trọng sẽ được áp dụng: các lệnh gọi ngầm ẩn đế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 đồng bộ, quá trình thực thi ban đầu 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, cách tốt nhất là tham khảo các 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ụ: bạn có thể sử dụng mã trình chạy dịch vụ cấp cao nhất sau đây:

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()
);

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

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ã có thể sẽ chạy vi phạm quy định hạn chế này, bạn có thể trình bày rõ ràng kích hoạt lệnh gọi importScripts() bên ngoài trình xử lý sự kiện bằng cách sử dụng hàm 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 liên quan bên ngoài trình xử lý sự kiện, rồi sử dụng tệp đối 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 2 bản dựng, một bản gỡ lỗi chứa ghi nhật ký và kiểm tra loại bổ sung cũng như bản dựng sản xuất bỏ việc ghi nhật ký và kiểm tra kiểu.

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 bất kỳ nguồn gốc nào khác, Google 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 cấu hình debug tuỳ chọn:

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

Chuyển đổi mã bằ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 qua không gian tên workbox.* chung.

Nếu mã mẫu của bạn sử dụng các câu lệnh import mà bạn muốn chuyển đổi để sử dụng workbox-sw, 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.

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

Ví dụ: sau đây là một số mã sử dụng các câu lệnh import tham chiếu đến Mô-đun hộp làm việc:

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à chính mã được viết lại để sử dụng workbox-sw (lưu ý rằng chỉ 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]})],
  })
);