Agfdhyk

I am trying to configure push notifications on a NodeJS application that is modular. I have generated my VAPID keys already as well. I have a file, client.js, which registers my service worker (which sits in a separate file), registers my push and then sends it. It converts the public key to a Uint8 array format as well.

Now, in most use cases I have seen, the main HTML document links to this javascript file in the header inside the <script> tag. However, my header, footer and body are split up into separate EJS templates. If I link to this file in the header, it will trigger a push notification for every page in my application, since the header template is part of them all.

Therefore, I was wondering if there was a way to import this file into only the page which is mapped to a specific route path by passing it into the corresponding app.get() method?

I considered exporting the client.js file and passing it into the route definition as middleware, but I am not sure how to do this or if it is the right way to do it.

Here is client.js:

const publicVapidKey =

  "********";



// Check for service worker

if ("serviceWorker" in navigator) {

  send().catch(err => console.error(err));

}



// Register SW, Register Push, Send Push

async function send() {

  // Register Service Worker

  console.log("Registering service worker...");

  const register = await navigator.serviceWorker.register("/worker.js", {

    scope: "/"

  });

  console.log("Service Worker Registered...");



  // Register Push

  console.log("Registering Push...");

  const subscription = await register.pushManager.subscribe({

    userVisibleOnly: true,

    applicationServerKey: urlBase64ToUint8Array(publicVapidKey)

  });

  console.log("Push Registered...");



  // Send Push Notification

  console.log("Sending Push...");

  await fetch("/subscribe", {

    method: "POST",

    body: JSON.stringify(subscription),

    headers: {

      "content-type": "application/json"

    }

  });

  console.log("Push Sent...");

}



function urlBase64ToUint8Array(base64String) {

  const padding = "=".repeat((4 - base64String.length % 4) % 4);

  const base64 = (base64String + padding)

    .replace(/-/g, "+")

    .replace(/_/g, "/");



  const rawData = window.atob(base64);

  const outputArray = new Uint8Array(rawData.length);



  for (let i = 0; i < rawData.length; ++i) {

    outputArray[i] = rawData.charCodeAt(i);

  }

  return outputArray;

}

Could I export this as middleware to be called when the route is triggered? Also, exactly how would I do this? I am not sure this is the same thing as loading a .js file into the browser as is done using the script tag. Is there a better way to do that inside my route?

Thanks for your help in advance.