vercel 发布了 sveltekit，其中 vite 无法注册放置在 src 文件夹中的 serviceworker

Question

这个问题需要 vercel 团队或 sveltekit 团队的人，因为它与我发布到 vercel 的 pwa 应用程序有关： 1- 我在“静态”文件夹中放置了一个 minifest1.js 文件 2- 我将 testserviceworker.js 文件放在“SRC”文件夹中。

当我通过“npm 运行 build”和“npm 运行 preview”在本地使用我的笔记本电脑运行我的应用程序时，vite 注册了我的 serviceworker，我的缓存被填充并且应用程序可作为 pwa 安装。

当我将相同的代码部署到vercel 时，vite 无法注册serviceworker。为了进行实验，我将 serviceworker 文件添加到静态文件夹，并在 index.svelte 中添加了一个注册按钮，以便在我按下按钮时手动注册文件。

当我按下按钮时，serviceworker 已注册，我能够在开发工具、应用程序选项卡、缓存中验证它并能够安装我的应用程序，但我的灯塔报告显示 pwa 部分失败。

所以我的问题是关于 vite 在启动站点时默认注册 serviceworker。我是否需要使用“navigator.serviceWorker.register('testserviceworker.js”在 load 或 onMount 中添加一个函数，或者在 vercel 或 svelte.config.js 中有某种神奇的配置指向 vite serviceworker.js 所以它在启动应用程序时注册它？

我在这里添加了 manifest 和 serviceworker 的文件，但我认为它们与我的问题无关，因为这是配置问题而不是代码问题：

清单文件：

{
  "name": "PWATEST",
  "short_name": "PWATESTSHORTNAME", 
  "start_url": "/",
  "scope" : "/",
  "background_color": "#1b4079",
  "theme_color": "#d62828",
  "display": "fullscreen",
  "icons": [
    {
      "src": "/512svelte-welcome.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose" : "any maskable"
    }    
  ]
}

我的testserviceworker.js

console.log("*****hello from testserviceworker.js inside static folder********")

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v3').then((cache) => {
       cache.add(
          './favicon.png'             
       );
    })
  );
});
    
self.addEventListener('activate', function(event) {
   console.log("serviceworker activate fn :", event)
});

self.addEventListener('fetch', function(event) {
 console.log("fetch fn inside serviceworker.js") 
})

这里是 LINK to vercel app 运行在主页中逐步测试此设置的步骤。

有vercel组员或者Sveltekit忍者战士可以指导我解决这个问题吗？没有人再建网站了。安装 pwa 是必经之路，Sapper 过去默认包含一个 serviceworker 和清单文件。由于一些神秘的原因，vite 参与其中并且该能力消失了，现在在部署之后，vite 无法找到 serviceworker 来注册它，如 sveltekit 文档中所述：

Doc-serviceworkers 通常值得使用服务工作者通过预缓存构建的 JS 和 CSS.

来加速导航

在 SvelteKit 中，如果你有一个 src/service-worker.js 文件（或 src/service-worker.ts，或 src/service-worker/index.js，等等）它将被构建邀请并自动注册。

总结：

1-如何让 vite 知道 serviceworker 文件在特定位置，如静态文件夹或应用程序的不同部分？

2-如果我将 serviceworker.js 放在 src 文件夹中，如何修复注册 serviceworker 的问题？

希望我们能从 vercel 团队或 sveltekit 团队中找人来调查这个问题。我 found this issue 并且我可以禁用它但是如何在不按下按钮的情况下注册 serviceworker？ 将代码放在load或onMount中？

为了方便大家，published vercel app link又来了。

Answer 1

我在 onMount 中以注册结束。现在，当应用程序加载时，serviceworker 已注册并且可以安装 pwa。它通过了灯塔检查。全绿。

这是 onMount 的代码：

import { onMount } from 'svelte';


    onMount(async () => {
        
        if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('testserviceworker.js', { scope: '/' }).then(function(reg) {
    // registration worked
    console.log('Registration succeeded. Scope is ' + reg.scope);
  }).catch(function(error) {
    // registration failed
    console.log('Registration failed with ' + error);
  });
}; 



    });

回顾一下：当您发布到 vercel - 根据 sveltekit 文档 - 假设为您注册 serviceworker。 1- 将 serviceworker.js 文件放在静态文件夹中。 2- 添加 onMount fn 并在那里注册 serviceworker。 3- 无需在 svelte.config.js as 中禁用 vite 自动注册在文档中指示，因为我没有禁用它并且它没有导致任何问题。

希望sveltekit 1.0早日发布。我相信到那时大多数这些错误都会被解决。

vercel 发布了 sveltekit，其中 vite 无法注册放置在 src 文件夹中的 serviceworker

vercel published sveltekit where vite fails to register serviceworker placed in src folder

javascript

service-worker

vercel

sveltekit