search

HospitalRun / hospitalrun-frontend

Frontend for HospitalRun
https://staging.hospitalrun.io
MIT License
6.81k stars 2.18k forks source link

Implement PWA "Splash" Page #2228

Open jackcmeyer opened 4 years ago

jackcmeyer commented 4 years ago

🚀 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

petreyus commented 4 years ago

Could I be assigned to work on this issue?

Tomastomaslol commented 4 years ago

Hi @jackcmeyer If no one else is looking at this I'm happy to take a look at it! 🙂

petreyus commented 4 years ago

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.

matteovivona commented 4 years ago

@Tomastomaslol can you help @petreyus?

Tomastomaslol commented 4 years ago

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:

  1. Look at code example in this article https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210
  2. Add the images you generated to public/splash-screen-images
  3. 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)">
petreyus commented 4 years ago

@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!!

gaweki commented 4 years ago

is this already works? how to test it?

hd-genius commented 3 years ago

I'm interested in working on this.

hd-genius commented 3 years ago

I'm still interested in picking up this work if no one else is currently working on it.

jackcmeyer commented 3 years ago

go for it @roy-stewart!

hd-genius commented 3 years ago

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.