James McCrary
  • Home
  • Contact

Build an iOS Web App...Easy & FREE!

12/26/2016

0 Comments

 
iOS web apps are actually websites on Safari that are saved to the home screen using native tools in iOS. This usually turns the website into a small icon that looks like a webpage and title you enter for easy access. Some websites have special icons called Favicons in their code to make the web app have a special icon like a true app. Some even go further and take the look of a web browser completely away, giving the appearance of a true app to the website.
Wouldn't it be cool to make your website one of these cool web apps? And wouldn't be better if you could do it for free? 
​

First things first

Here are the sites that you will need accounts:
  • Weebly for the free website
  • Canva for creating the web app icon
There are more ways to accomplish building this customized web app, but I will be using Weebly and building for iOS. 

​If you have never built a website using Weebly, check out this tutorial:

If you have never used Canva before, watch this tutorial:

Points to keep in mind...

  • When testing the changes, you need to delete any web app from your site on your iOS device and also clear Website History & Data. If you do not, you will not see changes or updates in the existing web app.
  • While Canva does provide a link to your created icon, it is a best practice to download the design and upload to the same website for which you are designing the icon.
​

Step 1

Create an icon in Canva. To do so, create a custom design and size it to 1024x1024px. For the best looking icon on an iOS web app, make the background image white. To make things easier later, change the name of the design to "apple-touch-icon" and download as a png file.
​

Step 2

Create a page in your Weebly website named "images". Make sure to select "Hide in Navigation".
Drag an image place holder to the "images" page and then upload your "apple-touch-icon.png". Fair warning, sometimes the upload process does not like hyphens in the upload. You can rename without the hyphens, you just may need to remember to potentially rename it in the code also. I would recommend trying it a few times or open in something like MacOS preview and export as the same name. This can sometimes remedy the issue and cut down on issues later. Once you click publish, open another web browser tab and go to your iamges web page. It should be your domain plus "/images". Here is what mine looks like: jamesmccrary.com/images. We will come back to this web page later.
​

Step 3

Access your Weebly website's settings for your header code under SEO (Search Engine Optimization). 
Picture
Paste in the following code in the header:

<link rel="apple-touch-icon" href="xxxx"/>
<link rel="apple-touch-icon" sizes="72x72" href="xxxx"/>
<link rel="apple-touch-icon" sizes="114x114" href="xxxx"/>


Replace xxxx with your image web location. To find the image location, go back to your web site images page you opened earlier. Right click the image and select "Copy image address" on a Mac or "Copy image URL" in Windows. Once you have completed this step, most iOS devices will scale to the appropriate sized icon image.
​

Step 4

Only completing through step 3 will not yield the best results. Two things occur if you stop there: 
  1. Your users will get a default name when they save to home screen that is as long as the website. That doesn't look great as an icon title on an iOS home screen.
  2. When your users click the icon on their home screen, it will open in Safari. Not exactly what a true app does.
So, here is the code to place below the icon code in the header (replace xxxx with whatever you want:

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

​                     
While both lines fix the above two issues, another one will arise. Please move on to step 5 to see the problem and cure.
​

Step 5

Removing the web interface makes your web app look really clean and crisp. However, once the user navigates away from the home page to another page in your site, it will open in Safari. So here is the code you need to place under the other code in the header. No need to edit...just copy and paste:

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>

Step 6...Test it Out!

Make sure to click save at the bottom right in the settings on Weebly, then click Publish in the top right. Grab your iOS device and go to your website on Safari. Add your website to your home screen.
Picture
Let me know your thoughts or if your think I am missing anything...I'm here to help.
0 Comments

    Author

    James McCrary is a director of technology and innovation and consultant located in Baton Rouge.

    He has a background as a social studies educator and technology specialist. An Apple Distinguished Educator, Google Certified Innovator, and Common Sense Media Certified Educator, James is passionate about integrating technology skills into the classroom and positively impacting students globally.

    He presents at local, state and international conferences on innovation in education, with a focus on 3D development, especially for augmented reality (AR) and virtual reality (VR). He also hosts "The VR Podcast" with several educational leaders throughout the U.S., discussing how immersion technology is impacting education and business.

    He holds a bachelor’s degree in history from Louisiana State University and an M.Ed. in educational leadership from Southeastern Louisiana University.

    Archives

    December 2016
    September 2016

    Categories

    All
    360
    Ed Tech
    Handwriting Vs Digital Input
    Virtual Reality
    Web App
    Website

    RSS Feed

Subscribe
Home
​Contact


  • Home
  • Contact