hospitalrun-frontend
hospitalrun-frontend copied to clipboard
HospitalRun
Implement PWA "Splash" Page
🚀 Feature Proposal
HospitalRun can be "downloaded" as a progressive web app.
When the application loads, it displays a white screen. To provide a more native-like experience, the application should show a splash page while it is launching.
Example
https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210
We can use this logo for the splash page: https://github.com/HospitalRun/design/blob/master/logo/icon/icon-on-transparent.png
Hi @jackcmeyer If no one else is looking at this I'm happy to take a look at it! 🙂
I resized the image with a tool so I have the necessary pictures. Also, I found this: https://github.com/crazycodeboy/react-native-splash-screen
I wanted to solve it without using it though. Would appreciate some help. I am pretty new to mobile dev.
Yeah sure! 🙂
@petreyus
If you haven't done so already I would recommend that you set up the application on your computer using this guide: https://github.com/HospitalRun/hospitalrun-frontend/blob/master/.github/CONTRIBUTING.md#1-check-out-the-hospitalrun-general-contributing-guide-for-how-to
So you are able to test your changes before opening your pull request.
I found this: https://github.com/crazycodeboy/react-native-splash-screen
Unfortunately, I don't think this will be of much help. This package would allow you to add a splash screen to a react-native application and I don't think it would work in a progressive web app using React.
So instead of using the react-native-splash-screen library, I would recommend you to:
- Look at code example in this article https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210
- Add the images you generated to
public/splash-screen-images - Add a reference to the icons you generated in the
<head>tag in the applications index file. ( See: https://github.com/HospitalRun/hospitalrun-frontend/blob/master/public/index.html) Something similar to this:
<link rel="apple-touch-startup-image" href="%PUBLIC_URL%/splash-screen-images/launch-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="%PUBLIC_URL%/splash-screen-images/launch-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="%PUBLIC_URL%/splash-screen-images/launch-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="%PUBLIC_URL%/splash-screen-images/launch-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="%PUBLIC_URL%/splash-screen-images/launch-1536x2048.png" media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="%PUBLIC_URL%/splash-screen-images/launch-1668x2224.png" media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="%PUBLIC_URL%/splash-screen-images/launch-2048x2732.png" media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
@Tomastomaslol
I have the code base working previously (took me a little time not going to lie), and I have the images located in public as well.
So just adding that snippet into the head tag on index.html is all that's needed?
No additional onLoad logic or anything?
I figured that code snippet above covers most IOS devices with all the correct aspect ratios...
Thank you for explaining it to me really appreciate it!!
I'm still interested in picking up this work if no one else is currently working on it.
It looks like the splash screen has already been implemented. I noticed that the logo.png, the correct apple-touch-icon link, manifest.json, and the link to manifest.json have all been previously added.