Add web app to home screen

iphone ios ipad web-applications

13,151

I've just got a proposed edit to the answer telling me it doesn't work anymore. Fist of all, the proposed edits are used to edit the answer, if it doesn't work and you know how to fix it, send the fix on the update, if you don't know how to fix it, post a comment instead and provide more info, not just "it doesn't work".

There is a new add2home version http://cubiq.org/add-to-homescreen-goes-3

Source code is here: https://github.com/cubiq/add-to-homescreen

The basic usage for the new version

<head>
<title>Add To Home</title>
...
<link rel="stylesheet" type="text/css" href="../../style/addtohomescreen.css">
<script src="../../src/addtohomescreen.js"></script>
<script>
addToHomescreen();
</script>
</head>

use this script Cubiq add to home screen

Usage, copy the files add2home.js and add2home.css to the folder where you have your ipad.html and edit your <head> to include this:

<head> 
<link rel="stylesheet" href="add2home.css"> 
<script type="application/javascript" src="add2home.js"></script> 
</head>

13,151

Author by

Kev Hopwood

Updated on June 25, 2022

Comments

Kev Hopwood almost 2 years

I have a web app situated at www.xclo.mobi

I notice that when looking at other IOS web apps, they have an image that points to the browser menu telling people to install there web app to their device that appears as soon as the user views that page.

The image generally says: "Install this web app on your device: Tap on the arrow and then 'Add to Home Screen'"

can someone please advise me on how to add this? what codes will I need to add to my IOS home pages in order to get this?

thanks a lot for your help.
Kev Hopwood about 11 years

Ok so, I have added the files listed on the page that JCESAR sent to me. and followed all the instructions. I have added the code required to my ipad.html page and refreshed my ipad. Nothing happened. Am I missing something? do I need to add the image above as an image on my server or something? please help. Thanks.
jcesarmobile about 11 years

You have to include the add2home.js, add2home.css and put this between your <head> and </head>, something like this <head> <link rel="stylesheet" href="add2home.css"> <script type="application/javascript" src="add2home.js"></script> </head>
jcesarmobile almost 11 years

First of all, I don't think it's a real programming question. And second, you stopped commenting while I was trying to help you
Kev Hopwood almost 11 years

hi jcesar, thank you for explaining. As it is a problem that generally requires coding, I do believe that it is a programming question. secondly was just after this reply my account was hacked and forgot to thank you for your help after I got my account back. thank you for your help. Please can you remove the -1 as I do not believe it is fair. THANKS AGAIN.
jcesarmobile almost 11 years

I can't change the vote (it's locked) if you edit the question I think that will unlock my vote
Kev Hopwood almost 11 years

question updated. i do believe it is simple enough. please remove my -1 vote. thanks.