Remove ipad address bar

[alexelash]

Overview

This isn't a native app, but we want it to operate as closely as possible to one. The address bar on iOS is very bright in comparison with the app, so removing it would be ideal.

Connects #73

Demo

I don't have my iPad on-hand, so I can't test this

Notes

• You can't "Add to homescreen" in the simulator so this has to be tested on a real iPad.
• I added custom favicons and changed the app name to "Watershed Wellness Snapshot" from "React App"
• The app will need to be opened from the homescreen for this to work.
• At the same time, I noticed that the intro screen's larger font was breaking into two lines—I've fixed that in this branch.

Testing Instructions

• git pull
• Open app in Safari
• Tap the "share button", tap "Add to Homescreen"
• Close Safari
• Tap the new homescreen button for the app
• There should be no address bar 🤞

[alexelash]

So, it definitely looks like there is legitimately no way to implement what we were originally imagining. However, there is a way to enter into fullscreen mode on an iPad using javascript, which I found out through this article: https://bubblin.io/blog/fullscreen-api-ipad

On the iPad only, clicking anywhere on the screen will enter into fullscreen mode.

A user can exit fullscreen by clicking the X, which luckily doesn't overlap anything in the UI.

[alexelash]

@caseycesari discussed this with @mmcfarland offline.

There are some other potential solutions available to the client, such as downloading a kiosk browser onto the iPad or serving up the website as a native app with GoNative.

However, Matt brought up that there are some open questions around how the client will be using the website (is this web app the only thing the iPad will be used for? do they already have a kiosk browser browser that they use? will the iPad home button be covered up?), so we should leave the device-specific questions up to the client and merge this fullscreen solution into the app.