服务工作者获取事件未触发（路径问题）

Question

所以我正尝试在我的 angular 网络应用程序中与 service worker 一起工作以显示自定义离线页面，我运行遇到的问题是

尝试从根目录注册 service worker 文件 (service-worker.js) 时，出现以下错误

但是，如果我将服务-worker.js 文件放在资产文件夹中，它会按预期工作，但不会触发提取，因为该服务位于资产文件夹中

我的问题是，如果我的文件位于 angular 根文件夹中，如何 import/give 找到正确的路径。这样service worker的作用域就是http://localhost:4200/

app.component.ts


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'service-worker';

  ngOnInit(): void{
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/assets/service-worker.js').then((reg)=>{
        console.log(reg);
      })
    }
  }
}

下图中我的 service worker 文件的位置

我是 angular 的新手，所以任何指导都会有所帮助，在此先感谢

Answer 1

angular.json 中有一个名为 assets 的配置部分。本节描述应将哪些“静态”文件与应用程序文件一起传输到 dist 文件夹。默认 "src/favicon.ico" 和 "src/assets" 应该在那里。还要添加 path/to/service-worker.js。它将到达生成的构建文件夹

服务工作者获取事件未触发（路径问题）

Service worker fetch event not firing (Path issue)

angular

service-worker

angular-service-worker