importScripts() 的新型替代方案。
背景
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 網站上)