Adding apps to the home screen in iOS and Android

I am exploring the possibility of turning Anvil apps into “Native” apps on tablets and phone (Android and iOS) by having the user add the page to the phone/tablet home screen. By running Anvil apps from the home screen and running it as a “native” app solves the issue of the user potentially hitting back in the browser and unwillingly exiting the app.
Furthermore, running it as a “native” app enhances user experience and makes the Anvil app start from the home screen of phones/tablets and provides more viewing space on the screen.

In order to get an Anvil app working as a “native” app some lines must be inserted into the header of the html-source, but I have not found any way of doing so in Anvil.
I have made a quick test and verified that it works on iOS (iPhone) by inserting the three lines in a test html document (not an Anvil app) uploaded on another hosting provider and then adding the page to my phones home screen.

<meta name="apple-mobile-web-app-title" content="Gældsplan">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Does anyone know of how the header of the Anvil web app can be edited so “native” apps can be made from Anvil?

Some information about enabling web apps on home screen on iOS and Android can be found here:

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

https://developer.chrome.com/multidevice/android/installtohomescreen

5 Likes

Do you know if those meta tags have to be in the page <head> tags?
I ask because if you create a custom HTML page, your code runs in an iframe (you can see that if you inspect the running app in the browser), and if you create your own <head> tag it adds it in there.

So it’s on the page somewhere, but no good if the native-making process won’t look any further than the main tags.

You can put them adjacent to the tags, but if they are not exactly afterwards it doesn’t work.

....
</head>
<head>
  <meta name="apple-mobile-web-app-title" content="Gældsplan">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>

To be sure I’ve just re-tested with different placements of the <head>-block containing the meta-tags in a standard html document.

I’ve moved this to the Feature Requests forum, as this is something we would need to implement on our end. However, this sounds like something we would like to enable, so watch this space!

4 Likes

I’ve had my user utilize the Chrome “Add to Home Screen” feature without issue.

There are no issues regarding adding an Anvil app to the home screen. However, doing so at the moment only makes a shortcut to the app url and opening it in the browser, thus removing the app capabilities I’ve referred to.

If the html header information regarding how the web app should behave (i.e. no url bar etc.) is not included the web app cannot behave as a native app after being added to the home screen.

When your user utilized the “Add to home screen feature” did it open the app directly in the browser of the device?

Ah, I see what you are trying to do. You are correct, it opened in Chrome.

1 Like

Am I the only one who have this problem? On my Samsung Galaxy Tablet, it is working great, but on my 12.9-inch iPad (2017) - iOS 11.2, the app icon only displays half of it. I don’t know if it is the issue only with my iPad or the same with other iPad models. Any ideas?

That is something to do with you not providing icons to retina spec. on the Apple device.
Beyond that, I’m no help at all, sorry!

Hello,
I’v been able to add the <meta …> tags to the “Native Libraries” Assets section.
Doing so and adding the link to the home screen works perfectly: when the application is launched it opens full screen, without the URL address bar.
The only problem I am facing is this: each time I publish an updated version of the app, when I try to open it from the homescreen link I get the error message:
“This application is private - To access this application, you neet the its secret URL…”
Trying to refresh the page (swipe down and release) won’t change anything.
The only thing that works is opening the application from Chrome again.
This simple action seems to “refresh” somehow the application URL and, after that, the application can be launched from the old homescreen link again.

How can I overcome this?

Thanks and BR

1 Like

I found a partial workaround.

  1. from anvil, get the Published app link
  2. disconnect the phone (put it in airplane mode)
  3. paste the link from 1) into the browser. This way, there will be no redirect.
  4. using your mobile browser’s functionality, add this site to the home screen.
  5. connect the phone back to the internet.

This way the link will always work, but the app will lose all its native app look & feel, as already stated by neriksen85.

Hi Aldo,

Yes, that’s an unfortunate consequence of the way we keep the secret URL out of the title bar (to avoid leaking it). Adding Anvil apps to the home screen is supported much better if you set your app to Public

1 Like

This would be a great feature add, interesting to see that it works already in the way aldo me mentioned. Both iOS and Android support the progressive web app spec as well. Adding support for this would allow the app to run service workers that can cache data. For my uses these service workers aren’t very useful, but for other types of apps that use more static resources like images or other UI elements that could be nice.

2 Likes

By the way there are certain tools online which allow you to convert a website into app and even publish it on a Play Store or App Store. I’ve tried one of them on my website and it works perfectly

1 Like

You can already bookmark a webpage/Anvil app to the home screen which works well but the icon only shows a version of the page. When it is opened it opens without the url bar which is nice. Its a nice in between step.

Yes but I’m talking a proper app for your website here which can be officially published on Play Store and App Store

Would you mind sharing the tool(s) that you refer to that work at converting a website into app that can be published to the Play & App stores?

Many thanks

Many tools out there. My preference goes to website2apk although it only works for android. But there are many more like gonative, appgeyser, convertify. Just google ‘convert website to app’ and you’ll see so many options.

Although these options are only recommended if you cannot build an app or don’t have time for it. Just imagine these websites as a mobile browser that will only display your website.

Many thanks. Much appreciated

1 Like