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

相关推荐
鱼樱前端3 小时前
uni-app快速入门章法(二)
前端·uni-app
silent_missile3 小时前
vue3父组件和子组件之间传递数据
前端·javascript·vue.js
IT_陈寒5 小时前
Vue 3.4 实战:这7个Composition API技巧让我的开发效率飙升50%
前端·人工智能·后端
少年阿闯~~6 小时前
HTML——1px问题
前端·html
Mike_jia6 小时前
SafeLine:自托管WAF颠覆者!一键部署守护Web安全的雷池防线
前端
brzhang6 小时前
把网页的“好句子”都装进侧边栏:我做了个叫 Markbox 的收藏器,开源!
前端·后端·架构
VincentFHR7 小时前
Canvas 高性能K线图,支持无限左右滑动
前端·数据可视化·canvas
sophie旭8 小时前
一道面试题,开始性能优化之旅(3)-- DNS查询+TCP(二)
前端·面试·性能优化
面向星辰8 小时前
css选择器(继承补充)
前端·css
koooo~8 小时前
Vue3中的依赖注入
前端·javascript·vue.js