PWA vs SPA vs Native Mobile Application – What’s Right?

February 12, 2020 Adam Mortka

There’s more than one way to make a mobile app – but more choices often lead to more challenges.

Specifically, do you build a PWA, SPA or native application? Is one always better than the other? Or are they situational?

Straight away, let’s answer that last question – there are times when each individual approach is better, depending on the needs of your business and your customers. However, understanding these different options is also vital when making the most informed decisions possible.

Here I want to explore these options in more detail, with a lot of help from Damian Kowalski, who previously explored the importance of mobile in a wider multiexperience strategy.

Why It Matters?

The very first experience with the application may result in a simple yes/no decision, and proposing or even imposing the installation of a native application too early may end up in a decreased conversion rate. Proposing a PWA, instead of a native one, priorities users’ time by delivering a light application that loads faster and enables users to achieve their goals much faster. For example, online retailer Luxmart doubled their conversion rate from 0.6% to 1.24% when introducing a Progressive Web App.

As such, companies such as those in the retail and ecommerce sector are looking to expand into the mobile market, but they’re faced with the same choice of PWA vs SPA… or something entirely native?

Getting it right is an absolute must.

PWA – Progressive Web Apps

A Progressive Web App — or PWA — for short, is an application that’s built using modern web technology. As a result, it can be accessed via standards-compliant browsers, making it a very versatile cross-device solution. The term was introduced on 2015 and was first meant to describe web applications that use new features supported by modern browsers, such as service workers and web app manifests.

Web apps have been around for a long time, but PWAs specifically refer to the more advanced versions, including the aforementioned service workers and manifests that we use today. The term originally came from Google, but has since been supported by Apple as well, making it a popular choice on the vast majority of mobile platforms. The key lies in correctly understanding the progressive approach as a way to enable additional functionalities where possible, but the application should still enable users to reach their goals without them.

How Do PWAs Work?

Progressive Web Apps are essentially progressive websites that use app-like features to generate an experience that’s closer to mobile-native than in-browser.

Here’s a clearer breakdown:

P – Progressive – The app works for every user, no matter the device or browser, and uses a progressive enhancement principle (i.e. it loads core content first, then secondary, third etc so users get the most valuable elements quickly).

W – Web – Applications are written using typical web pages languages, such as JavaScript, HTML and CSS.

A – App – By providing a consistent interface and functionality, PWAs work similarly to native applications.

Benefits Of A PWA

  • Because they are a still a type of website or webpage, users don’t need to install the PWA through traditional distribution methods, such as app stores.
  • Likewise, developers don’t need to invest in Software Development Kits (SDK).
  • PWAs are fast and optimised to provide a smooth experience for users. Such apps can be started without hitting the network at all.
  • Because PWAs can access a devices’ functionalities and send push notifications, as well as sit on the home screen via a traditional shortcut/link, the overall experience is highly integrated with the device, offering a native-esque experience.
  • Likewise, the ability to send push notifications and other native features make a PWA more engaging than a traditional website.
  • PWAs can also work offline, showing last orders, updates or other critical information for extra versatility.

Drawbacks Of A PWA

  • Limited functionality on iOS devices. The iOS market is still behind with PWA support, compared to Android, as there’s no simple or direct way to add a PWA to the Apple Store. You need to create a hybrid application with tools such as PWA Builder or Cordova. These create a native package with the browser housed inside for your PWA to run on, which takes a few extra steps to get the same results.
  • Unable to collect user data. Because it’s not truly native, PWAs have limitations when it comes to accessing phone contacts, stored data or other applications.
  • Less access to device functions. A PWA can still connect to the camera, microphone and other devices via Browser API, but a native applications has wider – and more advanced – access to the device’s wider features.

SPA – Single Page Applications

An SPA is a website that dynamically generates and updates content, without the need to refresh the page. In other words, the user never leaves the page, as content is loaded in and out, rather than having the user navigate to other pages.

How Do SPAs Work?

All the required code for the application needs to be downloaded and executed once. Further navigation and interaction with the web application requires new content to be loaded, so the browser is sent to fetch only partial content without the need to re-render the whole page. This architecture saves a round trip between the server and browser, enabling users to have a faster and undisturbed interaction.

PWA vs SPA – Aren’t They The Same?

The common misconception is that a PWA is just an SPA with some additional functionalities. This may come from the fact that PWAs mostly use the same frameworks as those for SPA projects. After the initial SPA, additional features, such as caching, manifest icons and loading screens, are often included it in the initial design/architecture, which pushes it into PWA territory.

Yet there are more differences than this. Many of a PWA’s performance improvements come in the form of visual information delivery.

