Complete Guide To
PWA: Definition, Technology, Examples

Why Should You Even Care?

Like most things in life, the web industry is subject to constant change, in a state of permanent search for better solutions. Mobile device usage in the last decade has increased tremendously, and the trend is only about to continue into the future.

Businesses are pushed to adapt to the highly competitive environment and rapidly growing expectations from tech-savvy users. Companies respond with a constant chase of innovation, spending fortunes on improving users’ web experience and maintaining different platforms, often facing fierce limitations.

And just as we thought the industry was already pushed to the limit, Progressive Web Apps (PWA), a new and incredibly promising technology, emerged to irreversibly change the way people interact with websites. Even though the technology has been around for a while now, we see that the popularity of PWAs has skyrocketed in the past couple years.

PWAs combine the best of the website with the best of what native apps have to offer, creating a phenomenal mobile user experience. They are special web applications that are accessed like normal websites but offer benefits like offline usability, push notifications, and access to device hardware – things that were previously only available to native apps.

Now, as PWA is the hottest topic at tech conferences, it is crucial that every business understands the technology. It is your chance to win over mobile users by distinguishing yourself from the competition and offering a superior digital journey that translates into higher engagement, customer satisfaction and conversion rates.

Below you will find a detailed overview of Progressive Web Apps, explaining the technology, its features, business benefits, as well as providing best practices and useful advice to help you get up to speed. Find answers to your questions, and learn why Progressive Web Apps are a truly revolutionary solution with such deep impact on today’s mobile web experiences.

PWA meaning

So, what is PWA? Simply put, a PWA is a website with all the benefits of an app. PWAs give you a faster, more reliable, and more engaging version of your website or eCommerce store.

PWAs can do most things that native apps can do, such as operate offline, access your camera and microphone if necessary, GPS, and more.

Imagine a user browsing your online store with instant page loading speeds whilst flying at 35,000ft or using the subway—and knowing once they get back online their order will be processed automatically!

What can PWA do for you?

PWA technology packs an array of new powerful features, allowing for significant web experience improvements. Take a look at some PWA examples and how PWA can benefit you, both as a store owner, as well as a user.

For website or eCommerce store owners, the advantages of web apps include:

• Increased conversion rates
• Increased user time on your site
• Improved user experience
• Increased organic search traffic
• PWAs are usually more affordable to create and maintain than native apps
• Your most loyal customers can save your app on their home screen
• All of the above results in overall higher levels of performance and customer engagement, which leads to increased revenue

For users, the advantages of web apps include:

• PWAs are faster, loading in an instant
• You can browse the website while being offline
• Better, smoother experience
• PWAs use less data
• One-click access (save as an icon on your phone home screen)

You may be wondering—Are progressive web apps the future? All in all, PWA is a fresh, future-proof technology. They are favored and promoted by Google, and proven to show break-through results by some of the biggest names in the industry:

The rise of PWA has marked a paradigm shift in the way we interact with the web, bringing along a collection of features ranging from subtle to radical – each contributing to the improved overall experience.

A full list of features is far too long, so here are the ones we at Scandiweb are most excited about:

Now that we have a solid understanding of the main features that can be uncovered with PWA, let us take a step back and explore the impact the technology is aiming to make on the web industry.

ON PERFORMANCE

First impressions matter! And the first experience your visitors get with your site is neither design nor content. It’s the page-load time.

The most polished user journey means nothing if you can’t get your visitors to the starting line. On mobile, around 53% of visitors abandon a pagethat takes longer than 3 seconds to load.

PWAs scale down the volume of data requests to a fraction of its current level. PWA adopters commonly cite up to a 300% performance improvement. For sites that are already optimized for speed, this can lead to near-instant loading speeds, akin to those of native apps.

Even without integrating Accelerated Mobile Pages, PWAs help with first-page load by prioritizing the first meaningful paint and serving a light shell document with inlined resources.

ON ACCESSIBILITY

PWA’s fast load times support accessibility for companies that operate in emerging markets or need to provide users consistent site access at all
times.

For instance, Uber’s rapid expansion into new markets demanded a fast, device-agnostic ride-hailing application that worked well regardless of location. Hence, they opted for a PWA.

Requests came in at only 50kb, allowing the PWA to load in under 3 seconds on 2G networks!

ON USER EXPERIENCE

Historically, native apps have outperformed mobile websites in terms of user engagement. Progressive Web Apps can close that gap with features previously reserved for native apps, like no reload when switching between pages.

PWAs even beat native apps in a few instances. Examples include elimination of app-install friction and decreasing web-to-app installs drop-offs.

–>

