title: Send Web Push Notifications from Spring Boot to Angular app using ServiceWorker and Firebase?
body: <p>Ok the title is hopefully clear.</p>
  <p>So I'm having problem of sending <code>web push notification</code> to Angular app. I think it's some kind of configuration problem. I managed to register <code>ServiceWorker</code> within my web app but I don't now how to tell to Spring to send the notification to one particular browser instance (via <code>FCM</code>).</p>
  <p>Here are the steps that I did:</p>
  <ol>
  <li>Create Angular app (Using Angular 12)</li>
  <li>Added <code>ServiceWorker</code> with <code>ng add @angular/pwa</code></li>
  <li>With <code>web-push generate-vapid-keys --json</code> I generated keys:</li>
  </ol>
  <p><code>{&quot;publicKey&quot;:&quot;BGtAaq5M386BKsp5fm-3veucVeedsO5ah0kEhGyCV_Q9LEe82cKcpayKU3Owe1z1KE-vT9_ATFZ-G2HEjjHoGtM&quot;, &quot;privateKey&quot;:&quot;cX6cCdC-ZX6fhI9ff9EeZ5ch6bnXx1x6jwOZxmPLmt8&quot; }</code></p>
  <ol start="4">
  <li><p>Managed to register <code>ServiceWorker</code> and get <code>subscription</code> object</p>
  </li>
  <li><p>Here are is my Angular component and how <code>ServiceWorker</code> &quot;looks like&quot;:</p>
  <p>export class TestComponent implements OnInit {</p>
  <pre><code>   readonly VAPID_PUBLIC_KEY = &quot;BGtAaq5M386BKsp5fm-3veucVeedsO5ah0kEhGyCV_Q9LEe82cKcpayKU3Owe1z1KE-vT9_ATFZ-G2HEjjHoGtM&quot;;
  
     constructor(private swPush: SwPush) { }
  
     ngOnInit(): void {
       this.swPush.messages.subscribe(data =&gt; console.log(data))
     }
  
     subscribeToNotifications() {
  
       this.swPush.requestSubscription({
           serverPublicKey: this.VAPID_PUBLIC_KEY
       })
       .then(sub =&gt; {console.log(&quot;Notification Subscription priiiint: &quot;, sub); })
       .catch(err =&gt; console.error(&quot;Could not subscribe to notifications&quot;, err));
  
     }
  
   }
  </code></pre>
  </li>
  </ol>
  <p><a href="https://i.stack.imgur.com/pV1cv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pV1cv.png" alt="Subscription object" /></a></p>
  <ol start="6">
  <li>I created Project and App on Firebase by following this <a href="https://golb.hplar.ch/2018/01/Sending-Web-push-messages-from-Spring-Boot-to-Browsers.html" rel="nofollow noreferrer">tutorial</a>. And I do have code in my Spring application which is able to send messages/notifications (name it how you want) to Firebase. But I don't know how to tell FCM (via Spring) to send message to browser instance which subscription object I console-logged (that is <code>PushSubscription</code> object from the image above).</li>
  </ol>
  <p>What I have seen in other tutorials is that instead of console-logging <code>PushSubscription</code> object, they send (usual POST request) it to <code>NodeJs</code> server which has <code>web-push module</code>. And the use it to send messages to actual notification to specific browser instance. The code goes something like this:</p>
  <pre><code>     export function sendNotif(req, res) {
      
           const webpush = require('web-push');
      
          // sample notification payload
          const notificationPayload = {
              &quot;notification&quot;: {
                  &quot;title&quot;: &quot;Angular News&quot;,
                  &quot;body&quot;: &quot;Newsletter Available!&quot;,
                  &quot;icon&quot;: &quot;assets/main-page-logo-small-hat.png&quot;,
                  &quot;vibrate&quot;: [100, 50, 100],
                  &quot;data&quot;: {
                      &quot;dateOfArrival&quot;: Date.now(),
                      &quot;primaryKey&quot;: 1
                  },
                  &quot;actions&quot;: [{
                      &quot;action&quot;: &quot;explore&quot;,
                      &quot;title&quot;: &quot;Go to the site&quot;
                  }]
              }
          };
      Promise.all(USER_SUBSCRIPTIONS_ARRAY.map(sub =&gt; webpush.sendNotification(
          sub, JSON.stringify(notificationPayload) )))
          .then(() =&gt; res.status(200).json({message: 'Newsletter sent successfully.'}))
          .catch(err =&gt; {
              console.error(&quot;Error sending notification, reason: &quot;, err);
              res.sendStatus(500);
          });
  
  }
  </code></pre>
  <ol start="7">
  <li>I did not that in tutorial above they are importing some firebase script on client side. But they are not using public key generated in step 3.</li>
  </ol>
  <p>Does anyone know how to configure this?</p>