Does this mean you can start with an SPA and ‘make it a PWA’ later? Yes and No. PWAs need specific architecture approach and, if these features aren’t planned from the start, it will take a decent of work to re-engineer the SPA. It is recommended to think about this as part of the strategy, but in general — yes, it is possible to add PWA functionalities later on.

Native Mobile Applications

Of course, when it comes to mobile development, it’s always possible to go completely native.

Native applications are built for specific platforms using the Integrated Development Environment (IDE) for the respective operating systems. Primarily, iOS requires applications written in Swift or Objective-C, while Java or Kotlin are required for native Android apps.

However, this also means that having application for both Android and iOS devices requires at least two development teams to build two versions of the same application. In the case of browser versions (for desktops), a third team must also be established.

True-Native or Hybrid Native

When it comes to native applications, there are three further ways to go — develop the app completely native, build it through a hybrid approach or store a web app in a native wrapper.

Native

The most native approach is to build separate applications for each platform, using the specific languages for each platform. This gives you the best options, including full access to the device’s hardware, but requires additional teams and time.

Example: This, in fact, is what nearly all banking applications use. Banks want to get the most security possible, so a fully native app gives them the most control and the most access to additional features. While there’s no feature parity, the benefits are still worth the extra cost. Banks are becoming increasingly mobile-centered, so it only makes sense to invest in a truly native service.

Compiled

A compiled approach uses a framework, such as Xamarin or React Native, to create a ‘core’ codebase, where in around 80% (really, it depends on the exact nature of your app) can be used across all platforms. This means that most of the work can be done by one team.

Example: The best example here is probably Facebook. After all, the social network developed React Native (and its web counterpart, React JS) for this very purpose – to cross-develop

Native Wrappers

If you want to develop a web app, these aren’t fully supported on all platforms, as we mentioned with iOS. Instead, you need to use a native wrapper, such as Ionic or Cordova, to embed the browser into an app. It’s a work around, but this does deliver the benefits of a PWA (and the limitations vs a native app) that acts more like a native application.

Benefits of Native Mobile Development

  • The best flexibility and performance. If you go the native route, using separate applications for iOS, Android and web platforms, you can cater the experience and technology to each. Using each platform to the fullest ensures performance is completely optimised.
  • Access to all native features. By going native, you can access the likes of NFC, app to app communication and even native payments – features that aren’t accessible via non-native approaches.

Drawbacks of Native Mobile Development

  • No feature parity. Each platform needs to be implemented separately, which results in a choice of two possible options:
    • Going fully native delivers the most benefits, but often results in significant increases for both development times and, subsequently, costs.
    • Using a hybrid option, or a native-wrapped PWA will readily reduce costs and teams in most cases, as a central team can create for both platforms – with a large portion of shareable/reusable code across all platforms (in the case of hybrids) or a singular web app with different wrappers (in the case of a PWA). However, there are some limitations in native-like benefits, which need to be considered.
  • Slow time-to-market. Alongside additional development teams, multiple source codebases also slow down development time, so the final result will typically be released later than other options.

PWA vs SPA vs Native – What Factors to Consider

Ultimately, there is no one solution that is always better than the others. If this was true, we wouldn’t have different options at all.

So, a better understanding of each potential option is essential for making the best choice for your business and the mobile experience you want to offer your customers or clients.

Development Time

The development times differ quite a lot based on the options you choose. For example, while PWAs and SPAs provide a one-code-fits-all solution for most platforms, going the dedicated native route for mobile will often result in longer development times and costs, as separate teams and competencies need to be involved.

Going Web To Mobile?

If you already have a Web application, the easiest and cheapest way to expand into the mobile market is to stay in the web world. Fortunately, you are not limited to just Responsive Web Design for fitting your web application into the smaller screens of mobile phones. Progressive Web Apps were designed by Google to make Responsive Web Applications feel more native-like for the user.

With the relatively low cost of adding a service worker, a splash screen and a few additional icons, you can create an application that will look like a native app at first sight. This is especially true on Android, which has supported PWAs longer (after all, it’s managed by Google), while iOS is still not completely on track with the latest PWA benefits.

Further, an application not listed in a platform’s respective app store means you don’t need Apple’s or Google’s approval to be installed, and you can release updates when you want, without having to go through the standard approval process, which is typical of iOS apps. As a result, time-to-market is shorter.

Engagement

Nowadays, smartphones have around 80 or more applications installed on average, yet users only make use of around 9 of these on a daily basis. In 2019, this usage came to around 3 hours and 40 minutes — which is 35% longer than in 2017.

So, while users are spending more time on their phone, the competition for their time is stronger than ever. As such, getting the user’s attention is crucial. PWAs have the possibility to send push notifications, which helps with engagement and lets users continue their experience from where they last stopped.

