Install Kimai as WebApp

[kevinpapst]

Enable Kimai to be installed as WebApp on devices that support it (at least Android does).

See #198 (comment)

Other resources:

• https://developer.chrome.com/multidevice/android/installtohomescreen
• https://developers.google.com/web/fundamentals/app-install-banners/
• https://w3c.github.io/manifest/

[j0hannesr0th]

So I've tried to fix this with adding the below meta tag in "templates/security/login.html.twig"
<meta name="mobile-web-app-capable" content="yes">
and it works perfectly. It's just not offering to install it as a WebApp. For everyone who adds it manually to homescreen it works fine. Maybe this is acceptable as a quick fix until add-to-homescren is fully implemented.

I did some research and found this project: https://github.com/cubiq/add-to-homescreen - it's able to add it to the users homescreen on iOS 6+ and Android with a notification for the user to add it.

What do you think about it?

[kevinpapst]

I have to read a bit about the consequences. I guess real "web-apps" would have at least some kind of fallback if there is no Internet connection. What happens if you start it without any accessible network?

[j0hannesr0th]

This meta tag is basically just hiding the url bar. I've used this in other projects, too and haven't discovered any consequences. Of course it's possible to add a shortcut to the desktop without seting the meta tag, too.

Screenshot comparison of having no internet connection (flightmode enabled) and launching the app from desktop.

[kevinpapst]

Thanks for the feedback!!!!
I will research in the next weeks to find out more about the topic, as its new to me and I'd like to know more about it before adding it.
But I would accept a PR in the meantime if its urgent for you...

[parthakarmick]

Hello,

I have tried to install kimai_1.3.1. But after hitting Install button it gives blank black screen and noting happening. Need guidance here.

Thank you

[kevinpapst]

please don't hijack random topics which don't have to do anything with your problem. and you are in the wrong repo: https://github.com/kimai/kimai

[kevinpapst]

@hmr-it-jr I created a PR with app icons and web app metadata (the meta tag + manifest.json for standalone mode). Could you test it and see what happens on Android (I don't have one for testing)?!
See #211

[j0hannesr0th]

@kevinpapst I've tested the PR today. The icon works fine, and the login page, too. After login the responsivness is broken.
I've tested it on three different devices. Android 7.1, Android 8.1, iOS 11.4

Android 8.1:

---

Android 7.1:

---

iOS 11.4:

[kevinpapst]

Wow, nice - thanks for the detailed feedback! 👍
The checkbox in the login page is fixed in another branch.

TODO:

• the iOS icon needs a white background, I believe transparent is not possible
• change the name to "Kimai 2" only
• check responsiveness

I'll let you know when I fixed that stuff.

[kevinpapst]

Updated the branch with updated icons and changed app short_name.
Couldn't figure out while the responsiveness is not working, still checking it out.

[j0hannesr0th]

I've tested the updated branch and the hotfix and can confirm both work perfectly!

Updated App icon

iOS responsiveness works

---

Android responsiveness works

[kevinpapst]

I still don't like the iOS icon, but as my frontend skills are very limited I would say we go with it.
Could you do a quick check on Android as well? I modified the icons and metatags as well.

[j0hannesr0th]

I think the iOS icon is fine now. If it bothers someone really much he or she may send a pr.

To the Android icon: The icon title is fine now, but the icon itself was better before...

[kevinpapst]

LOL, so true. Thats an SVG bug... I will update the branch later.

[kevinpapst]

Okay, hopefully last try, the last push includes:

• updated android icons (fixed transparency)
• removed two unused icons
• included the responsiveness bugfix

[j0hannesr0th]

Looks good now!

---

[kevinpapst]

Thank @hmr-it-jr for all your support!!!!

Very much appreciated 👍

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.