ServiceWorker 报 MIME 类型错误

Bottle4142025-08-23 10:22

发生背景

笔者写前端埋点 SDK 时遇到问题，sw 文件是写在 sdk 里的，注册逻辑也写在 sdk 里了；但最终 sdk 是在 demo 里用的，导致 demo 里一直显示：

js 复制代码

SecurityError: Failed to register a ServiceWorker for scope ('http://localhost:5173/') with script ('http://localhost:5173/sw.js'): 、The script has an unsupported MIME type ('text/html').

笔者的 sw 引入：

js 复制代码

// sdk/src/xxx.ts

const registerServiceWorker = () => {
        if ('ServiceWorker' in window) {
            const swURL = './sw.js'
            navigator.serviceWorker
                .register(swURL)
                .then((reg) => console.log('SW registered:', reg))
                .catch((err) => console.error(err))
        }
    }

解决过程

按理来说 sw.js 应该要塞到 demo 的 ./public 文件夹里，笔者试了，的确成功了。但笔者不能让 sdk 使用者自己复制 sw.js 然后粘贴到自己的项目里，笔者不喜欢这个方案。

去网上查资料，看到有个评论说 可能是 service worker 文件没找到 导致的，笔者觉得他说的对！

想起刚刚看的资料，资料作者在vite里配置了路径，也许我也可以试试。

于是笔者打开 vite 的文档，找到静态资源处理那栏（因为正确放置位置是 public 下面，所以笔者把它当静态资源看），找到了这样的信息：

解决方案

于是笔者改为使用ESM动态导入，就像这样：

js 复制代码

    const registerServiceWorker = () => {
        ...
            const swURL = new URL('./sw.js', import.meta.url).href
        ...
    }

锵锵，解决哩！要是你遇到了和我一样的麻烦，不妨试一试😋☝️

资料： Service Worker 使用指南service worker用的可能不多，但在很多时候却有着不可替代的作用，现在很 - 掘金