Menu
Menu Sheet Overlay
Search
Search Sheet

August 2018

Progressive Web App performance enhancements, Add to Homescreen updates and more

New features

Progressive Web Apps

For this release, a key area of focus was improving how quickly a shopper can start interacting with an experience on first load, based on the Time to Interactive metric. Data we have collected shows improving the experience around first load will result in higher conversion rates and therefore higher revenue.

As a target, we have focused on showing how to achieve a baseline score of TTI below 10 seconds, as defined by the Google PWA checklist, using the latest version of Lighthouse to measure.

Performance Manager (Early Access)

A Performance Manager module has been added to the SDK that can be enabled within projects. The Performance Manager unlocks three key optimizations:

Currently, the Performance Manager is not enabled by default on projects, but this will be changed in future releases. Project teams who are interested in using Performance Manager can request access to the docs that detail how to enable and leverage this module in projects.

Enhancements

Progressive Web Apps

Time to Interactive improvements

The starting project scaffold has been updated with a few key performance enhancements that bring down Time to Interactive by a significant amount. In our testing, Time to Interactive decreases by 2-3 seconds potentially with these changes.

These changes are recommended to be applied to existing projects for they following areas:

Add to Home Screen adjustments

With the release of Chrome 68, it was announced that there would be a change to the behavior of add to home screen. Chrome will no longer show the add to home screen banner and will instead show a new mini-infobar. Chrome 68 also now gives developers the ability to manually trigger the add to home screen dialog off of a user gesture. Note that these changes only affect the add to home experience on Chrome.

New Add to Home screen Flow
New Add to Homescreen Flow

We've added a new addToHomescreen higher order component to take advantage of this new ability. With the addToHomescreen higher order component, developers will easily be able to wrap add to home screen functionality within any component or UI of their choosing. A reference implementation utilizing the addToHomeScreen component can be found in our project starting point, where we wrap the addToHomescreen component within the navigation component.

Known issues

Progressive Web Apps

Native Apps

Fixes

Native Apps