Search code examples
ioshtmlweb-applicationssafaricache-manifest

Closing safari in the task switcher breaks Add to Homescreen

We have an https webapp using an html cache manifest so it can run offline.

We instruct our users to add it to the homescreen for the best experience (no address bar on phones, etc etc). We have an issue where if you remove the app from the homescreen, close safari and then re-open and re-add to homescreen, the app will not use the app icon and cannot complete https requests and is missing some cached data.

The app will continue to always work great in safari itself, all resources are cached and loaded, and all https requests work fine.

Here are the steps to reproduce this, we have done it on an iOS 7 iPhone, iOS 8 iPhone, and an iOS 7 iPad2. This may work for other webapps making https requests and using cache manifests, but I'm not sure. This reproduces with a real cert as well as a self-signed cert.

Steps to Break the Webapp

  1. Go to the homescreen
  2. Tap and hold on the Webapp App Icon
  3. Tap the little x that appears to delete the app from the homescreen
  4. Tap the home button to close the edit mode
  5. Double-tap the home button
  6. Swipe up on ALL open apps (Safari and Webapp if open)
  7. Re-open Safari (should reload the webapp)
  8. Tap the share button and add to homescreen. (Should NOT show logo)
  9. Open the app from the homescreen and attempt to deploy

Steps to FIX the webapp

  1. If the Webapp exists on the homescreen, do the following:
  2. Tap and hold on the webapp icon
  3. Tap the x that appears to delete it
  4. Tap the home button to close edit mode
  5. Open Settings->Safari
  6. Tap Clear History
  7. Tap Clear Cookies and Data
  8. Open Safari, type in https://OurWebappURL
  9. Tap the share button and add the app to the homescreen (Should show logo and “AppTitle”)
  10. Open the app from the homescreen and deploy

Here is the chunk of the html <head> tag that tells it to run as a webapp and use an app icon (it's cross-platform).

<html lang="en" manifest="cache.manifest">
<head>
    <title>Our App Title</title>
    <!-- Enable the homescreen app on mobile devices -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <!-- Enable the App Icon -->
    <link rel="icon" type="image/png" sizes="196x196" href="images/AppIcon.png">
    <link rel="apple-touch-icon" href="images/AppIcon.png">
    <link rel="apple-touch-startup-image" href="https://ourURL/images/iPhoneStartup.png">

    <meta name="viewport" content="width=device-width" />
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, height=device-height, width=device-width" />

    <meta http-equiv="content-language" content="en">

If we remove the <meta name="apple-mobile-web-app-capable" content="yes" />, causing it to open safari and load the app there, it works fine, as it's just running inside safari. However, this is not the experience we want, so it is a workaround, not a solution. This also doesn't fix the issue of adding to homescreen the second time, the logo is still not used.

We're not registered as apple developers so I can't log a bug report. Please chime in with any ideas or feedback, this is a very tough one!

EDIT: I've now tested this with an http (no SSL) version of the same application and it works fine, this appears to be an https issue.

Solution

  • We determined that the cause of this is having a wildcard cert that has an incomplete certificate chain, or by using a self-signed cert.

    Fully signed single-domain certs work great most of the time, and we're recommending that to our clients, but it appears that you can repair cert chains by contacting your cert provider and requesting the intermediate certs to install.

    We did not do that in this case, we went to a single-domain cert with a shorter chain, as far as I can tell.