PWA application

[d.bernaert]

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]

2 examples from Mohammed for building mobile listview and menu which also give a nice look-and-feel

 

 

 

 

[d.bernaert]

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]

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]

Thank you,

I will give it a try.

Is there something simular for Android?

Dominique

[Sherzod]

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]

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