FreewayTalk

14 replies to this thread. Most Recent

Richard Cacciato

22 Nov 2019, 3:44 pm

Hiding address bar in browser

I’m interested in creating a web page that would open in a browser on a smartphone without an address bar, i.e. suppressing all the header elements so the web page looks like an app. Is there a way to do that in Freeway?

waltd

22 Nov 2019, 4:59 pm

That property, which is known colloquially as “App Mode”, is easily added by inserting a new meta tag in the head of the page.

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Use the Page / Meta Tags menu item to add this (and other) meta tags.

Walter

On Nov 22, 2019, at 10:43 AM, Richard Cacciato <[email protected]> wrote:

I’m interested in creating a web page that would open in a browser on a smartphone without an address bar, i.e. suppressing all the header elements so the web page looks like an app. Is there a way to do that in Freeway?

Freeway user since 1997

http://www.walterdavisstudio.com

Richard Cacciato

22 Nov 2019, 5:14 pm

Wow. I’ll try it. Thanks, Walter. Is there something similar in other browsers (such as Chrome on Android) or does it only work on iOS devices?

waltd

22 Nov 2019, 5:52 pm

This particular tag only works on iOS as far as I know, but there’s likely something similar for other browsers, or maybe generic for WebKit, upon which most mobile browsers are based.

Walter

On Nov 22, 2019, at 12:13 PM, Richard Cacciato <[email protected]> wrote:

Wow. I’ll try it. Thanks, Walter. Is there something similar in other browsers (such as Chrome on Android) or does it only work on iOS devices?

Freeway user since 1997

http://www.walterdavisstudio.com

Richard Cacciato

10 Dec 2019, 3:33 pm

Turns out Android has a similar tag:

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

From here: https://stackoverflow.com/questions/4617073/meta-tag-apple-mobile-web-app-capable-for-android

However, I’ve tried it and it doesn’t seem to work. Here’s a test file: http://www.blue-iceberg.com/test/webapp/

Not sure what I’m doing wrong…

waltd

10 Dec 2019, 4:17 pm

Which browsers are you testing it with? Android has dozens, and no enforcement of updates, so YMMVW.

Walter

On Dec 10, 2019, at 10:33 AM, Richard Cacciato <[email protected]> wrote:

Turns out Android has a similar tag:

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

From here: https://stackoverflow.com/questions/4617073/meta-tag-apple-mobile-web-app-capable-for-android

However, I’ve tried it and it doesn’t seem to work. Here’s a test file: http://www.blue-iceberg.com/test/webapp/

Not sure what I’m doing wrong…

Freeway user since 1997

http://www.walterdavisstudio.com

Richard Cacciato

11 Dec 2019, 4:05 am

I tested it on Safari on iOS. This has worked on other pages.

Richard Cacciato

11 Dec 2019, 4:20 am

Let me rephrase that: I’ve seen other mobile web pages in the past that use app mode and that worked (unfortunately I no longer have the addresses).

waltd

11 Dec 2019, 2:08 pm

I looked some more, and here’s another approach (read the whole page — there’s some additional info for Android) that you can try: https://stackoverflow.com/questions/11280826/html5-full-screen-web-apps-no-browser-bars

Walter

On Dec 10, 2019, at 11:19 PM, Richard Cacciato <[email protected]> wrote:

Let me rephrase that: I’ve seen other mobile web pages in the past that use app mode and that worked (unfortunately I no longer have the addresses).

Freeway user since 1997

http://www.walterdavisstudio.com

waltd

11 Dec 2019, 2:12 pm

For iOS:

<meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Freeway is probably already making the width=device-width, initial-scale… parts for you, because that’s the stuff you set in the Page Inspector. I’m not sure what you will do to ensure that the minimal-ui part is in that tag as well. You may have to replace that tag with your own hand-coded one, entered through the Meta Tag interface, and experiment with the Page Inspector / Output tab settings (look in the Page can be scaled area) to ensure that Freeway doesn’t write a second tag, which might be confusing the browser.

Walter

On Dec 11, 2019, at 9:08 AM, Walter Lee Davis <[email protected]> wrote:

