Polyfiling the homescreen experience on iOS and other legacy browsers

A common question developers and business owners ask is how to enable progressive web application features on iOS and older browsers like Internet Explorer. While all features cannot be hacked in these browsers, much of it can.

When the iPhone was released, the initial application model was the web. They created an advanced experience for web apps that included the add to homescreen experience. Unfortunately, they did not make an automatic prompt experience. Who knows how advanced this might be today if developers did not cry out for the native app model.

What we can do is still leverage this capability and use Matteo Spinelli's add to homescreen library (http://cubiq.org/add-to-home-screen) in combination with Apple's guidelines. Doing so allows your web apps to launch from user's home screens, with or without Chrome. This is shown in the following screenshot:

It is important that you avoid duplicating homescreen prompts by not loading the Add to Home Screen library unless needed. The simplest way I have found to determine if the polyfil is needed is by using feature detecting service worker support. I chose this since browsers supporting service workers have some sort of add to homescreen experience. This may or may not remain true in the future, so be ready to change criteria if things change.

Without going into details, I like to dynamically load JavaScript references when a page is loaded. This process involves a series of feature detections to polyfil various requirements like Promises and the Fetch API:

        if (!'serviceWorker' in navigator) { 
            //add to homescreen polyfil 
            scripts.unshift("js/libs/addtohomescreen.min.js"); 
        } 

You will also need to dynamically add the add to homescreen stylesheet. This time, add a feature detection script to your document's HEAD:

    <script> 
        if ('serviceWorker' in navigator) { 
 
            // add addToHomeScreen CSS 
            cssLink = document.createElement("link"); 
 
            cssLink.id = "addToHomeScreen"; 
            cssLink.rel = "stylesheet"; 
            cssLink.type = "text/css"; 
            cssLink.href = "css/libs/addtohomescreen.css"; 
            document.head.appendChild(cssLink); 
 
        } 
    </script> 

Users have been able to install web apps like this since the iPhone was released, but the process is manual and largely unknown by end users and developers alike. The lack of an automated prompt has been a key missing component of this feature. The experience it creates seems to be a model that the Chrome team and other platforms modeled to surface the progressive web application homescreen prompt.

Matteo's library only prompts the user and starts them down the manual process. but there are still a few extra steps that aren't intuitive that users must complete. The new native add to homescreen process has a pseudo automatic pipeline you can integrate. I think the add to homescreen library may serve as a good reference for designing your experience, so it is worth your time to look at it.