A great example of this is trivago, as the company migrated to a PWA-based website as their company expanded. They noticed a number of key improvements as a result:

  • Users who added the app to their home screen increased their usage by 150% – from an average of 0.8 repeat visits to 2.
  • Push notifications now surpass email subscriptions in terms of engagement as well, giving the company greater outreach.
  • All of these benefits also lead to 97% more click-outs to hotel offers – in other words, a significantly higher conversion rate.

Conversion

Speaking of conversions, this is of course the end goal for most products or apps. Here, PWAs can greatly help, as they allow users to trial the product or even use a free, limited version of the app with less friction than a mobile website.

PWAs also load faster than websites, which helps when connectivity is poor. Some companies have actively seen strong success using ‘lite’ versions of the products in these regions. Facebook Lite, for example, had 90% of the downloads of traditional Facebook during the first half of 2019 in India.

According to Sencer Kutlug (Head of Client Solutions & Analytics, Google Turkey):

 “In 2020 consumers will also expect a frictionless experience on all channels, including mobile devices. However, conversion rates on mobile currently lag compared to those on desktop. Marketers that want to stay on top of the mobile trend can:

  1. Invest in new technologies such as AMP (Accelerated Mobile Pages – a HTML web framework) & PWA
  2. Tailor experiences to different consumer search behaviours
  3. Pursue advanced measurement techniques to better map the consumer journey
  4. Utilise automated bidding to maximise the value of campaign bids”

If you’re looking for a high conversion rate, this is some advice to take to heart.

Discoverability

When it comes to SEO (Search Engine Optimisation), there are a number of key factors to consider if you want to be found on search engines.

First of all, because a PWA lives on a web server, it’s easily accessible for search engine crawlers like Google bot. This means that any publicly available content can be indexed by the likes of Google, which can then show up in search results.

That said, crawlers only use JavaScript. To save time, they parse, compile and execute their crawling tasks, splitting JavaScript sites into two phases. The first wave is only server-side content, while client-side content is only rendered when the bot has enough resources to do so. Fortunately, there are a few techniques to utilise server-side rendering in your PWA, which helps retain its benefits.

Page Speed

Another important SEO factor, the expected page speed is becoming increasingly shorter and shorter for users. People expect fast results.

In January 2018, Google officially announced that the mobile version of a website’s loading speed will be one of the key factors when considering the visibility of websites in organic search results.

Two important factors for page speed are the time to first paint and time to meaningful paint – the time taken to load the first components and the time taken to load the first meaningful part, respectively. While these don’t directly impact SEO, they do impact page speed. Users want to see the most relevant and important information first, which is why it’s often better to choose an option like PWA, which uses progressive enhancement.

Offline Access

Not all apps need to be used online — perhaps you also need some offline functionality. An SPA can’t always do this, as it often requires server-side loading. Both an SPA and PWA can use service workers to store information on the users’ device, but a PWA does this better. This way, they can see their last orders and other details, for example, even if they don’t have the full online functionality at that given moment.

A native app, likewise, can of course do this to the fullest extent — but as we said earlier, this comes at the cost of more time and resource-consuming development.

The Mobile Delivery Gap

To summarise, PWAs have evolved from a concept to a production-ready alternative for native or hybrid applications in recent years, addressing high development costs and improving time to market. Progressive enhancement itself has been around for a while; this concept allows users to choose from a variety of devices and browsers, letting companies deliver applications that work for everyone. Some more complicated functionalities may require specific systems but the general idea is that essential functions should just work — without causing troubles for the user.

While going Native for applications requiring full sign-in is a better strategy (like banking or social), PWA is an ideal solution for verticals like news, retail/ecommerce and travel. PWAs seem to act as bridge between mobile web and app-like experiences. Converting users to download your app is still important to ensure optimal consumer experience and retention. However, their first experience may happen elsewhere.

It is never about choosing PWA or native. You need a 360 degree view on your application. It is about the strategy and, as such, it should be part of a broader application assessment. Mobile is critical and, in the vast majority of cases, the primary channel for most markets now. Each approach has its benefits and drawbacks, which typically come down to audience, technical requirements and distribution channels.

What’s Next After PWA?

Even after the successful implementation (or migration) of a mobile strategy, a PWA is nevertheless often just the first part of a wider journey. A mixed PWA and native approach is better for understanding, tracking and making the most of user engagement, new acquisitions and conversions.

As it is hard to expect all users to download a native application, it’s also vital to provide users with native-like experience, which in the end will increase conversions. There is a lot to cover, so having a partner who understands all the benefits coming from a PWA and can incorporate those in your mobile strategy is your business lifeline to success.

Sources

Last posts