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

【问题标题】：Service worker fetch event not firing (Path issue)服务工作者获取事件未触发（路径问题）
【发布时间】：2021-06-17 17:32:27
【问题描述】：

所以我正在尝试在我的 Angular Web 应用程序中使用服务人员来显示自定义离线页面，我遇到的问题是

尝试从根目录注册服务工作者文件（service-worker.js）时，出现以下错误

但是，如果我将 service-worker.js 文件放在 assets 文件夹中，它会按预期工作，但是由于服务位于 assets 文件夹中，因此 fetch 不会触发

我的问题是，如果我的文件位于 angular 根文件夹中，如何导入/提供正确的路径。这样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 新手，所以任何指导都会有所帮助，在此先感谢

【问题讨论】：

标签： angular service-worker angular-service-worker

【解决方案1】：

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

【讨论】：