Your Three Step Guide to Your Customers' Home Screens

Engagement, one of the pinnacles of branding success. Mobile apps have dominated user engagement. However, adding a web site icon or link to the desktop has been rarely used feature. The lack of adoption might be linked to discoverability or lack thereof. The lack of reliable performance is another factor hurting the web on mobile.Your Three Step Guide to Your Customers Home Screens

This is a simple progressive web application tutorial to get you started. PWAs require your site to use HTTPS, a valid web manifest file and registered service worker. These three technical requirements get you started.

Variations of adding a web site to the home screen/desktop have floated around, starting with browser favorites and more recently toolbars and reading lists. All these solutions saw seen limited success and often succumb poor use or just plain user fatigue. I think many users were unaware they can add desktop shortcuts to web sites, a feature that lacked publicity.

Favorites and bookmarks are more widely used. Unfortunately, many users add numerous urls to their favorites list, but avoid organizing links. Even when they do organize links they create so many folders and sub folders they forget they saved the link. After a while, they abandon the feature because searching for a site that fills their need is faster.

Your Three Step Guide to Your Customers Home Screens

Native applications go the extra mile by requiring the customer to add your application icon to the home screen or desktop. You might even be able to add it to a start menu or group of apps. There is something about going through the steps to install an application and accessible from the home screen. However, this is not helping many applications as users funneled themselves to 3 apps for 80% of their mobile activity.

This last statistic indicates we passed peak app, the point where customers no longer download native apps, nor use them. Unless you are Facebook the chance a consumer will engage your brand via a native application is dumb luck at best.

Research shows the average mobile user visits over 100 unique web sites each month. There are many reasons to this phenomenon. The lack of any commitment is one, but loading a web page has a lot less friction than a native app when you factor in the app store experience. Plus mobile disk space is precious and consumers are more interested in storing photos and music than your 150MB native app containing the same content as your much lighter web site.

So why has the web not succeeded in disrupting the native application space? The web has the advantage of reach, meaning availability to everyone. The ability to deep link to content. As Alex Russell proclaimed, "linking is the web's super power".

Native applications held an advantage in capabilities. They are platform specific applications, and thus can more tightly integrate with device hardware and operating system features. This is where I challenge native application champions because I rarely see these platform specific features integrated in the majority of native applications. Distinguishing native applications from web sites is difficult, they both provide rendered content, with possibly some animations. What does differentiate the two mediums is the home screen and lack of browser chrome.

One feature that many popular native applications implement is push notifications. This is the one feature potential clients have asked us for we could not implement. This is changing as service workers gain support. In short, it is a sign of a more level playing field between native and web. However the web still retains the reach advantage. SO how do you leverage this advantage for your brand?

So How Do You Get Your Mobile Web Experience on a Customer's Home Screen?

For many years web sites could be added to the home screen, beyond the scenarios outlined earlier. On iOS you can add any web site to the home screen with a couple of screen taps. If your site includes instructional META tags your brand's icon now prominently displays along native applications. An additional META tag directs Safari to launch the web site as a stand alone instance, without browser chrome. At this point your web site now looks and feels like a native application.

Customer's don't care about your technology stack, they care about your content and the user experience quality. If you can nail both you may earn a very loyal customer.

A few years ago Android Chrome adopted the iOS META tags, allowing mobile users the ability to achieve the same experience as the iOS user.

While Windows users can't launch web applications without the chrome, additional META content directs the Edge/Internet Explorer eco-system to add a Live Tile to the start menu.

ie-live-tiles

Progressive Web Applications (PWAs) take this concept to the next level. PWAs are a class of web sites and applications that meet a minimal requirement set. In exchange browser vendors are offering an enhanced user experience to those sites.

Chrome will prompt a mobile user to add the web application to their home screen and even launch without the browser chrome. Microsoft allows you to add your site to the Microsoft Store as a Hosted Web App. After 'installing' the HWA the user can then launch the web application as a stand alone application. Your site will also have access to extra platform specific APIs.

FireFox and Opera are also offering enhanced benefits. Because PWAs are relatively new the advantages may still be considered limited. Many new features being considered and implemented by browser vendors. Today there are also benefits beyond just home screen presence, including potential native push notifications and other hardware APIs.

What do you need to qualify as a PWA?

Three common PWA requirements are HTTPS, A Web Manifest File and a Service Worker. However you do not need a service worker to qualify as a Microsoft HWA.

HTTPS

HTTPS is no longer just a way to secure e-commerce sites. HTTPS has become a requirement for every web site due to search engines considering it a key ranking factor. The good news is HTTPS is more accessible to the masses. Free certificates are available from Let's Encrypt and Amazon AWS.

HTTPS Should be IMplemented Everywhere

Price and exclusivity are no longer issues as many certificate providers are available and the free market has done its job lowering the price and ease of obtaining a certificate. You still need to prove you own the site and requested the certificate. And in some cases certificate creation requires some technical acumen.

Enabling HTTPS can also enable HTTP/2, the newer, more streamline version of HTTP that offers significant performance enhancements.

