Championed by Google since 2015, Progressive Web Apps (PWA) are set to explode as an option for brands to increase traffic and conversions on mobile.
According to a recent study, a 100-millisecond delay can cost a site 7% of its conversion rate, and Google frequently reiterates that when it comes to capturing consumer attention, every second counts.
Looking after your customers with great user experience is also rewarded with a ranking boost, with Google announcing in that from July this year page speed will officially be a mobile ranking signal.
Discussion of adopting PWAs are still in their infancy among some sectors and brands, perhaps because the technology is still relatively young and PWA capability issues persist.
For instance, only now is progress being made with Apple now adapting its web browser engine to handle key features of PWA. As these barriers begin to dissipate, the reluctance from web developers will also diminish – paving the way for PWAs to become a key platform for retailers to build fast, mobile-optimized websites in 2018.
What are Progressive Web Apps?
In the context of the mobile ecosystem, a Progressive Web App is described as a website that offers the near identical experience of a native app but within a standard browser.
This technology can apply to a range of devices from mobile right up to the desktop version. No app store is required to access a PWA site.
The significant advantage of PWAs over native mobile apps is that they do not require any different technologies or in-depth understanding of adapting your code to run on either iOS (Apple) or Android phones. Developers can get by with HTML5, CSS and JavaScript build for PWA.
They offer the pop-up notifications directly to the user, implement home screen icons for easy access and sites can operate in full-screen mode. All this is bundled in with speedier page delivery.
What’s so cool about PWA?
As we’ve established, mobile speed is very important for Google, so much so that the search engine has offered any fast site a rank boost both for desktop and now mobile SERPs.
Its site ethos is to deliver fast, integrated, reliable and engaging experiences for mobile devices. Progressive web apps can cater for all these factors in many ways, while the framework and caching makes PWA code light and efficiently stored. Push notification and ‘Add to Home Screen’ functionality also keep users coming back.
Here are the key areas where Progressive Web Apps can give your e-commerce site a significant advantage.
Speed
The rate at which a site responds is key and PWAs make speedy responses possible, largely thanks to the Service Worker. The caching ability allows the browser to store repetitive elements of the layout that are in the template and inject it into the browser when required, speeding up download times significantly and saving the all-important seconds that will make any e-commerce site more user-friendly.
Keep file pages less than 1mb and make sure that first interaction with the page happens in less than five seconds. Enable HTTP/2 to allow multiple retrieval of assets and compression to quicken the site further.
Responsiveness
User experience is at the heart of Progressive Web Apps so they are to be built with a responsive layout. With responsive sites, the layout can accommodate screens regardless of size.
So no matter what device you are looking at, the experience will be tailored correctly. The PWA app manifest file allows developers to control full screen view, enhancing the experience further.
Offline functionality
The Service Worker and cache api are key for Progressive Web Apps. The Service Worker is essentially a program that work predominantly behind the scenes retrieving and storing site components in the browser cache.
For example, when you are travelling on underground transport where offline functionality is most needed, the wifi connection could be working intermittently or the networks could be poor.
PWA can bridge the gap between offline and online by at least offering a basic navigation in the interim.
The only issue with Service Workers is that not all current browsers support them. Safari and Explorer are developing beta versions that work with this technology. Browsers are slowly catching up but tracking technology compatibility can be monitored by using the caniuse site.
User retention
We all know that native apps serve users’ notifications directly to screen. The great thing is that Progressive Web Apps also offer the same inbuilt functionality of push notifications that alert users of current site developments.
This is invaluable for e-commerce sites to alert users of updates, particularly when new products come into stock, or to alert them to sales and discounts. The ‘Add to Home Screen’ function allows users to place a shortcut icon on their home screens for easier access. Again, the app manifest file is used declare these capabilities.
Search engine ready
Unlike native apps, there’s no need to indicate your deep linking URL by editing the source code of a PWA – instead, individual PWA URLs can be indexed by search engines. This takes away a lot of the headache that normally surrounds optimizing your apps for search.
Who’s using PWA right now?
Early PWA adoption has to a few high profile publishers, namely Forbes, Washington Post and Financial Times.
AliExpress is an ecommerce site that allows users to order from mainly Chinese companies very similar to eBay. A typical market version of the PWA site is found here.
The Aliexpress PWA site managed to capture some impressive metrics upon release, including a 104% increase in new users and 82% usage increase among iOS users. This statistic reveals that despite Service Workers not yet being supported by Safari right now, there are twice as many pages being visited per user on multiple browsers. Time spent on the site in a session increased by 74%.
Ele.me is a food ordering company in China that reduced loading times on average by 6.35% across all their pages. Users managed to experience the site with time to consistently interactive dropping to 4.93 seconds on a 3G network on the first load.
Finally, George.com (ASDA) recently launched its PWA site. According to Google, this site accelerated average speeds by 3.8x and saw a fantastic 31% increase in conversion in return.
What about AMP?
There are various pros and cons of both technologies. Accelerated Mobile Pages (AMP) are quicker on the first load. This can be demonstrated by load times to interactivity where PWA can load in less than ten seconds, while AMP provides an initial load speed of fewer than two seconds.
AMP requires validated web components to function, but PWA only needs HTML5, JS and CSS to get running.
AMP’s advantage over PWA is that they don’t require Service Worker in the initial load while benefiting from cached pages from the get-go. It is possible to combine PWA with AMP to improve the user experience further.
One such component is ‘<amp-install-service-worker>’. Landing page content can be served as an AMP page while the Service Worker is triggered by the use of an iframe, accessing and caching PWA related assets behind the scenes.
This means that AMP pages can switch quickly to PWA pages in a seamless manner without having to wait too long for subsequent PWA to load. Imagine a scenario where a user can enter the site quickly via an AMP page, downloading content at super-quick speed and then switching to PWA pages with all their benefits!
In summary, it’s possible to offer a high-speed mobile experience using both AMP and PWA. The AMP landing page is effectively a quick entry point page and used to initiate service worker caching for following pages that are in PWA format.
To ensure that the user experience remains consistent, the look and feel of both AMP and PWA pages should be identical to create a seamless, uninterrupted transfer between technologies.
Are there any issues for ecommerce?
PWA are predominantly Single Page apps which, in turn, could be problematic for Google and search engines crawling your pages. There’s a good reason that single page apps are used in PWA, since they are lightweight and allow service workers to inject content in a handy template based format.
There could be a need to pre-render pages server side in order to get crawled. The overall recommendation when developing PWAs is to do so iteratively, slowly building newer features and testing at different build stages. This will maintain a site development strategy of progressively enhancing for inclusive user experience.
There is an assortment of Google tools that can highlight issues upon build. Make use Google’s Fetch and Render tool, and the Lighthouse audit that is now part of Chrome’s Developer Inspect tool can analyse a PWA give a score out of 100.
It can provide readings on time to first meaning paint, for instance, and show potential blockers in the loading of DOM structure. The tool is powerful in reducing overheads and code bloat.
Fetch and Render will indicate any issues where Google would struggle to see elements on the page. Google makes it easier to develop PWA sites with this build checklist.
Do not block JavaScript and CSS from any engine crawl activity since they need to understand how the page looks in a browser. Provide clean URLs, without using the hash symbol, and adequately canonical tag PWA pages back to the relevant desktop page where there could be duplication.
Should e-retailers be worried about security and privacy? Service worker programs only work under secure conditions so your site must be working with https encryption.
A specific API called Payment Request API is supposed to make it easier for a mobile site to collect secure credit card and payment information. The API facilitates autofill and one tap checkouts. It has recently been developed by Google and is subject to changes.
What the future holds for PWAs
Google is actively pushing PWA and AMP in 2018. The search engine is speaking with many partners at the moment, and one such development is PWA integration into e-commerce platforms, such as Magento.
It’s realistic to say that the technology currently meets the criteria for the ever expectant and demanding mobile user crowd. Mobile users want to see content quickly or at times offline and PWA offer opportunities to engage and re-engage users.
In a recent study, US users spent 5 hours a day on mobile devices but only 5% of that time accounted for mobile shopping apps. It is said that mobile apps have been falling out of favour for some time, with users favouring mobile web or becoming disheartened by the mobile app experience from retailers.
With the greater impact of PWA, one can imagine how convenient it is for a user not having to switch between app and browser when conducting product research. It will certainly be interesting to see what the future of the Progressive Web App looks like!