The Chrome improved add to homescreen experience

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.

If you changed the scope to say /hr/, then only URLs under the /hr/ folder would be part of the PWA's scope. This means that those URLs will be opened according to the web manifest file configuration. URLs not within the /hr/ folder will open normally in the browser.

When a PWA is installed using Chrome on Android, it automatically creates an unsigned WebAPK, which makes the PWA a native app. Within the WebAPK, an Android manifest is created, which includes intent filters.

Intent filters tell Android how URLs within the origin should be opened. For PWAs, this means that the app is launched according to the manifest configuration or directly in the browser if outside of its scope.

Here is what these intent filters look like in the WebAPK:

<intent-filter> 
  <action android:name="android.intent.action.VIEW" /> 
  <category android:name="android.intent.category.DEFAULT" /> 
  <category android:name="android.intent.category.BROWSABLE" /> 
  <data 
    android:scheme="https" 
    android:host="2048.love2dev.com" 
    android:pathPrefix="/" /> 
</intent-filter> 

The pathPrefix value changes to match the web manifest scope value:

<intent-filter> 
  <action android:name="android.intent.action.VIEW" /> 
  <category android:name="android.intent.category.DEFAULT" /> 
  <category android:name="android.intent.category.BROWSABLE" /> 
  <data 
    android:scheme="https" 
    android:host="love2dev.com" 
    android:pathPrefix="/hr/" /> 
</intent-filter> 

These changes have not stopped with Android as recent updates have also been applied to Chrome OS and are in the near future for desktop Chrome. Google is in the process of replacing the Chrome OS apps with progressive web apps, giving similar capabilities to the previous web apps that are available on the platform.

Chrome is also bringing more of the add to homescreen experience to desktops as well. However, this will vary by operating system as there are different user expectations on each platform.

The good news is that if you make good progressive web applications, you will just benefit from these changes.