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

Question

Hey guys this is a bit weird situation,

First I use Angular 9 with Bootstrap 3.3.5 (cannot update to latest yet),

on the homepage I have the Carousel and it I have implemented angular PWA also.

Problem is if I use PWA and carousel, Serviceworker(SW) does not get regitered. If I commented out the carousel code it does. If I commented Jquery it get registered because then carousel does not work. And same thing happen with ngx-owl-carousel also,

I do not have any solution here. If you can provide any kinds of hints or solutions it will be a big help. Thanks:) Interesting find is that when I click on the carousel sometimes service worker gets registered somehow. -_- anyway this is my code for the carousel,

<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

Set the ServiceWorkerModule registrationStrategy to registerImmediately (or registerWithDelay ). By default SW registration waits until the app is stable (no outstanding microtasks or macrotasks). A setTimeout , which is common in carousels, will cause the app to never be stable.

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

Note that Angular is making this unnecessary by registering after 30 seconds if still unstable.