Skip to content
This repository has been archived by the owner on Jan 9, 2023. It is now read-only.

Implement PWA "Splash" Page #2228

Open
jackcmeyer opened this issue Jul 12, 2020 · 11 comments
Open

Implement PWA "Splash" Page #2228

jackcmeyer opened this issue Jul 12, 2020 · 11 comments
Assignees
@hd-genius
Labels
馃殌enhancement an issue/pull request that adds a feature to the application in progress indicates that issue/pull request is currently being worked on
Projects
Version 2.0
Milestone
v2.0

Comments

@jackcmeyer
Copy link
Member

馃殌 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
@jackcmeyer jackcmeyer transferred this issue from HospitalRun/hospitalrun Jul 12, 2020
@jackcmeyer jackcmeyer added help wanted indicates that an issue is open for contributions 馃殌enhancement an issue/pull request that adds a feature to the application labels Jul 12, 2020
@jackcmeyer jackcmeyer added this to To do in Version 2.0 via automation Jul 12, 2020
@jackcmeyer jackcmeyer added this to the v2.0 milestone Jul 12, 2020
@petreyus
Copy link

Could I be assigned to work on this issue?

@jackcmeyer jackcmeyer added in progress indicates that issue/pull request is currently being worked on and removed help wanted indicates that an issue is open for contributions labels Jul 22, 2020
@jackcmeyer jackcmeyer added the help wanted indicates that an issue is open for contributions label Aug 10, 2020
@Tomastomaslol
Copy link
Contributor

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

@petreyus
Copy link

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
Copy link
Contributor

@Tomastomaslol can you help @petreyus?

@Tomastomaslol
Copy link
Contributor

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
Copy link

petreyus commented Aug 11, 2020 •
edited
Loading

@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
Copy link
Contributor

gaweki commented Sep 9, 2020

is this already works? how to test it?

@hd-genius
Copy link
Contributor

I'm interested in working on this.

@hd-genius
Copy link
Contributor

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

@jackcmeyer
Copy link
Member Author

go for it @roy-stewart!

@jackcmeyer jackcmeyer removed the help wanted indicates that an issue is open for contributions label Dec 5, 2020
@hd-genius
Copy link
Contributor

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@hd-genius hd-genius

Labels
馃殌enhancement an issue/pull request that adds a feature to the application in progress indicates that issue/pull request is currently being worked on
Projects
Version 2.0
  
To do
Milestone
v2.0
Development

No branches or pull requests
6 participants
@Tomastomaslol @matteovivona @hd-genius @jackcmeyer @gaweki @petreyus