ServiceWorker 报 MIME 类型错误

发生背景

笔者写前端埋点 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用的可能不多,但在很多时候却有着不可替代的作用,现在很 - 掘金

相关推荐
红树林0716 分钟前
BeautifulSoup 的页面中需要获取某个元素的 xpath 路径
前端·python·网络爬虫·beautifulsoup
三小河43 分钟前
教你发布一个npm的组织包
前端
青椒a1 小时前
002.nestjs后台管理项目-数据库之prisma(上)
前端
米诺zuo1 小时前
react 中的useContext和Provider实践
前端·react.js
asdfsdgss1 小时前
Angular CDK 自适应布局技巧:响应式工具实操手册
前端·javascript·angular.js
袁煦丞1 小时前
【私人导航员+内网穿透神器】Sun-Panel × cpolar让NAS变身你的数字管家:cpolar内网穿透实验室第564个成功挑战
前端·程序员·远程工作
爱吃的强哥1 小时前
Electron_Vue3 自定义系统托盘及退出二次确认
前端·javascript·electron
袁煦丞1 小时前
开启SSH后,你的NAS竟成私有云“变形金刚”:cpolar内网穿透实验室第645个成功挑战
前端·程序员·远程工作
IT_陈寒1 小时前
SpringBoot 3.2新特性实战:这5个隐藏功能让我开发效率提升50%
前端·人工智能·后端
申阳2 小时前
2小时个人公司:一个全栈开发的精益创业之路
前端·后端·程序员