Progressive Web App Banner
Hi there, here’s a tip for all you of guys trying to convince your users to add your web application to their home screen, making it more similar to native apps.
Up until now I’ve been using banners or flash messages to display non-intrusive hints for users, explaining how to save this application to the homescreen, but for non-technical users, those instructions could be unclear. You can make it easier for Android and Chrome users, by adding a native web app install a banner on your website. The most important difference between this and your own solution is that it’s more similar to native application banner, meaning it’s much more familiar and simple to the users. As a user, all you have to do is to click a button — an app will install itself in the background and notify the user about the installation process with push notification. Neat!
There are few necessary steps for it to appear:
1. Create Web App Manifest
Web App Manifest is a very simple JSON document which defines how the application will behave once it’s been added to the phone. You don’t have to fill all of the fields in it, only four of those properties are absolutely required:
a) a short_name which will be app name on homescreen
b) a name which will be displayed on install banner
c) a 192x192 PNG icon
d) a working start_url indicating URL which should be loaded by the app.
Add it to your website using metadata link in your <head/>:
<link rel="manifest" href="/manifest.json">2. Use HTTPS connection
The manifest technology requires registering a service worker, so it works without internet access. For service workers, to register properly, a safe connection is needed. If you don’t have an SSL certificate yet, I recommend you to check out https://certbot.eff.org/, where you will find easy to follow step-by-step guides on how to get your own free SSL certificate using Let’s Encrypt.
3. Add service worker for offline usage
Like I’ve mentioned before, another requirement is a service worker, who will be caching your application assets, so they’re available even while being offline. You can write your own service worker by hand, but if you don’t need anything extraordinary, there’s a library called UpUp that will make this work for you out of the box.
Once you have those three steps done, it’s time to test it in real life:
1. Open Chrome DevTools on your web app
2. Go to “Application” tab
3. Select “Manifest” from sidebar, where you should see settings and icons from your manifest file.
4. Click on “Add to homescreen” link.
If you do this while debugging web session on your Android device, you should see a popup with install button, just on the bottom of the screen. Clicking it will trigger app installation on your mobile device.
In case you try this on your desktop, you will see a notification on top of the screen, under your bookmarks navigation bar. When you click on it, you will get a shortcut to your application added in your system (Spotlight in case of OSX)
For now, install banners are available only in Chrome, but there was an announcement that WebKit team is working on Web App Manifest implementation so hopefully we will be able to see broader support for this kind of technology in the nearest future.
Read more from Untitled Kingdom:
