Make Pimatic A2HS compliant

Yves911

Hi Guys,

Don’t know how difficult it could be but having A2HS (https://developer.mozilla.org/en-US/Apps/Progressive/Add_to_home_screen) could be a nice to have functionality.

Requirements are :
To be served over HTTPs
To have a manifest file with the correct fields filled in.
To have an appropriate icon available for displaying on the Home screen.
Chrome additionally requires the app to have a service worker registered (e.g. so it can function when offline).

What do you think about it?
Cheers
Yves

Yves911

Ok i added into …/pimatic-app/node_modules/pimatic-mobile-frontend/public
a file called application.manifest (this is the name that i found into the index.html)
with the following content:

{
  "background_color": "white",
  "description": "pimatic is a home automation framework that runs on node.js. ",
  "display": "fullscreen",
  "icons": [
    {
      "src": "apple-touch-icon-precomposed.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "name": "pimatic",
  "short_name": "pimatic",
  "start_url": "/"
}

restart pimatic and tada…
doesn’t work

mwittig

@yves911 said in Make Pimatic A2HS compliant:

restart pimatic and tada…
doesn’t work

Do you have a https setup? This seems to be required for Firefox to support it. For Chrome, one also need to add a “link rel” tag t o support it. This worked for me in Developer Console, at least, i.e., the Manifest has been detected and the icon instead of screen snapshot is display on the search page. I haven’t tested the Desktop shortcut yet as I need to make SSL-Setup for my test system first.

I’ll push my stuff to the repo so that we can better share our findings

Yves911

@mwittig yes my pimatic is working via https and yes you are right https is a requirement for A2HS.
How can you see that the manifest is take into account?
Cheers
Yves

Yves911

I tried to switch to development and empty caches still no luck

Yves911

new version of the manifest

{
  "background_color": "white",
  "description": "pimatic is a home automation framework that runs on node.js. ",
  "display": "fullscreen",
"icons": [{
    "src": "apple-touch-icon-120x120-precomposed.png",
    "type": "image/png",
    "sizes": "120x120"
  }, {
    "src": "apple-touch-icon-152x152-precomposed.png",
    "type": "image/png",
    "sizes": "152x152"
  }, {
    "src": "apple-touch-icon-76x76-precomposed.png",
    "type": "image/png",
    "sizes": "76x76"
  }],
  "name": "pimatic",
  "short_name": "Foxes",
  "start_url": "."
}

and also added (for testing purpose)
<head><link rel=“manifest” href="/application.manifest">
into index.html of the public directory

I can see into chrome that the manifest is now correctly loaded but still no icon to pin the app on the home screen…