Mô-đun ES trong trình chạy dịch vụ

Phương thức thay thế hiện đại cho importScripts().

Jeff Posnick

Thông tin khái quát

Mô-đun ES đã được nhà phát triển yêu thích từ một thời gian. Ngoài việc nhiều lợi ích khác, chúng hứa hẹn về một định dạng mô-đun phổ quát nơi có thể chia sẻ mã phát hành một lần và chạy trong các trình duyệt và trong các thời gian chạy thay thế như Node.js. Trong khi tất cả trình duyệt hiện đại cung cấp một số hỗ trợ cho mô-đun ES, không phải tất cả các mô-đun đó đều cung cấp hỗ trợ ở mọi nơi mã có thể chạy. Cụ thể, tính năng hỗ trợ nhập các mô-đun ES bên trong của trình duyệt service worker mới bắt đầu trở nên rộng rãi hơn.

Bài viết này trình bày chi tiết về trạng thái hiện tại của việc hỗ trợ mô-đun ES trong trình chạy dịch vụ trên các trình duyệt phổ biến, cùng với một số lỗi cần tránh và các phương pháp hay nhất để gửi mã trình chạy dịch vụ có khả năng tương thích ngược.

Trường hợp sử dụng

Trường hợp sử dụng lý tưởng cho các mô-đun ES bên trong trình chạy dịch vụ là để tải mã cấu hình hoặc thư viện hiện đại được chia sẻ với các môi trường thời gian chạy khác hỗ trợ các mô-đun ES.

Cố gắng chia sẻ mã theo cách này trước khi các mô-đun ES đòi hỏi phải sử dụng phiên bản cũ hơn "phổ thông" các định dạng mô-đun như UMD bao gồm mã nguyên mẫu không cần thiết và viết mã đã thực hiện thay đổi đối với dữ liệu hiển thị trên toàn bộ biến.

Những tập lệnh được nhập qua các mô-đun ES có thể kích hoạt trình chạy dịch vụ cập nhật nếu nội dung của chúng thay đổi, phù hợp với hành vi trong số importScripts().

Hạn chế hiện tại

Chỉ nhập dữ liệu tĩnh

Bạn có thể nhập các mô-đun ES theo một trong hai cách: tĩnh, bằng cú pháp import ... from '...' hoặc một cách linh động, bằng phương thức import(). Bên trong một trình chạy dịch vụ, chỉ có phần tĩnh Google hiện hỗ trợ cú pháp.

Hạn chế này tương tự như hạn chế tương tự được đặt vào ngày sử dụng importScripts(). Các lệnh gọi động đến importScripts() không hoạt động bên trong một trình chạy dịch vụ và tất cả các lệnh gọi importScripts(), vốn là vốn có tính đồng bộ, phải hoàn tất trước khi worker dịch vụ hoàn tất Giai đoạn install. Hạn chế này đảm bảo rằng trình duyệt biết và có thể lưu vào bộ nhớ đệm ngầm, tất cả mã JavaScript cần thiết cho trong quá trình cài đặt.

Cuối cùng, quy định hạn chế này có thể được gỡ bỏ và tiếng Tây Ban Nha linh động nhập mô-đun có thể được phép. Hiện tại, hãy đảm bảo rằng bạn chỉ sử dụng cú pháp tĩnh bên trong một trình chạy dịch vụ.

Còn các trình thực thi khác thì sao?

Hỗ trợ cho Các mô-đun ES trong "chuyên dụng" trình thực thi—đó được tạo bằng new Worker('...', {type: 'module'})—phổ biến hơn và đã được hỗ trợ trong Chrome và Edge từ phiên bản 80, cũng như các phiên bản gần đây của Safari. Cả tính năng nhập mô-đun ES tĩnh và động đều được hỗ trợ trong worker chuyên dụng.

Chrome và Edge đã hỗ trợ các mô-đun ES bằng nhân viên dùng chung từ phiên bản 83, nhưng không có trình duyệt khác có hỗ trợ tại thời điểm này.

Không hỗ trợ nhập bản đồ

Nhập bản đồ cho phép môi trường thời gian chạy để viết lại thông số mô-đun, chẳng hạn như thêm tiền tố URL của một CDN ưu tiên mà từ đó các mô-đun ES có thể được tải.

Trong khi Chrome và Edge phiên bản 89 trở lên hỗ trợ nhập bản đồ, chúng hiện không thể dùng với dịch vụ trình thực thi.

Hỗ trợ trình duyệt

Chrome và Edge hỗ trợ các mô-đun ES trong trình chạy dịch vụ, kể từ phiên bản 91.

Safari đã thêm hỗ trợ trong Bản phát hành Bản dùng thử công nghệ 122 và nhà phát triển sẽ thấy chức năng này được phát hành trong phiên bản phiên bản Safari trong tương lai.

Mã mẫu

Đây là ví dụ cơ bản về cách sử dụng mô-đun ES dùng chung trong window của một ứng dụng web ngữ cảnh, đồng thời đăng ký một trình chạy dịch vụ sử dụng cùng một mô-đun ES:

// Inside config.js:
export const cacheName = 'my-cache';

// Inside your web app:
<script type="module">
  import {cacheName} from './config.js';
  // Do something with cacheName.

  await navigator.serviceWorker.register('es-module-sw.js', {
    type: 'module',
  });
</script>

// Inside es-module-sw.js:
import {cacheName} from './config.js';

self.addEventListener('install', (event) => {
  event.waitUntil((async () => {
    const cache = await caches.open(cacheName);
    // ...
  })());
});

Khả năng tương thích ngược

Ví dụ trên sẽ hoạt động tốt nếu tất cả trình duyệt đều hỗ trợ mô-đun ES trong service worker, nhưng cho đến thời điểm viết bài này, thì không phải như vậy.

Để phù hợp với các trình duyệt không có hỗ trợ được tích hợp sẵn, bạn có thể chạy tập lệnh trình chạy dịch vụ thông qua Trình gói tương thích với mô-đun ES để tạo một Service worker bao gồm tất cả mã mô-đun cùng dòng và sẽ hoạt động trong các trình duyệt cũ hơn. Ngoài ra, nếu các mô-đun mà bạn đang cố gắng nhập là đã có sẵn được nhóm trong IIFE hoặc UMD, bạn có thể nhập chúng bằng cách sử dụng importScripts().

Khi bạn có sẵn hai phiên bản trình chạy dịch vụ—một phiên bản sử dụng tiếng Tây Ban Nha các mô-đun khác với những mô-đun khác không có—bạn sẽ cần phải phát hiện những gì trình duyệt hỗ trợ và đăng ký tập lệnh trình chạy dịch vụ tương ứng. Tốt nhất các phương pháp phát hiện hỗ trợ hiện đang thay đổi, nhưng bạn có thể làm theo thảo luận về chủ đề này Vấn đề GitHub đối với nội dung đề xuất.

_Ảnh của Vlado Paunovic trên Unsplash_