Here we will see how to install service worker and get pushManager subscription

Now again there can be multiple cases and we will check all of them here.

- Service worker is previously not installed and so pushManager is also not subscribed.
- Service worker is installed but pushManager is not subscribed.
- Service worker is installed and pushManager is subscribed.
- If Service Worker is registered and subscribed to pushManager, we will see in next part on how to get the token.


So we will have to use 2 preoperties of service worker -
- getRegistration
- register

and two properties of pushManager - 
- getSubscription
- subscribe

Before we move further it is advised in the Firebase dosumentation to create an empty file named firebase-messaging-sw.js in the public folder, We can create an empty file in our public folder, the file should be publicly available at roo url. This means if your domain is www.example.com then this file should be available at www.example.com/ firebase-messaging-sw.js. 

Understanding the Process

- first we will check if the service worker is registered or not  and try to get the instance of registration. This can return either true or false

```
navigator?.serviceWorker?.getRegistration("/firebase-messaging-sw.js").then(registeration => {})
```

- if the service worker is registered we will see whether the pushManager service is subscribed or not.

```
registration?.pushManager?.getSubscription().then((subscription) => { })
```

- if the pushManager service is not subscribed we will subscribe the pushManager.

```
registration?.pushManager?.subscribe({values})
```

- if the service worker is not registered we will register the service worker and subscribe to the push Manager service,.

```
 navigator?.serviceWorker?.register("/firebase-messaging-sw.js")
```
It is important to note here that service worker taked time to install and activate itself  (few seconds) and has three stages  installing, installed and activated so we will have to wait for the service worker to become active before subscribing here, this can be done by using a eventListner on the status change of the registration.

```
registration?.installing?.addEventListener(
  "statechange",
  (e: any) => {
    console.log("eeeeeeeeeee", e?.target?.state);
    if (e.target.state === "activated")
      subscribeToPushMessage(registration, messaging);
  }
);

```

Here is the complete code of the process, - 

```
        navigator?.serviceWorker
          ?.getRegistration("/firebase-messaging-sw.js")
          ?.then((registration) => {
            if (registration) {
              registration?.pushManager
                ?.getSubscription()
                .then((subscription) => {
                  if (!subscription) {
                    console.log(
                      "sw registered and  subscription not available"
                    );
                    subscribeToPushMessage(registration, messaging);
                  } else {
                    console.log("sw registered and subscription available");
                    getMyToken(registration, messaging);
                  }
                })
                .catch(() => {
                  console.log("sw registered , error in geting sebscription");
                });

              console.log("service worker registration available");
            } else {
              console.log(
                "service worker registering not available, so register"
              );
              navigator?.serviceWorker
                ?.register("/firebase-messaging-sw.js")
                .then((registration) => {
                  // console.log(registration);
                  registration?.installing?.addEventListener(
                    "statechange",
                    (e: any) => {
                      console.log("eeeeeeeeeee", e?.target?.state);
                      if (e.target.state === "activated")
                        subscribeToPushMessage(registration, messaging);
                    }
                  );
                })
                .catch((e) => {
                  console.log(e);
                  console.log("registration failed");
                });
            }
          })
          .catch((e: any) => {
            console.log("error in getRegistration");
          });
```

and the code for subscribeToPushMessage is - 


```
const subscribeToPushMessage = (registration: any, messaging: any) => {
  registration?.pushManager
    ?.subscribe({
      userVisibleOnly: true,
      applicationServerKey: vapidKey,
      // urlBase64ToUint8Array(vapidKey),
    })
    .then((subscription: any) => {
      console.log("subscribed to push message");
      getMyToken(registration, messaging);
    })
    .catch((e: any) => {
      console.log("error to subscribe push manager ");
    });
};

```


Till here we have got our service worker registered and also subscribed to the pushManager service. 

In next part we will see how to get the token

[Link](https://www.ranuvijay.me/blogs/get-the-current-token) of the next part. 

Thanks!

Here we will see how we can install our service worker and subscribe to pushManager facility of the service worker.  

Install Service Worker and subscribe to pushManager

Contact Me

I want to hear from you