1

I m trying to add service worker plugin in existing angular 6 application which has webpack bundler. Followed the steps given in

https://github.com/oliviertassinari/serviceworker-webpack-plugin

package.json

{
  "name": "cloud-complince",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "webpack --mode production",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "6.1.0",
    "@angular/cli": "6.2.1",
    "@angular/common": "6.1.0",
    "@angular/compiler": "6.1.0",
    "@angular/compiler-cli": "6.1.0",
    "@angular/core": "6.1.0",
    "@angular/forms": "6.1.0",
    "@angular/http": "6.1.0",
    "@angular/platform-browser": "6.1.0",
    "@angular/platform-browser-dynamic": "6.1.0",
    "@angular/pwa": "^0.6.8",
    "@angular/router": "6.1.0",
    "@angular/service-worker": "6.1.0",
    "chart.js": "2.7.3",
    "chartjs-plugin-datalabels": "0.4.0",
    "classlist.js": "1.1.20150312",
    "clean-webpack-plugin": "0.1.19",
    "core-js": "2.5.7",
    "html-webpack-plugin": "3.2.0",
    "less": "3.8.1",
    "less-loader": "4.1.0",
    "ngx-cookie": "3.0.1",
    "raw-loader": "0.5.1",
    "rxjs": "6.2.0",
    "rxjs-compat": "6.3.3",
    "serviceworker-webpack-plugin": "^1.0.1",
    "web-animations-js": "2.3.1",
    "webpack-cli": "3.1.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.12.4",
    "@angular/language-service": "6.1.0",
    "@types/jasmine": "2.8.8",
    "@types/jasminewd2": "2.0.3",
    "@types/node": "10.9.4",
    "codelyzer": "4.3.0",
    "jasmine-core": "2.99.1",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "3.0.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "2.0.1",
    "karma-jasmine": "1.1.2",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "5.4.0",
    "ts-node": "7.0.0",
    "tslint": "5.11.0",
    "typescript": "2.9.2"
  }
}

sw.js is coped from above link and in app.module.ts

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

In Main.ts

if ('serviceWorker' in navigator && environment.production) {
// const registration = runtime.register();
navigator.serviceWorker.register('./sw.js').then(function (req) {
  //registration worked
  console.log("Registration successfull");
}).catch(function (error) {
  //registration failed
  console.log("Registration failed" + JSON.stringify(error));
});

}

Service worker is not registering. Kindly help me to resolve this issue.

Thanks.

Robert Hovhannisyan
  • 2,938
  • 6
  • 21
  • 43
Dee
  • 183
  • 3
  • 13
  • Why do you need to do a check in main.ts – Tony Ngo Aug 29 '19 at 03:48
  • For the first time i m working on this service worker, i referred above mentioned lin. Checking done in main.js so i have added in main.ts file – Dee Aug 29 '19 at 06:10
  • No need to add to the main. Putting `ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })` already does the job for you – Tony Ngo Aug 29 '19 at 06:11
  • There is a bug lurking in some ng versions and you need the extra code in main,.ts See answer here https://stackoverflow.com/questions/50968902/angular-service-worker-swupdate-available-not-triggered – MortimerCat Aug 29 '19 at 09:40

0 Answers0