Hi,

Clear cache of a homescreen web app

Quick tip for something i forgot and spend hours on. Maybe this will help other people. I feel a bit stupid for not doing this earlier.

If you are making a responsive website and at some point add it to your homescreen, you may run into the same issue i did. Its that you keep updating the website and want to check later on how its going but cant refresh, because you are using it with:

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

It looks so pretty but how can you clear the cache, deleting the web app doesnt work.

• Connect the phone to the Mac.
• Make sure on your phone its set to Settings->Safari->Advanced->Web inspector->On
• Open the web app from the homescreen
• On you Mac OSX Safari, go to the tab Develop->Your iPhone->Your Site
• Hit CMD+R in the console. That should refresh the web app and clear the cache.

White status bar with black text

Add this to your head

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

On runtime or load, add this.

if(window.navigator.standalone) {
    $("meta[name='apple-mobile-web-app-status-bar-style']").remove();
    $('html').addClass('webapp');
}

You might want to add the webapp class thingy as well so you know when its in that view as you need to add pixels to your header in order to not get behind the status bar.

Boilerplate Meta setup

This is a general setup i have used and is quite handy.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<meta name="apple-mobile-web-app-title" content="My App">

<!-- iOS 6 & 7 iPad (retina, portrait) -->
<link href="/static/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 & 7 iPad (retina, landscape) -->
<link href="/static/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 iPad (portrait) -->
<link href="/static/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<!-- iOS 6 iPad (landscape) -->
<link href="/static/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<!-- iOS 6 & 7 iPhone 5 -->
<link href="/static/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 & 7 iPhone (retina) -->
<link href="/static/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 iPhone -->
<link href="/static/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<link rel="apple-touch-icon" href="/static/images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/static/images/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/static/images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/static/images/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/static/images/touch/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/static/images/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/static/images/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/static/images/apple-touch-icon-152x152.png" />




<!-- Global tags -->

<meta charset="<?php bloginfo('charset'); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<link href="//www.google-analytics.com" rel="dns-prefetch">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


<!-- Mobile tags -->


<meta http-equiv="cleartype" content="on">

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">


<link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon" />

<meta name="msapplication-TileImage" content="/static/images/apple-touch-icon-144x144.png">
<meta name="msapplication-TileColor" content="#cccccc">

Generate apple icons on the fly

I have used this website and its been pretty good.

http://iconifier.net/