Improve the app installation block

I would suggest also to implement a alternative way to trigger the callback in the beforeinstallprompt event listener for iOS Safari. iOS Safari does not support the BeforeInstallPromptEvent event, so this code is not working in safari browser on iOS.

https://caniuse.com/?search=beforeinstallprompt

Related to this issue: https://www.drupal.org/project/pwa/issues/3208359 →

Made a start on how a fixed position banner at the bottom is showed on iOS devices:

Sebastian, this looks incredible! Some considerations for future iterations:

• Text as a configuration option - make have the image url be a token/Twig variable?
• We would also need to make sure this element looks okay on Safari desktop.
• Allow people to remove the banner (and save it in a cookie/local storage to not show it again?)

I am currently working on the Chrome/Android side:

Here's is the CSS code (when the block id is: pwa_install):


#block-pwa-install .button {
background: 0 0;
padding: .4rem .5rem;
margin: .2rem 0 0 1.5rem;
border: 1px solid #f00a21;
color: #f00a21;
font-weight: 700;
text-transform: uppercase;
border-radius: .2rem;
cursor: pointer;
transition: background 0.4s, color 0.4s;
text-shadow: none; /* Override default styles */
}

#block-pwa-install .button:before {
content: "⤓";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F00A21'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7zM5 18v2h14v-2z'%3E%3C/path%3E%3C/svg%3E");
width: 1.3em;
display: inline-block;
color: transparent;
font-size: 1.3rem;
margin-top: -.1rem;
vertical-align: middle;
transition: background 0.4s;
}

#block-pwa-install .button:hover,
#block-pwa-install .button:focus {
background: #f00a21;
color: #fff;
}

#block-pwa-install .button:hover:before,
#block-pwa-install .button:focus:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7zM5 18v2h14v-2z'%3E%3C/path%3E%3C/svg%3E");
}