NG Client as WebApp

Classic Servoy
1

Hi
I am wanting to customise a NG web app solution to add a number of features specifically

  1. Add this to remove the Chrome from the Safari browser

  2. Add icons for both iPhone and iPad

  3. In effect do the same for Android but the iOS devices are the clients current platform

Any ideas or samples would be super helpful. I have used plugins.ngclientutils.setViewportMetaDefaultForMobileAwareSites(); to get the site to work so its really customising this that is the requirement

best
Gordon

2

Thanks to @paronne I have now created a webapp on iOS without the need for the Safari address bar etc. To make this work use the “add to home screen” function on iOS and it will put and icon on the home screen of the device. The solution will not display any navigation ie back button so you need to ensure you have catered for this in your UX

To make this work you need to add the following to the onOpen script of the solution

var icon = {		
		tagName: "LINK",
		attrs: [
		{	name:"REL",
			value:"apple-touch-icon" 
		},
		{	name:"HREF",
			value:"[URL TO YOUR ICON THAT IS 129X129 PX AND SAVED AS A PNG]" 
		}]
	};
var chrome = {		
		tagName: "meta",
		attrs: [
		{	name:"name",
			value:"apple-mobile-web-app-status-bar-style"     //THIS REMOVES THE STATUS/ADDRESS BAR 
		},
		{	name:"content",
			value:"black" 
		}]
	};
	var webapp = {		
		tagName: "meta",
		attrs: [
		{	name:"name",
			value:"apple-mobile-web-app-capable"    //REQUIRED TO MAKE SAFARI REMOVE THE ADDRESS BAR
		},
		{	name:"content",
			value:"yes" 
		}]
	};
	

	plugins.ngclientutils.contributedTags.push(icon);
	plugins.ngclientutils.contributedTags.push(webapp);
	plugins.ngclientutils.contributedTags.push(chrome);
	
	plugins.ngclientutils.setViewportMetaDefaultForMobileAwareSites();

Hope someone finds this of use and thanks to Paolo for his input

Cheers
Gordon

3

Hi Gordon

Thanks for posting the code. I tried it in our application and get for each of the

plugins.ngclientutils.contributedTags.push(icon);

the error message

The function push(…ngclientutils.tag) is not applicable for the arguments ({tagName:String,attrs:Array<{name:String,value:String}

})

Any idea how to solve them?

BTW, the code snippet value:“[URL TO YOUR ICON THAT IS 129X129 PX AND SAVED AS A PNG]”

I have set to

value:“[media:///icnHades.png]”

Is that what is meant?

Thanks a lot and regards,

4

Hi Robert

My working code was as follows I am not sure media:/// will work as the process is external of Servoy ie iPhone looking for image not within Servoy

function onSolutionOpen(arg, queryParams) {
	
	var icon = {		
		tagName: "LINK",
		attrs: [
		{	name:"REL",
			value:"apple-touch-icon" 
		},
		{	name:"HREF",
			value:"https://www.clickdigital.com/_clients/test.png" 
		}]
	};
	var chrome = {		
		tagName: "meta",
		attrs: [
		{	name:"name",
			value:"apple-mobile-web-app-status-bar-style" 
		},
		{	name:"content",
			value:"black" 
		}]
	};
	var webapp = {		
		tagName: "meta",
		attrs: [
		{	name:"name",
			value:"apple-mobile-web-app-capable" 
		},
		{	name:"content",
			value:"yes" 
		}]
	};
	var cache = {		
		tagName: "meta",
		attrs: [
		{	name:"HTTP-EQUIV",
			value:"CACHE-CONTROL" 
		},
		{	name:"CONTENT",
			value:"NO-CACHE" 
		}]
	};
	
	plugins.ngclientutils.contributedTags.push(icon);
	plugins.ngclientutils.contributedTags.push(webapp);
	plugins.ngclientutils.contributedTags.push(chrome);
	plugins.ngclientutils.contributedTags.push(cache);
	
	plugins.ngclientutils.setViewportMetaDefaultForMobileAwareSites();
}

The issues I had were, it worked perfectly UPTO the point it lost the connection to Servoy ie the session timed out. The result was a white screen which meant that the web app was looking at the old session which Paolo tells me is related to the tab. I have, on his advice done a version of Cordova which does work but is a huge pfaff to set up.

I would observe the following:

  1. The vast majority of corporate solutions do not require advanced phone features ie Camera. They simply require a corporate branded app experience which is simple to use and does not result in the user getting distracted ie removing the chrome and address bar from Safari.

  2. Being able to configure this with the above script was incredibly simple and worked perfectly until the session died at which point it had to be re added to the home screen (iOS in my case)

SO I would suggest there are 4 options the first two of which are viable and all are possible. IF Servoy were able to make the first one work it would be a massive time saver and make Servoy far more mobile friendly. What was it Steve Jobs said 'Web Apps are great" https://9to5mac.com/2011/10/21/jobs-ori … tive-apps/

a) Servoy NG with the above script if there is a way to fix the session thing (would require Servoy to comment on this) Its an enhancement to the Servoy product and an easy win

b) Cordova native version - it works but requires a lot of effort to set up ie Node, Cordova, Xcode, ADC Membership etc

c) Servoy’s own mobile plugin I have not used but when I looked the idea was sound but the execution was involved and the end result was not beautiful

d) Using Ionic or similar framework with REST - Great but this is not Servoy and has its own challenges not least its hard to configure and is not on data broadcast etc

Interested to know your thoughts on this

Regards
Gordon