And while we’re on the topic of UX, here is a study that looks into the way PWA can accommodate instant and smooth video handling.

We have mentioned that PWAs operate differently from both websites and native apps. Now is a good time to take a closer look at some of the underlying tech. This will help us gain a better understanding of the scope and true potential of PWA.

SINGLE-PAGE WEBSITE

A Single Page Application (SPA) interacts with the user by dynamically rewriting the page rather than loading an entire new page from the server. In other words, the browser is not sending a request to load the page fully when the user clicks a link. Instead, SPAs use JavaScript to manipulate the current page and make it look like the user has actually switched the page.

This feature is essential for Progressive Web Apps, as most are SPAs, because it ensures an instant content load and brings the “app-like” feeling.

SERVICE-WORKERS

Instant page load, app-like experience, mobile conversions increase, offline browsing, and push notifications are just a few examples of PWA power.

But how exactly PWAs are able to provide such experience? A huge part of the credit should go to Service Workers. Although Service Workers are an integral part of Progressive Web Apps, there is often a lot of confusion surrounding it.

We all know how a website works—the codebase is stored on a server, and any person can access it via their browser by typing in the domain name or direct IP address.

When it comes to PWAs, there’s an additional element: the service worker. In essence, a service worker is a client-side JavaScript file that is added to your codebase. It resides between the server and browser, padding a new layer of background functionality to mimic app-like features (e.g., push notifications for food-delivery status from a restaurant website).

COMPATIBILITY WITH BROWSERS

Modern browser support of features like push notifications and home-screen save is integral to PWA. PWAs also require browsers to support service-workers, which almost all the modern browsers do. (Safari, frequently lagging behind, is often referred to as “the Internet Explorer of PWAs.”)

The lack of support for specific features doesn’t impede PWA use. Since PWAs are websites, they’ll still work in all browsers (although, sometimes – without the full set of features).

Some browsers, such as Chrome, are actually praising Progressive Web Apps! If your website meets the Progressive Web App installability criteria, Chrome will show an install button in the omnibox indicating that your Progressive Web App can be installed. If the user clicks the button, an install dialog box will appear, making it super easy for the user to install your PWA.

Search Engine Optimization has always been a widely misinterpreted topic. The trend gains additional momentum when it comes to Progressive Web Apps. PWAs are different from “traditional” HTML-based websites, and it has caused a lot of myths and misconceptions over time.

How good is PWA for SEO?

The most popular myth states that “Google prioritizes PWA pages in their search results.”

Unfortunately, this is false.
Google doesn’t rank your page higher simply because you have a PWA, but Google does care about the enhanced user experience brought by PWA. The bottom line is, simply having a PWA won‘t help your SEO, but having a well executed PWA most likely will.

Another myth states that PWAs can’t be indexed by the search engines at all.

This is not true, obviously.
Progressive Web Apps can be indexed just like any other web page, although the techniques used to ensure that the search engines see and understand your website’s content will be different.

SO, WHY EXACTLY IS SEO A CHALLENGE?

PWAs are JavaScript-based sites, and their rendering mechanics differ from those of standard HTML-based websites. To understand the difference between the two approaches, you need to understand server-side and client-side rendering:

Traditionally, the majority of websites use Server-Side Rendering or SSR to “pre-boot” everything on the server-side. The way it works is pretty straight-forward: a user requests a page, then a rendered version is sent from server to their browser. Easy!

This, however, has some drawbacks. Even though the first meaningful paint loads very fast, this approach will require you to load the entire HTML every time a user switches pages. This can be a pain, especially when operating on a poor internet connection.

Progressive Web Apps and other Javascript-based pages use an alternative method called Client-Side Rendering or CSR. With this approach, content is rendered in the client’s browser, using JavaScript.

Instead of sending an entire HTML document every time a user wants to go to a new page, only a tiny string of data is passed, containing JavaScript that requests and renders the necessary parts of the page in client’s browser, resulting in a significant page load speed increase.

Seems like a good idea, right? Still, many site owners are cautious about switching to CSR, trying to make sure that their content is properly exposed to Googlebot and search engine crawlers.

Comparing a “traditional” website against a JavaScript-based PWA, we see that, while the former clearly renders all the website’s content, the latter must rely on search engine’s ability to process JavaScript and get all the data you want search engines to index.
This has caused a lot of confusion, making people think that PWAs cannot be indexed at all.

The reality, however, is that CSR apps can be – and are – crawled and indexed by search engines, and Googlebot is currently the best among them at processing a Client-Side rendered JavaScript.

Is there a solid working solution?

The short answer is Yes. In fact, several of them. So, you can definitely go with PWA for SEO-focused projects.

An approach we’d like to discuss hereby is called DYNAMIC RENDERING. In a nutshell, it requires your webserver to understand the source of a request – whether it is a visitor, or a search engine crawler and serve different versions of content to different sources.

This allows you to provide a Client-Side Rendered version for your real visitors, and conditionally serve the server-side rendered version to search engine crawlers.

Dynamic rendering is a technique approved by GOOGLE, and should not be confused with s.c. “cloaking”, a common black-hat SEO technique to serve different content to search engines vs. users.

PRIORITIZE YOUR CONTENT & COMBINE SSR WITH CSR

Another neat way to solve this is to prioritize content by identifying the most important elements of your page that you definitely want to pass to search engines as soon as possible, and serve this content using Server-Side Rendering.

By doing this you can be confident that search engines will pick up the crucial information (like canonicals, titles, etc.) immediately after discovering your page, and the rest of the information will be processed via Client-Side Rendering during the second wave and eventually added to the index.

TIP: SEO BEST PRACTICES REMAIN UNCHANGED

Since PWA isn’t a ranking factor, all technical, on-site, and off-site SEO best practices apply to PWAs as well. Here are some of the usual SEO aspects you need to take into account if you’re migrating your site to a PWA:

1. Implement self-referring canonicals for unique pages and canonicalize duplicates or set meta robots to “noindex, nofollow.” (This is especially important if you’re combining PWA and AMP.)
2. Each page should have a unique URL.
3. Make sure crawlers can access valuable content hidden in tabs, infinite scroll, etc. If you want crawlers to explore content behind buttons, images, etc., use an HTML link.
4. Use Schema.org markup to help crawlers understand the content of the page and Open Graph markup so that URLs share nicely over social media.
5. Don’t show different content to users than you show to Google (save for the caveat above).
6. Make sure your page passes the Google Mobile-Friendly Test.
7. Audit pages for speed on Google PageSpeed Insights.

Why PWA is the future

The biggest and the best are using PWAs already

You may have heard that Amazon is using a PWA. And Alibaba. And Uber. However, what was once a technology leveraged mostly by digital giants, due to high costs of development and inescapability of custom solutions, is becoming increasingly democratized and accessible. Thanks to emerging ready-to-use PWA solutions and the widespread appreciation for PWA, the technology is now available to everyone.

PWA has already proved to be a game-changer, with businesses around the globe flocking to adopt it and reap the benefits it offers. In this light, it is important to understand what this new technology can bring for you.

MOBILE-FIRST ERA IS HERE

The amount of traffic from mobile devices has been increasing year-by-year. It is safe to say that we got past the tipping point already a couple years ago with 2018 desktop-mobile traffic distribution showing that 52% of overall web traffic came from mobile devices during that period.

The trend continues to demonstrate steady growth in both usage volume, as well as rate of technological progress, changing the way people interact with the web. Among the best PWA examples are in mobile eCommerce, which has been booming over the past few years.

GOOGLE ANNOUNCES MOBILE-FIRST INDEXING AS DEFAULT

At the end of 2018, Google announced that it was already using mobile-first indexing for over half of the pages globally. Eventually, Google announced that mobile-first indexing will now be the default option for all new web domains as of July 1, 2019.

Google has made it clear that there is only one index for serving all search results, as opposed to separate “main” and “mobile-first” search indices. This means that you need to make sure your website is performing great, primarily, on mobile devices.

Even if you have a fully optimized website from the content and technical SEO perspective, this might not be enough to outperform your competition. By rolling out mobile-first indexing as a default method, Google made it clear that the company will continue to emphasize the importance of providing the best possible experience for mobile device users.

So, if you are looking at how to improve the user experience, especially for mobile device users, this is the right time to consider Progressive Web Apps.

MIGRATION TO MAGENTO 2

An average PWA project development may take up to several months. However, the biggest eCommerce platforms like Magento suggest going with ready-to-use applications, like the e-point PWA Commerce Accelerator. With these, the time spent on the project will drop even up to 1-2 months.

Let’s not forget that as of June 2020, Magento, one of the most popular eCommerce platforms, no longer supports their Magento 1 version. This means that the eCommerce websites still running Magento 1 will no longer receive official support and updates. With this come decreasing functionality, higher maintenance costs, escalating security issues, end of PCI compliance. If you want to continue receiving all the latest Magento updates, make sure the necessary security measures are in place, and are considering a Progressive Web App for your business, now is the right time to significantly save on development resources and migrate to Magento 2 while implementing the PWA technology.

