"Add Website to Home Screen" Cross-platform Pop-Up

A client requested that I create a notice for their website that detects what platform and browser the site visitor has, and deliver a short notice with instructions on how to 'install' their website as a web app to the visitor's smartphone home screen.

Safari (iOS)
Chrome (Android)

Some simple JavaScript code checks the browser's user agent to make sure it does not display the message on the wrong browser. After closing the message, a cookie is created that prevents the message from popping up again.

You can view the code on GitHub.

about kevin

Kevin is an interdisciplinary visual, product and UX designer looking to create fantastic aesthetics while giving a great experience.

In his free time he enjoys exploring new web development methods, hiking, longboarding and movies.