NetTalk Central

Author Topic: NT ready for "true" web-app :-)  (Read 8929 times)

Poul Jensen

  • Full Member
  • ***
  • Posts: 186
    • View Profile
    • Email
NT ready for "true" web-app :-)
« on: November 26, 2013, 02:41:47 AM »
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

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11158
    • View Profile
Re: NT ready for "true" web-app :-)
« Reply #1 on: November 26, 2013, 03:49:21 AM »
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

  • Full Member
  • ***
  • Posts: 186
    • View Profile
    • Email
Re: NT ready for "true" web-app :-)
« Reply #2 on: November 26, 2013, 06:05:49 AM »
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

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: NT ready for "true" web-app :-)
« Reply #3 on: November 26, 2013, 06:17:47 AM »
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

« Last Edit: November 26, 2013, 07:00:24 AM by DonRidley »
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11158
    • View Profile
Re: NT ready for "true" web-app :-)
« Reply #4 on: November 26, 2013, 07:01:55 AM »
>> 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

  • Full Member
  • ***
  • Posts: 186
    • View Profile
    • Email
Re: NT ready for "true" web-app :-)
« Reply #5 on: November 28, 2013, 10:53:34 AM »
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

  • Full Member
  • ***
  • Posts: 186
    • View Profile
    • Email
Re: NT ready for "true" web-app :-)
« Reply #6 on: September 11, 2017, 07:18:00 AM »
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