The most cost-efficient way to do so is by leveraging a ready-to-use PWA solution for Magento, that can be installed on top of Magento 2 store within just several developer hours.

With all things said, it is understandable if you’re left with some uncertainty, wondering whether or not you have warmed up to the idea of implementing PWA yet. The multiple benefits offered by the technology present it in a very lucrative light – promising traffic and profit boost, increased levels of engagement and user satisfaction, competitive advantage with a future-proof platform.

“But what about the downsides?” you might be asking yourself, “Am I ready to put up with the logistics of implementation to get to the desired results?”

Let us try and clear these doubts by answering some of the most popular questions asked by people first coming to contact with PWAs.

Despite the countless benefits PWA offers it’s just SUCH a hassle, right?
– Wrong.

With ScandiPWA, convenience is principal and unlike other solutions on the market, ScandiPWA is a theme that is installable on top of any Magento project later than V2.3. No infrastructure changes, no middleware, no problems. Getting started is hassle-free.

Ok, but I’m short on manpower, how big should the developer team be?
– A team of 1 is enough.

A single developer in a couple of hours can have a functional PWA store up and running and ready for customization. ScandiPWA is installable via composer and doesn’t require any manual installation work with cloning. Thanks to composer, even the updates are automatic, meaning you always have the latest stable version.

Still… it will take a while for that developer to get familiar with ScandiPWA.
– Less than you think actually!

ScandiPWA is a Magento-first solution, so the countless benefits come on top of all Magento out-of-the-box features. Following Magento’s example in crucial aspects, e.g. doing rewrites, means your developers will feel right in their element.

Interesting, but can I trust ScandiPWA?
– Results and feedback speak for themselves.

It’s open source, it’s celebrated for the technology, it’s spoken very highly of in the Magento community. The core team is constantly updating the theme, with weekly releases. Any technical issues are taken care of on the fly. What’s more there are several eCommerce projects in development, all contributing to the main theme.

Final question, is PWA a mobile app?
– You can make it act like one!

PWAs are different from native apps. Native apps are self-contained programs that live on the mobile device. A PWA is still a website that runs through a web browser, but it displays like a mobile app, can work offline, and has app-like features that engage the users.

BE SURE TO PICK THE RIGHT PWA SOLUTION

Today PWA is more affordable than ever before, and is available to any business willing to adopt the technology. The fastest and most cost-efficient way to implement it is by leveraging a ready-to-use PWA solution.

Let’s take a look at some of the most popular ones offered on the market today.

PWA STUDIO

In January 2019, Magento announced the release of the PWA studio. An anticipated announcement, welcomed with great enthusiasm by the community, although it doesn’t strictly offer a ready-to-use solution. Rather, it is a set of tools for building PWA stores.

A few proof-of-concept demo stores have been released to display its functionality, notably, by Magento themselves and another one by Inchoo. These demos made it clear that, while PWA Studio boasts some impressive features, it is also fairly complex in terms of integration and setting up in production, suggesting that additional infrastructure adjustments are required.

SCANDIPWA

ScandiPWA is the first open-source PWA theme for Magento. Unlike other solutions on the market, ScandiPWA is not a storefront, but a theme that is installable on top of any Magento project later than V2.3, without changes to infrastructure. It doesn’t have any middleware that can slow down or cause bugs and it is easy to upgrade and maintain.

As an open-source solution with detailed documentation available, multiple teams contributing to conversion optimization, implementing extensions, performance optimization, and consistent architectural solutions, it can be used to deliver a fully functional PWA store with the help from only one developer, in a matter of a few hours. Moreover, maintaining a website built on ScandiPWA is convenient, as it updates to the latest stable version via composer update and doesn’t require manual updates and checking for the latest stable version.

A Magento-first solution, ScandiPWA allows the use of all Magento out-of-the-box features, already familiar to developers, and adds the multiple crucial benefits provided by PWA technology.

Magento feature support, integration of admin interface, data caching, community support, the simplicity of installation: ScandiPWA is actively developed, with new features being added and improved on a regular basis.

VUE STOREFRONT

A platform-agnostic storefront PWA solution created by Divante was one of the first PWA solutions available on the market.

Vue Storefront offers an open-source storefront solution under the
MIT license. At the core of its value proposition is the ability to connect various eCommerce CMS or third party software to the storefront via API.

While such an approach provides a one-size-fits-all solution, mind that an additional middle layer will require extra maintenance resources.

OTHER SOLUTIONS

Apart from the above mentioned, there are several other PWA solutions worth mentioning, such as DEITY Falcon, Front Commerce, Spartacus, Angular Storefront.