The reason HTTPS is a PWA requirement is two-fold. First it offers a modicum of site ownership. You have to identify yourself as the site owner in some fashion. This is typically done through domain registration records. Second, as you will see shortly, service workers require HTTPS, an additional requirement.

Web Manifest

A Web Manifest file is a simple JSON file containing information about your web site, like name color scheme. But it also includes properties that help the browser platform know how to launch your PWA. You can designate the start page/url, orientation and if you want the browser chrome or no chrome.

A web manifest file is easy to create. You can copy this file as a template, replacing the appropriate values with your site's information.

Service Worker

Finally, you will also need to implement a service worker. Note there are no requirements for what your service worker does. So, as I interpret the requirement, you can simply register the service work and literally do nothing. However, you would be missing a big opportunity for caching and other perks. But if you want to get to PWA status quickly, include an empty service worker script so you can qualify.

PWA Logo

Summary

Progressive Web Applications offer a strategy for everyone to have a rich user experience with a single code base that spans across all platforms. Today the overall experience benefits are somewhat limited, but will be expanding soon. This is still a young movement, but already showing signs of tremendous success.

To qualify your existing web site as a PWA make sure you implement HTTPS, create and reference a web manifest file and register a service worker. Don't forget to submit your site to the Microsoft Store to reach the billions of Windows users. Later this year we should start seeing qualified sites automatically added to the Microsoft Store as the new Windows update rolls out.

We will be covering more Progressive Web Application topics this year, including some deep dives on HTTPS, Web Manifest and Service Workers. In fact we are hosting a Free online webinar Thursday January 5th. You can also sign up for our Progressive Web Application E-Mail newsletter to receive periodic information on PWAs and how your business can benefit.

progressive web app (PWA) beginner to expert online course

If you haven't had a chance to start working service workers and progressive web applications I have the solution for you. My course progressive web apps from beginner to expert will guide you from the early stages of progressive web application development into the deep recesses of service worker caching and validation and push notifications. There are over 20 hours of instructional video and you can enroll today for just $29.

Share This Article With Your Friends!

{ "@context": "http://schema.org", "@type": "NewsArticle", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://love2dev.com/blog/your-three-step-guide-to-your-customers-home-screens" }, "headline": "Your Three Step Guide To Your Customers' Home Screens", "alternativeHeadline": "Your Three Step Guide To Your Customers' Home Screens - ", "image": { "@type": "ImageObject", "url": "https://love2dev.com/img/android-home-screen-icons-542x305.jpg", "width": 978, "height": 550 }, "datePublished": "2016-12-28T13:25:54.197Z", "dateModified": "2017-12-23T18:18:21.930Z", "description": "Engagement, one of the pinnacles of branding success. Mobile apps have dominated user engagement. However, adding a web site icon or link to the desktop has bee", "author": { "@type": "Person", "name": "Chris Love" }, "publisher": { "@type": "Organization", "name": "Love2Dev", "logo": { "@type": "ImageObject", "url": "https://love2dev.com/img/love2dev-light-logo-75x409.gif", "width": 409, "height": 75 } } } try { var scripts = ["js/b7fa3de28fba29fa709c75cf81f4324f.min.js", "js/ac5f096ea7e04bc4a2be471a007ea464.min.js", "js/0702940472f4481e69181adbfd896506.min.js", "js/2cc14c9825bc73810d045c2d972eb108.min.js"], src, pendingScripts = [], firstScript = document.scripts[0]; if (typeof Object.assign != 'function') { scripts.unshift("js/libs/polyfil/object.assign.js"); } if (typeof Promise === "undefined" || Promise.toString().indexOf("[native code]") === -1) { scripts.unshift("js/libs/polyfil/es6-promise.min.js"); } if (typeof fetch === "undefined" || fetch.toString().indexOf("[native code]") === -1) { scripts.unshift("js/libs/polyfil/fetch.js"); } if (typeof IntersectionObserver === "undefined" || IntersectionObserver.toString().indexOf("[native code]") === -1) { scripts.unshift("js/libs/polyfil/intersection-observer.js"); } // Watch scripts load in IE function stateChange() { // Execute as many scripts in order as we can var pendingScript; while (pendingScripts[0] && pendingScripts[0].readyState == 'loaded') { pendingScript = pendingScripts.shift(); // avoid future loading events from this script (eg, if src changes) pendingScript.onreadystatechange = null; // can't just appendChild, old IE bug if element isn't closed firstScript.parentNode.insertBefore(pendingScript, firstScript); } console.log("scripts should be loaded now"); } // loop through our script urls while (src = scripts.shift()) { if ('async' in firstScript) { // modern browsers script = document.createElement('script'); script.src = src; document.body.appendChild(script); } else if (firstScript.readyState) { // IE<10 create="" a="" script="" and="" add="" it="" to="" our="" todo="" pile="" pendingscripts.push(script);="" listen="" for="" state="" changes="" script.onreadystatechange="stateChange;" must="" set="" src="" after="" adding="" onreadystatechange="" listener="" else="" we’ll="" miss="" the="" loaded="" event="" cached="" scripts="" script.src="src;" }="" {="" fall="" back="" defer document.write(''); } } } catch (error) { alert(error); }