Mobile Web Application / Progressive Web Application on the iPhone (iOS, Safari)

BenjaminS · April 27, 2023

I use Caspio URL deployment for my submission form and I would like to make a "Mobile Web Application" as described here. In fact, all I want to achieve is to hide Safari user interface components. This is apparently achieved by setting the apple-mobile-web-app-capable meta tag to yes:

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

As I understand the meta tags need to be added to the HTML <head>.

There is a similar thread that suggests to inject the instructions for the HTML's head in the DataPage footer like so:

<script language="JavaScript">

var meta = document.createElement('meta');

meta.name = "Author";

meta.content = "Name";

document.getElementsByTagName('head')[0].appendChild(meta);

</script>

I modified it and injected it in the footer of my Submission form, but it doesn't work:

<!-- Progressive Web App PWA -->

<script language="JavaScript">
  var appleMobileWebAppCapableMeta = document.createElement('meta');
  appleMobileWebAppCapableMeta.name = "apple-mobile-web-app-capable";
  appleMobileWebAppCapableMeta.content = "yes";
  document.getElementsByTagName('head')[0].appendChild(appleMobileWebAppCapableMeta);

  var appleMobileWebAppStatusBarStyleMeta = document.createElement('meta');
  appleMobileWebAppStatusBarStyleMeta.name = "apple-mobile-web-app-status-bar-style";
  appleMobileWebAppStatusBarStyleMeta.content = "white";
  document.getElementsByTagName('head')[0].appendChild(appleMobileWebAppStatusBarStyleMeta);

  var appleMobileWebAppTitleMeta = document.createElement('meta');
  appleMobileWebAppTitleMeta.name = "apple-mobile-web-app-title";
  appleMobileWebAppTitleMeta.content = "Notentool";
  document.getElementsByTagName('head')[0].appendChild(appleMobileWebAppTitleMeta);
</script>

How can I add the meta tag to the HTML's <head> using Caspio?*

*Bear in mind that I am a no coder / an utter newbie.

Any suggestion is much appreciated!

Benjamin

Login

Mobile Web Application / Progressive Web Application on the iPhone (iOS, Safari)

Recommended Posts

BenjaminS

Link to comment

Share on other sites

Join the conversation

Browse