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?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
That property, which is known colloquially as “App Mode”, is easily added by inserting a new meta tag in the head of the page.
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@hidden 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?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
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?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
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@hidden 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?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Turns out Android has a similar tag:
From here: html - Meta Tag "apple-mobile-web-app-capable" for Android? - Stack Overflow
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…
freewaytalk mailing list
email@hidden
Update your subscriptions at:
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@hidden wrote:
Turns out Android has a similar tag:
From here: html - Meta Tag "apple-mobile-web-app-capable" for Android? - Stack Overflow
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…
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
I tested it on Safari on iOS. This has worked on other pages.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
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).
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I looked some more, and here’s another approach (read the whole page – there’s some additional info for Android) that you can try: html - HTML5 Full Screen Web Apps: No browser bars - Stack Overflow
Walter
On Dec 10, 2019, at 11:19 PM, Richard Cacciato email@hidden 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).
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
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@hidden 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: html - HTML5 Full Screen Web Apps: No browser bars - Stack Overflow
Walter
On Dec 10, 2019, at 11:19 PM, Richard Cacciato email@hidden 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).
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Hm. I removed other MetaTags by hand and now the only ones are these:
Still doesn’t behave in app mode. Address bar and footer still there. Has this functionality been suppressed?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
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: Designing Native-Like Progressive Web Apps For iOS | by Appscope | Appscope | Medium
Walter
On Dec 11, 2019, at 12:56 PM, Richard Cacciato email@hidden wrote:
Hm. I removed other MetaTags by hand and now the only ones are these:
Still doesn’t behave in app mode. Address bar and footer still there. Has this functionality been suppressed?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
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@hidden wrote:
Okay, this is a bit of a hassle, but here you go:
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: Designing Native-Like Progressive Web Apps For iOS | by Appscope | Appscope | Medium
Walter
On Dec 11, 2019, at 12:56 PM, Richard Cacciato email@hidden wrote:
Hm. I removed other MetaTags by hand and now the only ones are these:
Still doesn’t behave in app mode. Address bar and footer still there. Has this functionality been suppressed?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
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.
freewaytalk mailing list
email@hidden
Update your subscriptions at: