Championed by Google, Progressive Web Apps (PWA) are set to play a very prominent role in the world of the internet and ecommerce over the next few years.

What are Progressive Web Apps?

PWAs offer a near identical experience to a native app but are delivered by a standard web browser. Designed to make the best of both worlds, PWAs aim to give the advantages of an app – such as working offline & push notifications – but via the mobile web. They don’t need to be installed like a native app, and once loaded in a browser, will work on any phone or tablet.

What’s the point?

Why not just develop a native app? It’s not cheap to develop an app, with a large amount of time and money spent on research and testing, and the constant need to deliver updates to everyone that’s already downloaded. Commitment, such as downloading an app on your phone can also be an obstacle to customers, spending time installing it, taking up valuable disk space, possibly even affecting the performance of a mobile device.

And as PWAs are not developed for any specific operating system, no in-depth understanding of adapting code to run on multiple operating systems is required. HTML, CSS, and JavaScript for example, will suffice in most instances.

What do PWAs require?

PWAs require several main features in order to fit their purpose: HTTPS, offline mode, web push notifications, and the addition of home screen icons. Not all browsers currently support the technology required to deliver PWAs.

Chrome and Opera currently do support those features. Firefox partially supports them, and Microsoft Edge is making progress. Progress is now also being made with Apple, adapting its web browser engine to handle key features.

Compatibility is then still an issue, but Progressive Web Apps are getting closer to being able to provide the full app-like experience via most common browsers on the market.

Google has laid out a Baseline Progressive Web App Checklist covering the aspects it regards as important in fulfilling the PWA criteria:

pwa google checklist with title

Baseline Progressive Web App Checklist, full list available on developers.google.com

  • Site is served over HTTPS
  • Pages are responsive on tablets & mobile devices
  • All app URLs load while offline
  • Metadata provided for Add to Home screen
  • First load fast even on 3G
  • Site works cross-browser
  • Page transitions don’t feel like they block on the network
  • Each page has a URL

 

Advantages of Progressive Web Apps

They’re fast
The caching ability of PWAs allows a browser to store elements of a site’s layout, speeding up download times significantly. This is particular important for ecommerce sites given that mobile speed is becoming very important for Google and mobile SERPs.
fast pwa large
Installation
PWAs don’t need to be installed because they are actually websites, and just like a website can be continually updated, avoiding the need for users to download lengthy installations.
download pwa large
Responsive
PWAs are responsive and provide the best user experience possible, regardless of device or screen, making for a tailored experience for everyone.
responsive pwa large
Offline ready
Progressive Web Apps work behind the scenes retrieving and storing site information. A service worker — a script that your browser runs in the background — caches the information, meaning that if the internet connection is poor, you can carry on regardless.
no wifi pwa large
Notifications
PWAs support push notifications (just like native apps), providing a valuable way of keeping customers updated with the latest offers and news.
notifications pwa large

Examples of PWAs in action:

Financial Times
The Financial Times, one of the world’s leading news organisations, has produced a PWA version of the publication to allow readers to consume articles offline and on the go.

ft pwa

Visit: https://app.ft.com

Hobbycraft
Hobbycraft, the largest arts and crafts retailer in the UK, has launched a new PWA built on the Mobify platform. The app provides a frictionless shopping journey for craft lovers looking to quickly find the supplies they need and checkout easily online.


 
Alibaba
Alibaba.com is the world’s largest online business-to-business (B2B) trading platform, serving 200+ countries and regions. Since developing and launching its PWA, conversions on the mobile web have increased by 76%, attributed to its user-centric features giving it the edge over competition.
 

alibaba pwa

Visit: developers.google.com

Magento Example: Carved
Carved, making handmade wooden phone cases for iPhones, has launched a Magento-based PWA. Fast and a brilliant example of how the open source background & technology of Magento creates the perfect PWA opportunity.

carved pwa magento

Visit: Carved.com

Further reading:
https://medium.com/progressive-web-apps/2018-state-of-progressive-web-apps-f7517d43ba70
searchenginewatch.com/2018/03/06/how-progressive-web-apps-could-rule-mobile-ecommerce-in-2018/
https://developers.google.com/web/progressive-web-apps/checklist