本頁面由 Cloud Translation API 翻譯而成。

Service Worker 中的 ES 模組

importScripts() 的新型替代方案。

Jeff Posnick

背景

ES 模組一直以來都是開發人員最愛的應用程式除了好處他們提供了通用模組格式的承諾，而共用程式碼也可以該版本是在瀏覽器和其他執行階段 (例如 Node.js。雖然所有新版瀏覽器並非所有 ES 模組都支援部分程式碼和程式碼具體而言，支援將 ES 模組匯入瀏覽器的服務工作人員才開始向更多使用者提供這項功能

本文詳細說明服務工作處理程序中 ES 模組目前支援的狀態以及應避免的難題，以及以及提供回溯相容的 Service Worker 程式碼。

用途

Service Worker 內 ES 模組的理想用途是載入現代程式庫或設定程式碼，藉此與其他執行階段共用支援 ES 模組

在 ES 模組之前嘗試以這種方式分享程式碼，通常使用較舊的版本「通用」例如 UMD 並編寫程式碼，對全球公開變數。

透過 ES 模組匯入的指令碼可能會觸發 Service Worker 更新當內容有所變更時行為 / importScripts()。

目前限制

僅限靜態匯入

ES 模組可透過下列任一方式匯入：靜態方法方法是使用 import ... from '...' 語法動態接著透過 import() 方法在 Service Worker 中，只有靜態的語法。

這項限制類似於類似的限制 importScripts() 的使用費。對 importScripts() 的動態呼叫不會以及在 Service Worker 內部運作，以及所有 importScripts() 呼叫同步，必須在 Service Worker 完成 install 個階段。這項限制可確保瀏覽器知道，且可讓您以隱含方式快取，方便 Service Worker 的。

最終，我們可能會解除這項限制，動態 ES 模組匯入作業目前，請確保僅使用 Service Worker。

其他員工呢？

支援：「專用」中的 ES 模組工作站使用 new Worker('...', {type: 'module'}) 建構而成—範圍較廣，且 Chrome 和 Edge 都已支援 80 版，和近期版本。專屬工作站支援靜態和動態 ES 模組匯入作業。

Chrome 和 Edge 支援以下 ES 模組：共用員工 (自 83 版起)，目前僅支援其他瀏覽器。

不支援匯入地圖

「匯入地圖」允許舉例來說，在執行階段環境重新編寫模組指定碼，可載入 ES 模組的偏好 CDN 網址。

Chrome 和 Edge 89 以上版本支援匯入地圖無法搭配服務使用工作站

瀏覽器支援

從 91 版。

Safari 新增技術預覽版 122 版本，開發人員就會看到這項功能日後推出的 Safari 版本。

範例程式碼

這就是在網頁應用程式 window 中使用共用 ES 模組的基本範例，以及註冊使用相同 ES 模組的 Service Worker：

// 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);
    // ...
  })());
});

回溯相容性

上述範例對於但截至本文撰寫為止，實際上並非如此。

如要搭配未內建支援功能的瀏覽器，您可以執行 Service Worker 指令碼 ES 模組相容的 bundler 來建立 Service Worker 會內嵌所有模組程式碼，舊版瀏覽器。或者，如果您要匯入的模組是套裝組合中已包含的所有現有 IIFE 或 UMD 格式，可以使用 importScripts()。

當您擁有兩個版本的 Service Worker 後 (一個使用 ES) 而其他功能則需要偵測，並註冊相應的 Service Worker 指令碼。最佳偵測支援的做法目前不多變化，但您可以依循討論 GitHub 問題：最佳化建議。

_相片提供者：Vlado Paunovic (Unsplash 網站上)