Angular 9 带有 Carousel 和 Service worker 的 PWA 未注册

Question

大家好，情况有点奇怪，

首先我使用 Angular 9 和 Bootstrap 3.3.5（还不能更新到最新版本），

在主页上我有 Carousel 并且我还实现了 angular PWA。

问题是如果我使用 PWA 和轮播，Serviceworker(SW) 不会注册。如果我注释掉轮播代码，它就会执行。如果我评论 Jquery 它会被注册，因为这样轮播就不起作用了。 ngx-owl-carousel 也发生了同样的事情，

我这里没有任何解决办法。如果您能提供任何类型的提示或解决方案，那将是一个很大的帮助。谢谢：）有趣的发现是，当我点击旋转木马时，有时 service worker 会以某种方式注册。 -_- 不管怎样，这是我的轮播代码，

<div class="bloc bgc-white full-width-bloc l-bloc" id="bloc-2">
        <div class="container">
            <div class="row row-no-gutters">
                <div class="col-sm-12">
                    <div id="carousel-1" class="carousel no-shadows slide" data-ride="carousel">
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img [attr.src]="sliderData[0].sliderImgUrl" (click)="navigateSliderProd('product',sliderData[0])"  (load)="imageLoaded($event)"/>

                            </div>
                            <div class="item"  *ngFor="let slider of sliderData | slice:1;let i = index">
                                <img [attr.src]="slider.sliderImgUrl" (click)="navigateSliderProd('product',sliderData[i+1])" (load)="imageLoaded($event)"/>

                            </div>
                        </div>
                        <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
                            <span class="fa fa-chevron-left"></span><span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
                            <span class="fa fa-chevron-right"></span><span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

设置 ServiceWorkerModule registrationStrategy to registerImmediately (or registerWithDelay). By default SW registration waits until the app is stable（没有未完成的微任务或宏任务）。 setTimeout，在轮播中很常见，会导致应用永远不稳定。

ServiceWorkerModule.register('ngsw-worker.js', {
  enabled: environment.production,
  registrationStrategy: 'registerImmediately',
}),

请注意，如果仍然不稳定，Angular 将通过在 30 秒后注册来实现 unnecessary。

Angular 9 带有 Carousel 和 Service worker 的 PWA 未注册

Angular 9 PWA with Carousel and Service worker does not get registered

javascript

progressive-web-apps

bootstrap-4

angular

angular-service-worker