Angular не может зарегистрировать Service Worker, если создан ScrollMagic Controller - PullRequest
Новая
       7

Angular не может зарегистрировать Service Worker, если создан ScrollMagic Controller

0 голосов
/ 25 апреля 2018

Я хочу включить сервисного работника на моем веб-сайте на Angular, но он не регистрируется, если используется scrollmagic. Если я отключаю анимацию, управляемую ScrollMagic, она регистрируется очень хорошо.

Я импортировал GSAP, ScrollMagic в angular-cli.json: 

      "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
      }
    });
    (...)
  }
}

Таким образом, регистрируется сервисный работник, если я перехожу на страницу, на которой нет прокрутки, или я отключаю ее по нажатию кнопки: 

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

В этом случае он загружает ПО, когда сайт открыт (без обновления).

Он не регистрирует SW, если я использую setTimeout или аналогичные решения для создания контроллера: 

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

Edit: Конфигурация SW: 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})
  ],

1 Ответ

0 голосов
/ 25 апреля 2018

Я столкнулся с той же проблемой.Всякий раз, когда вы используете функцию 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));


Ссылка:

https://github.com/ritwickdey/ritwickdey.github.io/blob/388d3d15e725b228ae80c0ae79beb5746c22cc8c/src/main.ts#L11 (Это проект моего сайта-портфолио)

...