angular-service-worker

I am registering ngsw-worker.js in both main.ts and app.module.ts. Is this ok? Such as would it create 2 instances of service worker? Would there be a conflict in service worker? main.ts platformBrowserDynamic().bootstrapModule(AppModule).then(() => { if ('serviceWorker' in navigator && environment.production) { navigator.serviceWorker.register('/ngsw-worker.js'); } }).catch(err => console.log(err)); app.module.ts @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}), AppRoutingModule ],

I try to add service worker to my project after updating to angular 5 and have some problems. I add imports to app.module.ts: import {ServiceWorkerModule} from '@angular/service-worker'; import {environment} from '../environments/environment'; ... environment.production ? ServiceWorkerModule.register('/ngsw-worker.js') : [], execute $ ng set apps.0.serviceWorker=true to allow service workers in project generate config: { "index": "/index.html", "assetGroups": [ { "name": "app", "installMode": "prefetch", "resources": { "files": [ "/index.html" ], "versionedFiles": [ "/*.bundle.css", "/*.bundle

I have updated my angular app into PWA, since I need to preload all of the assets on the first launch (application have a lots of images, which are used for UI). That's why I would like to show some kind of spinner/loading bar during service worker install event and hide it when it's done. So first question - is it possible to handle this event from the component? I have found this example and tried to add it inside first component, that loads on app launch, but didn't get any logs. So probably it doesn't work that way. ngOnInit() { self.addEventListener('install', event => { this.log(

Angular team made a great job and introduced service workers support in the version 5. The documentation is quite helpful and I can really see how the things will work right after reading the related articles, however there is one topic that is not covered there. How does this all work in the browsers that do not support service workers. This is what's being said: Your application must run in a web browser that supports service workers. Currently, the latest versions of Chrome and Firefox are supported. To learn about other browsers that are service worker ready, see the Can I Use page. Can I

I'm trying to add service workers to our existing angular (5.2, CLI 1.7.1) application. I did everything I was suppose to: I created ngsw-config.json I run the the ng set apps.0.serviceWorker=true command so I have "serviceWorker": true, in angular-cli.json . I have installed "@angular/service-worker": "5.2.9" I added to app.module.ts : import { ServiceWorkerModule } from '@angular/service-worker'; imports: [ ... ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }), ] I even tried to add this piece of code (which I found as a solution somewhere) to main.ts

I have a SSR Angular app which I am trying to transform into a PWA. I want it to be server-side rendered for SEO and for the "fast first rendering" that it provides. The PWA mode works fine when combined with SSR, but once the app is loaded, when we refresh it, the client index HTML file is loaded instead of the server-side rendered page. I have dug into the code of ngsw-worker.js and I saw this: // Next, check if this is a navigation request for a route. Detect circular // navigations by checking if the request URL is the same as the index URL. if (req.url !== this.manifest.index && this

I am using the Angular-CLI 1.6.6 and @angular/service-worker 5.2.5 in our Angular 5.2.5 app. Everything works fine on the local lite-server, as well as on the production server, except for one error message popping in our production environment: Failed to load resource: the server responded with a status of 504 (Gateway Timeout) Looking into the ngsw-worker.js script I found the lines (2466 following) where the error message above is generated: async safeFetch(req) { try { return await this.scope.fetch(req); } catch (err) { this.debugger.log(err, `Driver.fetch(${req.url})`); return this