I looked some more, and here’s another approach (read the whole page — there’s some additional info for Android) that you can try: https://stackoverflow.com/questions/11280826/html5-full-screen-web-apps-no-browser-bars

Walter

On Dec 10, 2019, at 11:19 PM, Richard Cacciato <[email protected]> wrote:

Let me rephrase that: I’ve seen other mobile web pages in the past that use app mode and that worked (unfortunately I no longer have the addresses).

Freeway user since 1997

http://www.walterdavisstudio.com

Richard Cacciato

11 Dec 2019, 5:56 pm

Hm. I removed other MetaTags by hand and now the only ones are these:

<meta name="generator" content="Freeway Pro 7.1.4">
<meta name="apple-mobile-web-app-capable" content="yes" />

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

Still doesn’t behave in app mode. Address bar and footer still there. Has this functionality been suppressed?

waltd

12 Dec 2019, 1:20 am

Okay, this is a bit of a hassle, but here you go:

https://scripty.walterdavisstudio.com/app-mode

When you initially visit this page, you will see the regular Safari cruft. Now click the Share icon and choose Add to Home Screen. This will add an icon to the springboard on your iOS device. Quit Safari. Press the icon on your springboard, and the “app” will launch and appear without a title bar or other chrome.

~~~~ <meta name=”viewport” content=”minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”> <meta name=”apple-mobile-web-app-capable” content=”yes”> <meta name=”apple-mobile-web-app-title” content=”AppTitle”> <meta name=”apple-mobile-web-app-status-bar-style” content=”default”> ~~~~

I have no idea what combination of these things works -- I just kept adding things to the meta until I got the result. My latest source of ideas was here: <https://medium.com/appscope/designing-native-like-progressive-web-apps-for-ios-1b3cdda1d0e8>

Walter

> On Dec 11, 2019, at 12:56 PM, Richard Cacciato <[email protected]> wrote:
> 
> Hm. I removed other MetaTags by hand and now the only ones are these:
> 
> <meta name="generator" content="Freeway Pro 7.1.4">
> <meta name="apple-mobile-web-app-capable" content="yes" />

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

Still doesn’t behave in app mode. Address bar and footer still there. Has this functionality been suppressed?

Freeway user since 1997

http://www.walterdavisstudio.com

waltd

12 Dec 2019, 1:27 am

And the biggest hassle is that I find I have to delete the bookmark from the home screen, then re-add it from Safari, every time I want to see a new version. Otherwise, web apps are heavily cached.

Walter

On Dec 11, 2019, at 8:20 PM, Walter Lee Davis <[email protected]> wrote:

Okay, this is a bit of a hassle, but here you go:

https://scripty.walterdavisstudio.com/app-mode

When you initially visit this page, you will see the regular Safari cruft. Now click the Share icon and choose Add to Home Screen. This will add an icon to the springboard on your iOS device. Quit Safari. Press the icon on your springboard, and the “app” will launch and appear without a title bar or other chrome.

<meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="AppTitle">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

I have no idea what combination of these things works — I just kept adding things to the meta until I got the result. My latest source of ideas was here: https://medium.com/appscope/designing-native-like-progressive-web-apps-for-ios-1b3cdda1d0e8

Walter

On Dec 11, 2019, at 12:56 PM, Richard Cacciato <[email protected]> wrote:

Hm. I removed other MetaTags by hand and now the only ones are these:

<meta name=”generator” content=”Freeway Pro 7.1.4”> <meta name=”apple-mobile-web-app-capable” content=”yes” /> <meta name=”mobile-web-app-capable” content=”yes”>

Still doesn’t behave in app mode. Address bar and footer still there. Has this functionality been suppressed?

Freeway user since 1997

http://www.walterdavisstudio.com

Richard Cacciato

12 Dec 2019, 1:38 am

Thanks for your sleuthing, Walter. The other mobile web pages I referred to before would just open in app mode from a url. This was in a mobile ad platform named Ada that I used to work with but no longer can access. I have no idea how they did it but it was pretty striking. I’ve tried to find examples but haven’t yet. WIll poke around some more. Thanks.