Add to Home Screen

Ref. PWA06

NOTE: this feature is from a big development. See PWA discussion at GitHub.

Is your feature request related to a problem? Please describe.
As a participant, I want to have faster access to the platform from my mobile phone.

Describe the solution you’d like
To easily have a possibility to add Decidim to my home screen. This is feature is called Add To Home Screen (A2HS).

It’s fundamental that we don’t spam the visitors with “This website wants to add to your screen”, as we don’t want to be that kind of website. The user has to opt-in to having this pop-up, so we don’t show too many pop-ups in the first visit: imagine visiting a Decidim installation the first time, and seeing the Omnipresent banner, and the cookie fixed banner and the A2HS fixed native banner… Just too many banners at once.

With this problem in mind, the solution would consist in:

1. In the browsers that support A2HS, show a link in the footer with “Add $THIS_ORGANIZATION to your Home Screen”.
2. A participant would see the A2HS action after more than 3 visits to the website with the same browser.

Describe alternatives you’ve considered
One possibility would be to not have this feature as we have at the moment, but that means that participants need to remember the URL or get in through an email or notification. It’s more comfortable to have an Icon if it’s possible.

We also discussed and discarded having a banner that says “Want to have easier access to ORGANIZATION_NAME?” with a button “Add it to your Home Screen”, but we think that could take too much space.

Additional context

See MDN webdocs A2HS page.
See Can I Use “Add to home screen (A2HS)”?.
See provide your own in-app install experience for how implementing the A2HS link.

Does this issue could impact on users private data?
No, it’s a shortcut for improving access.

Acceptance criteria

• Given that I’m a visitor and I’m visiting with a compatible browser
  When I go to a Decidim instance I have a link in the footer that says “Add $THIS_ORGANIZATION to your Home Screen”
  and when I click the button
  Then I see the “Add to Home Screen” confirmation banner
  and When I click it then I have an App icon on my Home Screen
• Given that I’m a visitor and I’m visiting with an incompatible browser
  When I go to a Decidim instance I don’t have a link in the footer that says “Add $THIS_ORGANIZATION to your Home Screen”
• Given that I’m a visitor and I’m visiting with a compatible browser
  When I go to Decidim and visit 3 pages
  Then I see the “Add to Home Screen” confirmation banner
  and When I click it then I have an App icon on my Home Screen