While every PWA provider has its own value proposition, different PWA solutions use different architectures, which may be crucial when choosing a solution for your business: we recommend to book a free consultation and learn which solution works best for you.

We’ve gathered some tips from a renowned industry experts to make sure you follow the best practices when designing your Progressive Web App and avoid common mistakes in user experience and appearance.

1. DON’T OVERCOMPLICATE THINGS

As you have learned already, with all the benefits, Progressive Web Apps can be a killer-tool that will bring your mobile user experience to a whole new level, delivering immediate impact. However, by being able to use all these previously unseen features like home-screen install, push-notifications, offline mode, often webmasters tend to get too excited.

As Ryan Warrender, a UX expert from Google, wisely pointed out, Progressive Web Apps features should accentuate the experience, not distract from it.

4. PERCEIVED PERFORMANCE — MAKE WAITING SEAMLESS

Let the users see that they are making progress by preloading skeleton screens and transition animations to make waiting seamless.

To achieve seamlessness, ScandiPWA uses an opacity transition, which takes 0.53s from initiation to video start, creating a smooth and soothing effect. Not only does it look great, it also allows the users to orientate themselves.

5. MAKE YOUR BRAND STAND OUT

The home screen install feature is a powerful tool that could bring a lot of value for your business. Make sure to leverage it, by creating a great icon!

A UX expert Sophia Brooke is suggesting to follow the essential guidelines of native apps to create a distinctive, but simple enough icon to stand out on different backgrounds, and easily accommodate various elements like shades.

6. FONTS — KEEP IT SIMPLE

Try to avoid fancy fonts on subsequent loads and use device default fonts whenever possible. Not only custom increasing the download size of your first page, but custom fonts also can slow down the performance of your app, and create additional visual distractions.

7. THINK OFFLINE

Make sure you are making the most out of the PWA by providing all your key features in the offline mode and implementing the caching option.

8. FOLLOW SEO BEST PRACTICES

Although PWAs can look and perform exactly like native apps, Progressive Web Apps have URLs and can be crawled and indexed by the search engines. Make sure to check the Progressive Web App Checklistand follow the SEO best practices.

9. TEST YOUR APPS WITH LIGHTHOUSE

Google has introduced an open-source performance management tool called Lighthouse that can run as a Chrome extension or as a Node module. You can audit your web app or any web page with Lighthouse and get an extended report of the page. Moreover, you can get a reference doc for each audit item describing why the audit is important and how to fix the failing audits.

It’s possible to run Lighthouse against any web page, to generate reports for performance, accessibility, progressive web apps test, and more. Additionally, you will get a detailed list of all issues with suggestions on how to fix the failing audits.

Since digital titans like Twitter, Forbes, Uber, AliExpress switched to PWA, we see a constantly growing collection of case studies that show the positive effect of Progressive Web Apps on all major KPIs: conversions, revenue, time spent, engagement, re-engagement, leads, etc. We have compiled these PWA case studies for your inspiration:

PUMA MEXICO

• Puma becomes the first sports shoe manufacturer to build their eCom store using ScandiPWA
• After implementing ScandiPWA supported by ReadyMage hosting, Mexico becomes the fastest among all Puma international websites
• ScandiPWA was optimized and enhanced with 3rd party integrations, achieving impressive Lighthouse scores:
• 90+ on Mobile
• 98 on Desktop

SPICE

• Spice is a shopping mall that adopted Hybrid Retail model, and turned its new website into a hub ensuring easy access to all of its stores as a way to adapt to anti-COVID retail restrictions
• 200+ of the mall’s stores have gained a universal digital platform and an extra online sales channel

KARMIA

• Karmia is a Silicon Valley charity startup aiming to build the biggest nonprofit donation service in the US
• A massive database of 2M+ nonprofits was assembled for processing to enable instantaneous donations
• The resulting website is the world’s biggest charity fundraiser on Magento, with a powerful tech-stack and a distinct memorable presence

SPORTLAND

• Well-established sportswear retailer, working with the world’s leading sport brands, and represented by 40+ stores across the Baltics
• Multiple performance enhancements and ScandiPWA feature adjustments, to address a wide range of use cases, including: product information management, order flow, payment and checkout, internal document workflow
• Better connectivity and in-store management with fully custom ERP integration incorporating Python middle layer and Citrix virtual apps

TECHNODOM

• The largest mid-Asian retailer migration to ScandiPWA
• Multi-streamed development with PWA, ESB, PIM and Magento
• Complex infrastructural build to enable high-load and intrusion resistant platform
• ScandiPWA was set up to easily build into the apps for AppStore and Play Stores