CODEWITHSUNDEEP
angularservice-worker
Sarath
Sarath

Reputation: 1499

Angular 4 enable service worker in web application

I am new in angular 4 . I am developing application using angular 4. I need to enable the offline capabilities using service worker.

npm i @angular/service-worker --S

I tried with above package but its not working i don't know what are the configuration need to make for this service worker. Any one please help me!!

I used the angular service worker i am getting following error in my console.

ERROR in Error: Metadata version mismatch for module C:/projectfolder/node_modules/@angular/service-worker/service-worker.d.ts, found version 4, expected 3, resolving symbol AppModule in C:/projectfolder/src/app/app.module.ts, resolving symbol AppModule in C:/projectfolder/src/app/app.module.ts, resolving symbol AppModule in C:/projectfolder/src/app/app.module.ts

Why this error?

Upvotes: 2

Views: 884

Answers (2)

Nathan
Nathan

Reputation: 125

I think you can't use service workers with angular 4, you need to upgrade to angular 5.

If you check the API list for angular 4 you will notice that there are no service workers but if you check the API list for angular 5 you will see that it is added there that's why I think that in order to use service workers in angular, you must upgrade to angular 5.

Also it is stated in Angular Service Worker Into that service workers starts with angular 5.

Upvotes: 0

Joseph Simpson
Joseph Simpson

Reputation: 4183

When researching which service worker library to use (as of October 2017), I saw complaints of poor documentation and few examples for all of the big players, which appear to be,

I opted for Workbox because it's billed as the sw-precache sucessor (which by all reports actually worked and is in use) and offered better docs than @angular/service-worker which still appears to be in its infancy.

To create a service worker using Workbox, using workbox-cli (the simplest approach):

npm install --save-dev workbox-cli --global
(Accept the defaults and write sw.js to the dist folder)

Then edit main.ts until it looks something like this:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(() => {
    registerServiceWorker('sw');
  })
  .catch(err => console.log(err));

  function registerServiceWorker(swName: string) {
    if (environment.production) {
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker
          .register(`/${swName}.js`)
          .then(reg => {
            console.log('[App] Successful service worker registration', reg);
          })
          .catch(err =>
            console.error('[App] Service worker registration failed', err)
          );
      } else {
        console.error('[App] Service Worker API is not supported in current browser');
      }
    }
  }

Build your app for production

ng build --prod && workbox-cli generate:sw

Install the Chrome Web Server extension from the Chrome web store and point it at your dist folder. Then access it using the address provided by Chrome Web Server. Open the Console (F12) before loading your app and you should see a message in the console confirming that the service worker was registered.

Upvotes: 1

Related Questions