11

I am trying to implement Push Notifications on my website (using Pushpad). Therefore I created a "manifest.json" with following content:

{
    "gcm_sender_id": "my_gcm_sender_id",
    "gcm_user_visible_only": true
}

of course I created a valid GCM-Account and have a sender id

I put the manifest.json into my root directory and I also added this line to my index.php:

<link rel="manifest" href="/manifest.json">

Using Firefox everything works fine and I can send and receive push notifications (so I think the manifest-include works fine), but Chrome won't work...

The console shows following error:

Uncaught (in promise) DOMException: Registration failed - manifest empty or missing

I searched Google for a long time and tried everything I found, but nothing works.

What I tried:

  1. created the manifest.json with "Editor" and saved it as type All Types (so no hidden .txt-file) and also with UTF-8-Encoding.
  2. restarted Chrome
  3. cleared Chrome's cache, history, etc.

I really hope somebody can help me.

collimarco
  • 34,231
  • 36
  • 108
  • 142
Fabian H.
  • 133
  • 1
  • 2
  • 8
  • 1
    Firefox works because it doesn't require a manifest in order to enable push. Can you try loading the manifest directly in your browser to see if you can actually access it? – Marco Castelluccio May 20 '16 at 10:06
  • Yes, I can see the code when I load it in my browser via direct-link. – Fabian H. May 20 '16 at 10:59
  • 1
    I confirm that Firefox doesn't look for a manifest file, so that's the reason why it works. Have you tried typing in the address bar the url `https://yourwebsite.com/manifest.json`and see if it's returned correctly? Can you provide a link to your website? – collimarco May 20 '16 at 13:57
  • Yes, I typed in that URL and it works fine. I have also implemented a script into the head section of my page that is provided by Pushpad (it is for registration of the service-worker and the Pushpad-functions). When I remove that script, no error comes up. So I think the registration of the service-worker fails(?), but I really don't know why. – Fabian H. May 20 '16 at 14:33
  • Script: (function(p,u,s,h,x){p.pushpad=p.pushpad||function(){(p.pushpad.q=p.pushpad.q||[]).push(arguments)};h=u.getElementsByTagName('head')[0];x=u.createElement('script');x.async=1;x.src=s;h.appendChild(x);})(window,document,'https://pushpad.xyz/pushpad.js'); pushpad('init', project_id); pushpad('subscribe'); – Fabian H. May 20 '16 at 14:36
  • @FabianH. Yes that error is definitely related to the Push API. Are you sure that you are using the correct GCM sender id and not the GCM secret token? Is your website served over **HTTPS** (or even HTTP but the domain must be exactly http://localhost in that case)? Can you provide the link to the website or put a page online to reproduce the issue? – collimarco May 23 '16 at 20:28
  • 1
    @FabianH. Another guess: are you sure that you have the `/` before `manifest.json`? Try opening the network tab of the Chrome developers tools and see if the request of `manifest.json` is completed successfully – collimarco May 23 '16 at 20:36
  • Yes, I am using the correct GCM sender and the site is served via HTTPS. I've done some testing around and managed to get it working :-) There was some php-Code included before the ``-Tag (e.g. for database-connection). After I moved these includes below the ``-Tag everything worked fine. – Fabian H. May 23 '16 at 20:58
  • @collimarco Thanks for your support :-) – Fabian H. May 23 '16 at 21:00
  • I was getting the same error when manifest was loaded from a different domain than the main page. – Martin Ždila Jun 30 '16 at 13:31

7 Answers7

5

For me it was a redirect. The manifest.json must return a 200 status code (must be directly available from the server), without any redirects. You can check the response via

wget --max-redirect=0 https://example.com/manifest.json

or

curl https://example.com/manifest.json

Sudhanshu
  • 457
  • 5
  • 18
3

I faced same issue,added manifest file right after head tag . which worked for me.Cheers!

Shreekanta
  • 31
  • 2
1

This may be an issue with your Service Worker scope. I ran into a similar problem when I rearranged my files/directories. Make sure your sw.js is on the same level as your manifest.json, otherwise the service worker won't be able to find your manifest. Try putting them both in the root of your directory. Optionally, you can specify the scope of your service worker by adding it to serviceWorker.register():

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw-test/sw.js', {scope: '/sw-test/'})
  .then(function(reg) {
    // registration worked
    console.log('Registration succeeded. Scope is ' + reg.scope);
  }).catch(function(error) {
    // registration failed
    console.log('Registration failed with ' + error);
  });
}

Read more here: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

Trob Frank
  • 363
  • 3
  • 11
0

Was wondering if your "manifest.json" is public accessible ?

If not maybe you can try to set it public accessible to see if that helps or not.

And it seems that the current chrome, when getting the "manifest.json" won't supply the cookies.

Tom Tang
  • 1,064
  • 9
  • 10
0

Because I didn't find an answer anywhere out there in the WWW, but managed to get it working after some time I want to provide my solution/answer for other users, who probably have the same problem:

In the file where I inlcuded the Pushpad files I wrote some PHP-Code before the <head>-Tag to include some files, e.g. for database connection. After I moved the PHP-Code below the <head>-Tag everything worked fine.

Fabian H.
  • 133
  • 1
  • 2
  • 8
0

There seem to be three ways to fix this bug: a) No redirects for "manifest.json" file. b) Put a link to this file at the top of the tag. c) Be sure, that there is no other manifest file before this one, cause it seems that web push script will try to import the first one and return an error due to the wrong data. I have tried all three and finally forced Chrome to behave.

0

Adding the following block fixed this for me:

self.addEventListener('push', (event) => {
  const title = 'Get Started With Workbox';
  const options = {
    body: event.data.text()
  };
  event.waitUntil(self.registration.showNotification(title, options));
});
jsbisht
  • 9,079
  • 7
  • 50
  • 55