4

I'm having a bit of trouble getting to grips with 'Service Workers' and the 'Manifest.json' aspect of google chrome.

My end goal is to get a 'Add to Home Screen' button appearing when the user browses one of my websites via their mobile device in chrome on android.

So I've got my manifest.json, in the root and in the <head> tag I've got the following:

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

When I first put this in the head tag, and went to the 'Application' tab in chrome dev tools on my desktop, It saw the manifest.json and displayed all the information in it correctly. Then as soon as I browsed to a different page on the same domain, the Dev tools displays the message 'No Manifest Detected'.

I have no idea why. It's clearly there, if I inspect the page, go to the <head> section and find the link rel, I right click on the manfiest.json link and open in new tab- it loads perfectly. I've validated it with the manifest.json validator too, and it reports 'Success: Manifest is valid!'.

Why is it temporarily dropping out? How can I get this damn button to appear?

Side note, my service worker code (again in <head>) is the following:

<script type='text/javascript'>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/js/service-worker.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}
</script>

And I get the message in the console 'ServiceWorker registration successfull'. But there is nothing in the service-worker.js file, surely there needs to be some code in there? None of the tutorials i've found mention putting any data in there. It's confusing.

Chud37
  • 4,907
  • 13
  • 64
  • 116

2 Answers2

2

Depending on the type of your application, you will need to include the link tag referencing the manifest on every page, or put the link tag in a component that can be included in every page, like a common header or footer. This is likely why it disappears when you navigate to another page. It sounds like this may not be the issue, if you see it on every page already.

The other issue could be the slash before the manifest.json. When you're on the homepage, adding the slash is referencing the page you're on, but on other pages it may not map to the correct place. You can test this theory in Chrome Dev Tools (Network tab) to see if it is actually finding the manifest on other pages or not. It will have a 404 error and turn red if it isn't finding it. This is more likely the cause of your issue.

Another possibility is I've seen the dev tools NOT find a manifest when there is one, I think because the cache doesn't always update correctly. If this is the case, you can long press on the refresh button (while dev tools is open) and select "Empty Cache and Hard Reload" and that seems to make it pay attention to the manifest being there if it is ignoring it. With the service worker, as far as I understand, registering it is just telling your app that it is there, and it doesn't need to have any code in it to work. The idea is of course to add code later to do things like push notifications and background sync, but that isn't required to register the sw. It is giving the app a heads up that this thing is happening whether or not you choose to use it.

I agree the documentation and tutorials on PWAs is sketchy and even google's docs are hard to wade through. I'm definitely in the same boat with some of this stuff.

There is a great Udemy course on PWAs by Maximilian Schwarzmüller Progressive Web App The Complete Guide which explains the service worker in great detail, what it does and how to use it for practical things in case you'd find it useful. Not sponsored, I've paid for the course myself and got a lot out of it.

Ryan
  • 3,153
  • 2
  • 23
  • 35
  • Thank you, I wrote this question a long time ago but I will have a work through your answer soon. Thank you so much for taking the time to answer. – Chud37 Jun 05 '18 at 14:00
2

Chrome does not detect manifest beyond the initial page load (which is bad). If manifest is not detected, close devtool and reopen it will force Chrome to detect manifest again.

Kevin He
  • 871
  • 7
  • 18