Angular 如果创建了 ScrollMagic Controller，则无法注册 Service Worker

Question

我想在我的 Angular 支持的网站中启用 service worker，但如果使用 scrollmagic，它不会自行注册。如果我禁用 ScrollMagic 控制的动画，它会正常注册。

我在 angular-cli.json:

中导入了 GSAP、ScrollMagic

      "scripts": [
    "../node_modules/gsap/src/uncompressed/TweenMax.js",
    "../node_modules/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js",
    "../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js"
  ]

并在我使用 ScrollMagic 的每个组件中声明：

declare let TimelineMax: any;
declare let ScrollMagic: any;
declare let TweenMax: any;

我这样创建控制器：

ngOnInit() {
this.animation();
}
 animation() {
    this.controller = new ScrollMagic.Controller({
      globalSceneOptions: {
        triggerHook: 'onLeave',
        duration: 0
      }
    });
    (...)
  }
}

因此，如果我转到没有 scrollmagic 的页面或者我使用以下方法禁用它 onclick，它会注册 service worker：

(...)   
 this.controller.destroy();
(...)

在那种情况下，它会在网站打开时加载 SW（无需刷新）。

如果我使用 setTimeout 或类似的解决方案创建控制器，它不会注册 SW:

setTimeout(()=>{
  this.controller = new ScrollMagic.Controller({
  globalSceneOptions: {
    triggerHook: 'onLeave',
    duration: 0
  }
});
}, 3000);

编辑：软件配置： ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

app.module.ts

  imports: [
    (...)
    ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
  ],

Answer 1

我遇到了同样的问题。每当您使用 setTimeout 或 setTimeInterval 函数时，该应用程序都无法稳定下来，这就是服务工作者未被下载的原因。

解决方法：

打开main.ts并尝试手动注册服务工作者。它对我有用。

 platformBrowserDynamic().bootstrapModule(AppModule)
  .then(() => {
    if ('serviceWorker' in navigator && environment.production) {
      navigator.serviceWorker.register('/ngsw-worker.js'); // replace the file-name if you've changed
    }
  })
 .catch(err => console.log(err));

参考Link：

https://github.com/ritwickdey/ritwickdey.github.io/blob/388d3d15e725b228ae80c0ae79beb5746c22cc8c/src/main.ts#L11 （这是我的作品集网站项目）

Angular 如果创建了 ScrollMagic Controller，则无法注册 Service Worker

Angular unable to register Service Worker if ScrollMagic Controller is created

typescript

scrollmagic

gsap

angular

angular5

解决方法：

参考Link：