Reengagement is a key advantage that native applications have enjoyed over websites. The presence of their icon on the user's homescreen and app shelves provides quick, visual access to the brand's experience. It's subtle, but that icon is a constant visual reminder of the customer's relationship to the brand.

Browsers have provided a built-in mechanism for us to bookmark websites using favorites for years now, but these lists have become cluttered messes we often forget about. We have also been able to add bookmarks to the desktop, start menu, and even the windows task bar, but the process is manual, and most consumers do not know that it exists.

More modern browsers have started logging pages that you frequently visit and providing bookmarks to these common destinations when you open a new tab. This is an example of making...

When Apple introduced iOS, the original app recommendation was to use HTML5, CSS3, and JavaScript to create rich client-side user experiences. Apple has not removed web app support and has enhanced some capabilities over time. The iOS web app experience is driven by custom metadata that's added to a web page's HEAD.

Much of the Apple meta data has served as a model for the modern web manifest specification. Before the web manifest specification was created, Chrome on Android integrated support for the Apple meta data to drive a similar experience.

The web app experience on iOS is triggered when your website contains Apple-specific META tags, corresponding icons, and when the user has added your site to their homescreen.

The first piece you need is a png file as the default homescreen icon. The file should be named apple-touch-icon...

The Web Manifest describes the progressive web applications with meta data and JSON formatting. Browsers parse the manifest file to create the add to homescreen icon and launch the experiences.

Now, instead of polluting each page's HEAD with extra meta data, the browser can load an external file containing standard properties and values formatted using JSON.

The web manifest specification (https://w3c.github.io/manifest/) provides some guidelines for browsers to establish an add to homescreen experience. How browsers implement the experience is left open ended, making an avenue for creativeness. I will cover this topic in more detail after reviewing the manifest file.

The web manifest is a simple JSON document, but it's easy to make typos or forget things. If your site is not properly registering the manifest file, you will need to troubleshoot the issue. Fortunately, there are a few resources to help you validate your file.

Google hosts a simple online validator (https://manifest-validator.appspot.com) where you can enter either a URL or just paste the manifest code into the page. It will parse your manifest and let you know if there is an issue:

The nodejs Web Manifest Validator (https://github.com/san650/web-app-manifest-validator) is a module you can include in your automated testing workflow to validate a manifest file. It is a couple of years old, so you may need to fork the project and update it if you are using newer manifest features. Remember that the manifest specification is not final and can...

Some time in 2017, the Chrome team announced changes to the PWA installation experience called the improved add to homescreen experience. At the time, it was not as much about the automatic prompt, but that has been part of the change. It has more to do with how PWAs behave on Android and that it is more like a native application.

These changes were multifaceted and start with the web manifest scope property. This property is relatively new but allows the browser to know how to limit PWA functionality on an origin (domain name).

When you set the scope value to /, you are telling the platform that the progressive web application's capabilities apply to all paths within the origin. This may not always be the case, especially on larger sites and enterprise applications. Often, these sites are segmented into different applications...

The emergence of an automatic prompt to a visitor to add your progressive web app to their homescreen is exciting. In the past, Chrome would eventually display a prompt to install a progressive web app, but that has changed recently. The rules determining when the prompt triggers are still valid, but now only trigger the beforeinstallprompt event.

How the user prompt triggers is where each browser can choose a different path. Some of the requirements are defined in the web manifest specification, but the experience is left open ended for browsers to implement as they see fit.

Right now, Chrome has the most mature process. They established the following criteria to automatically trigger the add to homescreen experience:

• Has a web app manifest file with:
  • A short_name (used on the homescreen)
  • A name (used in the banner)
  • A 144 x 144 .png icon (the...

At Google I/O 2018, it was announced that Chrome on Android will no longer include an automated add to homescreen prompt. Instead, it is your responsibility to create the user experience. Ultimately, the Chrome team decided to fall more in line with how other browser vendors are crafting their experiences.

The manifest specification takes time to define skeleton rules and minimal requirements for the add to homescreen experience. Rather than limiting all browsers to the same rules, the specification defines instalability signals that can be used as part of the add to homescreen prompt algorithm.

The prompt sequence should honor a modicum of privacy considerations and wait for the document to be fully loaded before issuing a prompt. The process should also allow the user to inspect the application name, icon, start URL, origin, and other...

Once the homescreen install prompt displays, the user can choose to add the PWA to their homescreen, or ignore the prompt. Businesses should track and measure everything possible to make better decisions. Knowing how many homescreen installs there have been and what rate customers install their PWA provides insight into their marketing and technology investments.

Chrome supports the beforeinstallprompt event, which can be used to track this activity. You can add a handler to this event and log each user's choice:

window.addEventListener('beforeinstallprompt', function(event) { 
  event.userChoice.then(function(result) {                                  
 
if(result.outcome == 'dismissed') {                                         
  // They dismissed, send to analytics 
}else { 
  // User accepted! Send to analytics 
} 
})...

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...

When Windows 8 shipped, Microsoft quietly shipped support for what they called a Hosted Web App (HWA). These are websites that reference a valid web manifest file and are served via HTTPS.

HWAs were an early precursor to progressive web apps. The obvious difference is no service worker requirement, which you would expect since the concept of a service worker had not be created yet.

To be a HWA, you would create a .appx file for your application containing the manifest file and a reference to the public URL. Then, you would submit the HWA appx to the Windows Store and consumers could install the HWA from the store.

The advantage of being a HWA is that these web apps have full access to all the Windows platform APIs, just like any native application. The reason that they have this privilege is that once installed, they form the store and are...

Even if you don't polyfil the add to homescreen behavior, your web application will see user engagement gains on iOS and other non-PWA platforms. Many companies are publicly sharing their improvements in various progressive web application case studies.

Wego, an online air travel booking service, reported a 50% increase in conversions and 35% longer sessions on iOS. Mynet increased page views by 15%, and a 23% lower bounce rate on iOS. Lancôme increased iOS sessions by 53%. These are just a small sampling of positive progressive web application case studies.

These companies are reaping the rewards of PWAs on iOS because, by nature, properly architected websites perform better. Plus, creating a progressive web application forces you to put the customer first, not the developer. When you do this, you create a better user experience, which...

The developer experience would not be complete without the ability to test the add to homescreen experience. Chrome has added tooling which allows you to see how your web manifest file is interpreted and manually trigger the prompt.

Launch Chrome's developer tools by using F12 and select the Application tab. There are many choices to help you debug various aspects of a progressive web application. Under Application, there is a Manifest choice. This will display the properties of your web manifest file, including each icon. This is a quick way for you to determine if your manifest is interpreted correctly, as you can see in the following screenshot:

There is also a link to manually trigger the Add to Home Screen experience. Check out the following screenshot:

Clicking the link in the developer tools will trigger the Add...

The line between native and progressive web applications is very blurred, thanks in part to the web manifest and add to home screen experience. No longer is the homescreen reserved to native applications; the web is welcomed by all platforms.

Today, most browsers provide a first-class app experience for progressive web applications, and while Apple has yet to adopt the progressive web application standards, they were the first to make the web into an app experience. It is up to developers and businesses to adopt and implement the rich add to homescreen capabilities.

Triggering the add to homescreen experience is the first step in levelling up your web presence.

Even if the user has not added your PWA to their homescreen, you can still take advantage of progressive web app features. However, before we dive into service workers, let's take a look at adding SSL to your...