1

I can register service worker via iframe. When I try to run "pushManager.subscribe" I have:

DOMException: Registration failed - permission denied

This problem is only in Chrome via iframe. It works good in Firefox. And it works good without iframe in Chrome

3 Answers3

3

You cannot use an iframe, it isn't allowed.

The permission request must be performed from the top level window.

The only alternative (that we have used for Pushpad Express for example) is to redirect to / open a new window from the iframe, then ask permission from the top level window and finally redirect back.

This is meant to make it clear for the user which website is asking the permission for push notifications. Otherwise the fear is that an ad for example may show a prompt for push notifications and that would be misleading.

BTW I had also suggested to add a new value to the sandbox attribute of iframes in order to allow prompts for push notifications, but the spec currently doesn't support it.

collimarco
  • 34,231
  • 36
  • 108
  • 142
2

Long story short, you can't! The path you are registering service worker on must be opened (be a top level domain) for it to register a service worker. One way to achieve this is:

suppose your iframe looks like this:

 <iframe src="https://example.com"></iframe>

use postMessage to communicate with iframe and ask for permission and then window.open("https://example.com/") to register the service-worker and fetch the token.

Hope this helps :)

Dhruv Batheja
  • 2,140
  • 1
  • 18
  • 16
0

Chrome requires you to subscribe to push from a top level domain since otherwise it is less clear what origing is the user allowing push to.

Miguel Garcia
  • 1,029
  • 5
  • 14
  • I make an application for facebook: `https://apps.facebook.com/xxxxxxx/` - address of app; `https://app.example.com/fb/build/` - address of iframe. What do you mean when said "a top level domain" You mean that Chrome requires to subscribe to push from `https://apps.facebook.com/xxxxxxx/`. Or I need to change address for iframe to `https://app.example.com/` and place serviceWorker there. – Katerina Sozykina Oct 26 '16 at 06:51
  • I don't know exactly how facebook apps work. You should call subscribe from whatever origin shows up in the url bar when you are looking at the page. – Miguel Garcia Oct 27 '16 at 12:58