NT ready for "true" web-app :-)

[Poul Jensen]

Hi,

I found this article regarding "Home Screen Web Apps for Android":
http://www.mobilexweb.com/blog/home-screen-web-apps-android-chrome-31

It is very simple, and I have easily done the minor mods shown below in my phpmaker applications.

But how do I in NT stuff the two lines  inside the head tag ?

The lines are:
  <link rel="shortcut icon" sizes="196x196" href="ML_196_196.png">   
  <meta name="mobile-web-app-capable" content="yes">         

Cheers,
/Poul

[Bruce]

In WebHandler procedure, CommonHeader method, add them to the
self.MetaHeaders
property.
Before the parent call

eg
self.MetaHeaders = '  <link rel="shortcut icon" sizes="196x196" href="ML_196_196.png"><meta name="mobile-web-app-capable" content="yes"> '

[Poul Jensen]

Thanks Bruce,

It works - but a bit late  :-)

When the first page on the site loads those statements are not included.
If I click the log-in button (don't have to actually log in) then the statements are shown in the source code between the head tags as they should.

But then the mobile does not go into "web-app" mode.

Link:  online.macy.dk

Cheers,
/Poul

[DonRidley]

How does this (mentioned further down on the link's page):

navigator.standalone = navigator.standalone || (screen.height-document.documentElement.clientHeight<40)

work into a NT app?

I want this funtionality in my NT apps.

Thanks,

Don

Never mind.   I got it to work by adding a routine to my XHtml tab on my index page.

Routine - <meta name="mobile-web-app-capable" content="yes">

Very very cool!!  

Hey Bruce, could you add this as some sort of feature?  Maybe a check box to turn on or off? 

Don

[Bruce]

>> It works - but a bit late  :-)

yes - on further inspection it works for "controls" (like browses and forms) but not "pages".
For build 7.31 I've added a better embed point, the SetCustomHTMLHeaders (still in webHandler) where you can execute the line;

self.MetaHeaders = '  <link rel="shortcut icon" sizes="196x196" href="ML_196_196.png"><meta name="mobile-web-app-capable" content="yes"> '

For the build you have you can do what Don did, manually add a line to your IndexPage procedure,
after
packet =  clip(packet) & p_web.IncludeStyles()
add
packet =  clip(packet) & '  <link rel="shortcut icon" sizes="196x196" href="ML_196_196.png"><meta name="mobile-web-app-capable" content="yes"> '

[Poul Jensen]

Just a follow up:

If you want to cover for iPhones as well - and I guess you would - this is needed:

  <link rel="shortcut icon" sizes="196x196" href="ML_196_196.png">   
  <link rel="apple-touch-icon" href="ML_196_196.png" />
  <meta name="mobile-web-app-capable" content="yes"> 

Cheers,
/Poul

[Poul Jensen]

Hi,

Updated with more complete favicons created automatically on-line using:  https://realfavicongenerator.net

 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 <link rel="manifest" href="/manifest.json">
 <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
 <meta name="theme-color" content="#ffffff">
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">

Cheers
/Poul