work-banner.jpg

Make Way for PWAs!

November 17, 2020 by Brent W Peterson

Make Way for PWAs!

This entry was posted on November 17, 2020 by Brent W Peterson

Developing excellent mobile shopping experiences for your customers isn’t simply recommended by eCommerce experts anymore. In 2020, people expect their favorite stores to be accessible and easy to navigate no matter what type of device they’re using. Brands that don’t update their stores to meet the digital needs of consumers will likely be left behind as technologies continue to mature.

However, building a site to cater to mobile shoppers isn’t as difficult as many retailers believe it to be. Instead of rebuilding a site to feature a responsive theme or creating a native app from scratch, sellers can now get the best of both worlds by choosing PWAs (Progressive Web Apps).

PWAs vs. Native Apps

A PWA is an app that runs in a browser, but functions much like a native app would. Users don’t need to download anything to browse through the store or purchase products, but for those who want to access the store regularly, they have the option to install it on their mobile home screen. PWAs also allow users to access the app even when they’re offline, and customers can enable push notifications to receive relevant messages. Author and web developer Maximiliano Firtman explains, “PWAs are effectively mobile websites designed to look like an app, and the use of web APIs gives them functionality similar to a native app.”

Benefits of PWAs

Not only are PWAs easier to build and develop, but they’re more convenient for customers and retailers. Updating them doesn’t require a deep knowledge of coding like native apps do, and users can easily download the app directly from the browser instead of being redirected to the Apple or Google Play store. Having a PWA can also boost your site’s SEO, as the Google algorithm prefers sites that are optimized for mobile.

Several companies that have decided to build PWAs have experienced some seriously impressive results. According to web developers Pete LePage and Sam Richard, when Twitter switched to a PWA, it had a 65% increase in pages per session, 75% more Tweets, and a 20% decrease in bounce rate. Furthermore, doing this reduced the total size of the Twitter app by more than 97%! Another example of a successful PWA is exemplified by the streaming service Hulu. By simply replacing their desktop site with a PWA, Hulu reported 27% more return visits from satisfied users.

PWA Checklist

A successful PWA needs to be reliable, capable, and installable in order to be fully accessible to everyone, regardless of what type of device they’re using. According to the core PWA checklist, the following features are highly recommended:

  • Fast performance. Fast loading speed is crucial for getting customers to consistently use your app. The chances of someone clicking off your site to check out another store increases exponentially for each second they have to wait for a page to load completely.
  • Flexible. Users should be able to access the PWA in any browser, and they should be able to use it without installing it on their phone. orks in any browser. Users can use any browser they choose to access your web app before it's installed.
  • Installable. Frequent customers should have the option to install the app to their device, especially as this increases the chances that they’ll engage with the app more often!
  • Responsive. Your app should automatically adjust to any screen size while still giving users full access to the full range of features.
  • Offline capabilities. Even when a user is offline, creating a custom page to keep them engaged with the PWA provides a more seamless experience.
  • Provide an offline experience for customers.
  • Allow users to discover it through search.
  • Be a fully accessible site, in line with the WCAG 2.0 accessibility requirements.
  • Be usable with any type of input (mouse, keyboard, touch, etc.).
  • Follow the best practices for maintaining healthy code.

For an excellent PWA experience, build upon the core checklist by adding the features recommended in the optimal PWA checklist. These rich features and capabilities will take your PWA to the next level by utilizing the power of the Web to its greatest extent. An optimized PWA should:

Where to Learn More

If you’d like to learn more, download the free Progressive Web App Primer for Modernizing Merchants and check out our PWA webinars, which feature notable speakers like Adobe’s Peter Sheldon and Google’s Chris Sater. If you decide that developing a PWA is the right move for you, click here to view the official Magento training on PWAs, a document that Wagento’s very own Brent Peterson and Vijay Golani helped create!

Lastly, keep an eye out for Vijay’s regular courses about PWAs if you’d like some expert advice in real time, or simply connect with a Wagento developer to talk about your unique project and goals.