文章/答案/技术大牛

发布

社区首页 >问答首页 >使用Vite构建的React.js不包括service-worker.ts

问使用Vite构建的React.js不包括service-worker.ts
EN

Stack Overflow用户

提问于 2021-11-14 09:27:13

回答 1查看 2.9K关注 0票数 3

我正在使用Vite来构建一个带有React (类型记录)的SPA，并且我正在尝试注册一个服务工作者。我将脚本注册为module类型，而service-worker.ts位于src/web-worker/service-worker.ts。还有tsconfig.json at src/web-worker

所有东西都在Dev中工作，但是当它被建好的时候，src/web-worker/service-worker.ts is not replaced with anything equivalent。

有什么建议吗？

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"]
}

javascript

reactjs

typescript

vite

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-18 09:14:36

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69961761

复制

相似问题

问使用Vite构建的React.js不包括service-worker.ts
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Vite构建的React.js不包括service-worker.tsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Vite构建的React.js不包括service-worker.ts
EN