javascript - 使用 Vite 构建的 React.js 不包含 service-worker.ts-6ren

javascript - 使用 Vite 构建的 React.js 不包含 service-worker.ts

转载作者：行者123 更新时间：2023-12-05 04:41:50

26

4

我正在使用 Vite 通过 React (typescript) 构建一个 SPA，并且我正在尝试注册一个 service-worker。我将脚本注册为 module 类型，service-worker.ts 位于 src/web-worker/service-worker.ts。在 src/web-worker

也有一个 tsconfig.json

在 Dev 中一切正常，但在构建时，src/web-worker/service-worker.ts 不会被替换为任何等效内容。

有什么建议吗？

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="/src/styles/globals.css">
  <title>Vite App</title>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
  <script type="text/javascript">
    if ('serviceWorker' in navigator) {
      (async () => {
        await navigator.serviceWorker.register("src/web-worker/service-worker.ts", { type: 'module' })
        console.log("Service worker registered")
      })()
    }
  </script>
</body>

</html>

src/web-worker/service-worker.ts

// Constants
const CACHE_NAME = 'mycache-v1.0.0'
const urlsToCache = ['/']

declare const self: ServiceWorkerGlobalScope;

self.addEventListener('install', async (event: ExtendableEvent) => {
    try {
        // Create (open) cache
        const cache = await caches.open(CACHE_NAME)
        await cache.addAll(urlsToCache)
        console.log("Cache opened")
    } catch (err: any) {
        console.log("Error while installing SW: ", err.message)
    }
})

self.addEventListener('fetch', (e: FetchEvent) => {
    e.respondWith((async () => {
        // Handling fetch
        console.log(`Handling req for '${e.request.url}'`)
        const cachedRes = await caches.match(e.request, { cacheName: CACHE_NAME })
        if (cachedRes) {
            console.log(`Serving cached response for '${e.request.url}'`)
        }
        return cachedRes || await fetch(e.request)
    })())
})

export default null

src/web-worker/tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["ESNext", "WebWorker"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
  },
  "include": ["*.ts"]
}

最佳答案

这个https://github.com/antfu/vite-plugin-pwa有一个vitejs插件.您可以在此处找到 React 文档 https://vite-plugin-pwa.netlify.app/examples/react.html

关于javascript - 使用 Vite 构建的 React.js 不包含 service-worker.ts，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69961761/

26

4

0

文章推荐： r - 使用 spsurvey 在多边形内绘制 GRTS 点

文章推荐： python - 如何将cookie从flask设置为reactjs

service-worker - 在一个域中推荐一个顶级 Service Worker 或多个 Service Worker？
如果一个域有多个团队和多个 Web 应用程序，那么注册 Service Worker 来管理整个站点的最佳建议是什么？具有范围的顶级服务 worker /或子域中的多个服务 worker ？由于一个域
service-worker - 用于网络流量分析的服务 worker
我开发了一个应用程序来分析播放 YouTube 视频时的网络流量。它使用 chrome.webRequest，我使用 onHeadersReceived 事件计算流量。我想使用 service wo
service-worker - 如何将更新部署到在客户站点上运行的服务 worker ？
假设我提供了不同网站使用的推送通知服务。此服务需要在我的客户站点上安装服务 worker 。我希望架构具有一些属性: 完全静态资源。安装service worker文件和配置JS片段等过程只需要完成一
service-worker - 如何在用户脚本中使用服务 worker
我要缓存某人网站中的特定请求，那么我发现 service worker 是一个不错的选择。但我找不到任何方法通过 tampermonkey 注入(inject)一个 service worker
service-worker - 刷新时激活更新的服务 worker
当 Service Worker 更新时，它不会以正确的方式控制页面；它进入“等待”状态，等待被激活。令人惊讶的是，更新后的 Service Worker 甚至在刷新页面后都无法控制选项卡。谷歌解释
service-worker - 从 Service Worker 中获取 Service Worker id 或 date
有谁知道是否有办法在 service worker 中获取此号码或日期: 将我的服务 worker 缓存命名为 cache-1182 会很方便或 cache-20171127171448 我想在安装事
javascript - Uncaught ReferenceError : Worker is not defined while trying to create a Worker within another Worker in Chrome
这link说: Workers may spawn more workers if they wish. So-called sub-workers must be hosted within the
angular - 如何使用Angular的safety-worker.js卸载Service Worker？
有许多关于使用 ngsw-worker.js 安装 ServiceWorker 的分步指南；然而，甚至没有关于使用 safety-worker.js 卸载 ServiceWorker 的分步指南。 s
service-worker - Service Worker 中未触发定期同步
我正在尝试为我的网站使用后台定期同步。我正在使用 localhost 并在 1*1000 毫秒时注册 periodicsync 事件，但这根本不会触发。我看过这个demo ，但即使我将该网站安装为应
celery 多名 worker ，但只有一名击败 worker
我试图让用户安排一个周期性任务。我还在一个容器中运行多个 celery worker 。我对该容器的命令过去是这样的: celery worker -c 4 -B -l INFO -A my.cele
service-worker - Service Worker 的目的是什么？
从我所看到的，你甚至可以缓存一个网页。根据此文档:https://www.mnot.net/cache_docs/#BROWSER ，表示可以缓存在浏览器缓存中。我看到即使是 serviceworke
service-worker - 为什么服务 worker 缓存所有图像？
我只是在测试 Service Worker 的功能以了解其工作原理。所以现在我遇到了一个问题。 var CACHE_NAME = 'my-site-cache-v1'; var urlsToCache
service-worker - 如何阻止年长的 Service Worker？
下图显示安装了两名工作人员 - 一名处于事件状态，另一名未处于事件状态(刚刚安装)。注册 service worker 更改 service-worker.js并重新加载页面。逻辑是 Servic
service-worker - service worker 在第一次加载时获取事件
我正在尝试学习渐进式 Web 应用程序的一些基础知识，并且在我阅读的其中一篇教程中学习 [在安装了 service worker 并且用户导航到不同的页面或刷新后，service worker 将开始
service-worker - Service Worker 与网页之间的通信
我正在开发一个应用程序，其目标是定期(例如每小时)向用户发送通知。我的想法是使用一个可以在选项卡关闭后运行的服务 worker ，并继续向用户发送这些通知。网页需要能够与 Service Work
service-worker - Service Worker 和透明缓存更新
我正在尝试为一个简单但旧的 Django Web 应用程序安装 ServiceWorker。我开始使用示例 read-through caching example from the Chrome t
service-worker - 在开发模式下禁用 Service Worker。
在我们开发的情况下，我们提供来自 https://localhost 的文件因为该应用程序托管在 salesforce.com 中。在 chrome service worker 中，chrome 会
service-worker - 服务 worker 在浏览器离线时保存表单数据
我是服务人员的新手，并且浏览了各种文档(Google，Mozilla，serviceworke.rs，Github，StackOverflow questions)。最有用的是ServiceWorke
温暖 worker 的Go worker 模式
我正在解决一个问题，我有一组“热情的 worker ”。这意味着它们被维护在内存中，维护自己的上下文并且是可调用的。我一直在研究各种 Go Worker 实现，但都依赖于闭包或返回结果的简单计算函数。
service-worker - Service Worker 未在非根路径上使用
我有一个部署到静态服务器的非根路径的网络应用程序。即MyApp构建时部署到路径/文件夹 https://example.com/myapp . MyApp正在使用 vue 和 webpack 所以我添

首页

博学

6Ren·AI

商城

javascript - 使用 Vite 构建的 React.js 不包含 service-worker.ts