Rahul Gaba

I am a full stack developer who loves writing code for a living. I am passionate about JavaScript, VR, react-native, nodeJS, web development and Paneer.

 » Blogs
 » About Me
 » Projects and Experiments
 » Github
 » XML Feed

Using iPhoneInstallOverlay plugin in your progressive web-app to show add to home screen banner in iPhone Safari

31 Jul 2016 » front-end

What is it?

A JavaScript plugin which shows a message to install the web application on iPhone devices(on Safari browser). This will be useful if you are building a progressive web application. If you don’t know what progressive web applications are, head over to Progressive web apps blog by Google

Why is it required

Though service workers are not yet supported on Safari, we can still achieve a lot using HTML5 application cache and localStorage. And Safari does support launching your application in a full screen mode using just a meta-tag. (Refer Safari meta-tags to know more).

This is a feature chrome has recently released where it checks that if your web app is using service workers and shows a banner to install the application to the home screen. Official blog by Google

I believe that this is a really cool feature to have and I thought of bringing the same feature to the iOS devices.

Using the plugin

The plugin is available as a bower component and an NPM module. You can install it in an application by either

bower install iphone-install-overlay


npm install iphone-install-overlay

Using the plugin is pretty straight forward. The plugins exposes a global variable called iPhoneInstallOverlay.

Then you need to call the init method and pass the options.

  blurElement: '.view-container',
  appIconURL: './assets/images/login/app-icon.png',
  spritesURL: './assets/images/mobile-sprite.png',
  appName: 'Awesome Progressive app'

Option Required     Explanation
blurElement YES     The element on which blur class will be applied. (The div containing the whole view of the application)
appIconURL NO     URL to the application icon.
spritesURL NO     URL to the sprites containing png icons. Its there in dist/mobile-sprites.png
appName NO     The application name (Your App Name by default)
showOnReload NO     Show overlay on reload or show only for the first time
previewText NO     Text to show to skip the overlay (Preview in browser by default)

You can also control the visibility of the overlay after initialising the plugin using the init() method using




Screenshots and Demo

Working demo of the plugin: http://rahulgaba.com/iPhone-install-overlay

App overlay Installed app Full GIF

Please go ahead and use this plugin in your next progressive web app and feel free to raise issues/pull-requests