Fingerprinting with service workers

So, I am currently learning about service workers and one of the aspects I want to test is how to use service workers for fingerprinting.

Currently, I am using https://github.com/LukasDrgon/fingerprintjs2 to implement the fingerprint function and taking help from this link on StackOverflow.

But when I try to reload the page, it gives an error saying

Uncaught (in promise) TypeError: ServiceWorker script at http://localhost:9000/sw.js for scope http://localhost:9000/ threw an exception during script evaluation.

This is what my code looks like.

// import fp from "fingerprintjs2";

function receivePushNotification(event) {
  console.log("[Service Worker] Push Received.");

  const { image, tag, url, title, text } = event.data.json();

  const options = {
    data: url,
    body: text,
    icon: image,
    vibrate: [200, 100, 200],
    tag: tag,
    image: image,
    badge: "https://spyna.it/icons/favicon.ico",
    actions: [{ action: "Detail", title: "View", icon: "https://via.placeholder.com/128/ff0000" }]
  };


  // new Fingerprint2().get(function(result, components){
  //   console.log(result); //a hash, representing your device fingerprint
  //   console.log(components); // an array of FP components
  // });


  event.waitUntil(self.registration.showNotification(title, options));
}

function openPushNotification(event) {
  console.log("[Service Worker] Notification click Received.", event.notification.data);
  
  event.notification.close();
  event.waitUntil(clients.openWindow(event.notification.data));
}


self.addEventListener("push", receivePushNotification);
self.addEventListener("notificationclick", openPushNotification);
console.log("here in service Worker")

//fingerprint code below this line

var info = {};

new Fingerprint2().get(function(result, components) {
    info.fingerprint = result;

    afterFingerprintIsCalculated();
});

function afterFingerprintIsCalculated() {
    alert(info.fingerprint);
}



// BETTER (no global state)
new Fingerprint2().get(function(result, components) {
    var info = {
        fingerprint: result
    };

    processFingerprint(info);
});

function processFingerprint(data) {
    alert(data.fingerprint);
}

Let me know how can I make it work and get the fingerprint of the browser using service workers. I am currently new to JS and this paradigm in general, if you have other useful (and easy-to-understand links), please share as well. Thank you.

Recommended topics

Hot tags