d.bernaert Posted September 9, 2020 Posted September 9, 2020 Hi, I'm starting with the mobile version of Unigui and I would like the mobile version to be as app-like as possible. Is there any project sample that shows how to do this? Thx, Dominique
mierlp Posted September 9, 2020 Posted September 9, 2020 2 examples from Mohammed for building mobile listview and menu which also give a nice look-and-feel
d.bernaert Posted September 9, 2020 Author Posted September 9, 2020 Hi Peter, It was my intention to follow the 2 examples from Mohammed and go that way. I was just looking at PWA to combine the work from Mohammed and have the application installed with an icon, a loading screen, ... Dominique
hph Posted September 10, 2020 Posted September 10, 2020 Hi Dominique I don't think you can develop a PWA app with UniGUI. But maybe this will help you a bit, subject: fullscreen and icon on homescreen for ios: https://www.netguru.com/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html You can add the meta tags to UniServerModule.CustomMeta(), like this (works with ios): <!-- icons --> <link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="20x20" href="files/images/ios/AppIcon.1.0/Icon-20x20@1x.png"> <link rel="apple-touch-icon" sizes="40x40" href="files/images/ios/AppIcon.1.0/Icon-20x20@2x.png"> <link rel="apple-touch-icon" sizes="60x60" href="files/images/ios/AppIcon.1.0/Icon-20x20@3x.png"> <link rel="apple-touch-icon" sizes="29x29" href="files/images/ios/AppIcon.1.0/Icon-29x29@1x.png"> <link rel="apple-touch-icon" sizes="58x58" href="files/images/ios/AppIcon.1.0/Icon-29x29@2x.png"> <link rel="apple-touch-icon" sizes="87x87" href="files/images/ios/AppIcon.1.0/Icon-29x29@3x.png"> <link rel="apple-touch-icon" sizes="80x80" href="files/images/ios/AppIcon.1.0/Icon-40x40@2x.png"> <link rel="apple-touch-icon" sizes="120x120" href="files/images/ios/AppIcon.1.0/Icon-40x40@3x.png"> <link rel="apple-touch-icon" sizes="120x120" href="files/images/ios/AppIcon.1.0/Icon-60x60@2x.png"> <link rel="apple-touch-icon" sizes="180x180" href="files/images/ios/AppIcon.1.0/Icon-60x60@3x.png"> <link rel="apple-touch-icon" sizes="76x76" href="files/images/ios/AppIcon.1.0/Icon-76x76@1x.png"> <link rel="apple-touch-icon" sizes="152x152" href="files/images/ios/AppIcon.1.0/Icon-76x76@2x.png"> <link rel="apple-touch-icon" sizes="334x334" href="files/images/ios/AppIcon.1.0/Icon-83.5@2x.png"> <!-- fullscreen webapp --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-title" content="myApp"> After call your webapp in safari via url and link it to your homescreen. You can then open your app via this icon and you will have a fullscreen webapp ;-) Hanspeter
d.bernaert Posted September 10, 2020 Author Posted September 10, 2020 Thank you, I will give it a try. Is there something simular for Android? Dominique
Sherzod Posted September 10, 2020 Posted September 10, 2020 I think one of the reasons for using PWA is the ability to work offline. This is achieved through a Service Worker script that is run by the browser in the background and a caching strategy to enable it to work offline.
Abaksoft Posted January 11, 2021 Posted January 11, 2021 On 9/10/2020 at 1:56 PM, Sherzod said: I think one of the reasons for using PWA is the ability to work offline. This is achieved through a Service Worker script that is run by the browser in the background and a caching strategy to enable it to work offline. Maybe this can give some ideas : https://dev.to/ankitkamboj18/making-react-app-a-progressive-web-app-pwa-46dk
Recommended Posts