2

I am implementing a plugin that could be added to others e-commerce platforms, which can be injected through iframe, now I am trying to send a push notifications to this injected iframe, but the issue that the injected iframe has no base url, it is just a Javascript file that injected to html pages via iframe, so how could I send push notifications in such case to the injected iframe ?

Mustafa Alfar
  • 160
  • 1
  • 5
  • 16
  • 2
    Please provide some more information on what exactly your doing. It's hard to figure out exactly what you want. – code Nov 02 '22 at 21:09
  • Sure, I have an iframe which is run on different online stores, but this iframe without src, which means, it has been injected to the stores via ``` document.open(); document.write(hmtlCode); document.close(); ``` Could we send a push notification for the customers of this iframe on all the stores that has the iframe injected to it, Hint, there are more than 100 store use this Iframe @code – Mustafa Alfar Nov 03 '22 at 09:30
  • Why is it currently using an iframe? And more importantly, what is already in that iframe? – inwerpsel Nov 05 '22 at 09:04
  • Solution 2 of [this answer](https://stackoverflow.com/a/73599289/17865804), which uses [`Window.postMessage()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) method, might help with your task. – Chris Nov 05 '22 at 11:39
  • @inwerpsel The application is plugin attached to e-ecommerce stores so the approach i took was via Iframe – Mustafa Alfar Nov 06 '22 at 12:03

1 Answers1

0

I expect there are a bunch of security issues that are being blocked when you create an iframe like this.

The documentation on the pushAPI recommends you use a service worker instead and there is a cookbook of examples on how to use it.

https://github.com/mdn/serviceworker-cookbook

This is the simplest example

// Register a Service Worker.
navigator.serviceWorker.register('service-worker.js');

navigator.serviceWorker.ready
.then(function(registration) {
  // Use the PushManager to get the user's subscription to the push service.
  return registration.pushManager.getSubscription()
  .then(async function(subscription) {
    // If a subscription was found, return it.
    if (subscription) {
      return subscription;
    }

    // Get the server's public key
    const response = await fetch('./vapidPublicKey');
    const vapidPublicKey = await response.text();
    // Chrome doesn't accept the base64-encoded (string) vapidPublicKey yet
    // urlBase64ToUint8Array() is defined in /tools.js
    const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);

    // Otherwise, subscribe the user (userVisibleOnly allows to specify that we don't plan to
    // send notifications that don't have a visible effect for the user).
    return registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: convertedVapidKey
    });
  });
}).then(function(subscription) {
  // Send the subscription details to the server using the Fetch API.
  fetch('./register', {
    method: 'post',
    headers: {
      'Content-type': 'application/json'
    },
    body: JSON.stringify({
      subscription: subscription
    }),
  });

  document.getElementById('doIt').onclick = function() {
    const delay = document.getElementById('notification-delay').value;
    const ttl = document.getElementById('notification-ttl').value;

    // Ask the server to send the client a notification (for testing purposes, in actual
    // applications the push notification is likely going to be generated by some event
    // in the server).
    fetch('./sendNotification', {
      method: 'post',
      headers: {
        'Content-type': 'application/json'
      },
      body: JSON.stringify({
        subscription: subscription,
        delay: delay,
        ttl: ttl,
      }),
    });
  };

});

// Register event listener for the 'push' event.
self.addEventListener('push', function(event) {
  // Keep the service worker alive until the notification is created.
  event.waitUntil(
    // Show a notification with title 'ServiceWorker Cookbook' and body 'Alea iacta est'.
    self.registration.showNotification('ServiceWorker Cookbook', {
      body: 'Alea iacta est',
    })
  );
});
David Bradshaw
  • 11,859
  • 3
  • 41
  • 70