Progressive Web Apps

PWA vs SPA: Alike but Different

The appeal of standard websites is starting to lose its charm, yielding its place to web applications. With each passing days, web applications are becoming increasingly popular due to its engaging and staggeringly fast experience.

Most of this technological success can only be gained by implementing certain architectures into the structure of your website, ensuring your website’s stability, performance and engagement.

Two popular approaches for structuring your web application right now is PWAs and SPAs. Much to the common conception regarding these two approaches, they’re not the same. This is crucial as their overlooked differences often lead to costly mistake and lost opportunities; surely you—probably a site owner for whom every millisecond matters—don’t want your web application be lagging behind the rest of the world.

How Do They Work?

Single Page Applications (SPAs)

SPA (Single Page Application) is a website whose current page is updated dynamically rather than being entirely downloaded from a server. In other words, all the necessary application code for your web application (HTML, CSS, JavaScript) needs to be loaded only once. As the user navigates through the web application, all contents and elements that need updating are fetched and re-rendered without requiring the user to reload the browser.

This saves the traditional round trip between the browser and the server, thus allows for faster interactions and better user satisfaction.

How SPA Works
How SPA Works

You probably use SPA all the time without even realizing it. Notice how most social media websites feel kind of the same? It’s because they all use SPAs to streamline the user experience and to create a continuous news-updating feed.

Here are some of the notable SPAs that you’re probably using regularly:

  • Facebook
  • Gmail
  • Linkedin
  • Netflix
  • Google Maps

Progressive Web Apps (PWAs)

Unlike SPA, Progressive Web App (PWA) is more like a set of guidelines and checklists than a specific architecture. PWAs are known and deviate from SPAs by several characteristics such as:

  • Service Workers: Service workers provide the technical foundation for many of PWA’s prominent features, namely offline availability and push notifications.
  • Web App Manifest: A file which contains a minimal set of icons.
  • HTTPS: PWAs are always served from a secure origin.
How PWA Work
How PWA Works

Service workers act as a proxy between the browser and the network and are responsible for caching of the website’s assets and interception of network requests, which leads to the website’s offline availability and various other features including push notifications.

Service workers also help tremendously in the background. Besides offering offline capabilities, they’re also responsible for much of the heavy calculations, which is the main reason why most PWA websites are so efficient and fast-loading.

We’ve written an in-depth guide about what is Progressive Web App. So you can’t miss it!

How Are They Alike?

Being both new and revolutionary technologies, these two architectures offer its user an app-like, engaging experience that’s vastly different from traditional websites. At first glance, they can be easily mistaken for one another; the underlying processes that make all these experience possible, however, bear little resemblance with each other.

What’s The Difference?

There’s a common misconception that PWAs are almost always SPAs, which is just plain wrong. As you can see from the PWA requirements above, nowhere does it state that website content must be rendered in the browser or PWA should not request server-rendered pages.

A PWA is, simply put, a website that has all the best qualities that the Web has to offer. It’s Reliable, Fast and Engaging.

And since PWA requires service workers that run in a separate thread from the UI, PWA sites differ in such a way that their contents are always displayed near instantaneously, unlike SPAs which almost always accompany a specific initial loading screen for pre-fetching of the sites’ assets. This means that most, if not all of the abundant JavaScript overhead that SPA JavaScript framework place on your web apps can instead be reallocated to the service worker.

Gmail Loading Screen
SPA users must be familiar with the initial loading page

Obviously, the differences between these two are not just that, there are plenty more to dissect:

In terms of Speed

With regard to speed, these two architectures are pretty similar since they’re both cutting edge technology. The upper hand, however, might go to PWA here.

The reason for this is because, while both SPAs and PWAs use JavaScript for their developments, PWA is able to leverage its service workers to render some of the works. In other words, much of the excessive JavaScript overhead that SPAs add to your webs apps can instead be delegated to the service workers, thus greatly reducing JavaScript footprint.

PWA experiments in Jetpack
WordPress Before and After PWA Optimizations

This enables PWA sites to pre-cache many site assets: scripts, CSS, images, and markup before they are required. Thanks to these pre-caches, the user’s network is relieved of the additional stresses that come with rendering and are able to work offline.

In terms of Cost

Here’s where PWA loses to SPA. Possessing cutting-edge technology, PWA consequently comes with an additional cost. That’s not to mention that the development of PWA often lasts for weeks or even months at a time since it’s not as streamlined a process as compared to SPA’s.

PWAs: $2000 – $20.000

SPAs: $1500 – $12.000

There are many factors at play affecting your building costs such as your developer’s rate, the complexity of the job, your preferences and customizations… all of which should be taken into considerations when doing a cost estimate.

Don’t miss our guide to find out about Progressive Web App cost.

In terms of User Experience/User Interface

While SPA had had its place in the past, people are starting to convert to PWA since it offers better User Experience (UX) and User Interface (UI).

Both possessing the app-like interface, PWA brings more engagement and reliability even in offline or slow connection conditions. For these reasons that influential brands such as Twitter has initiated The PWA movement by releasing their own PWA version of their site, which is Twitter Lite.

Source: PWAstats

And it’s not just Twitter. The PWA movement is expected to be here to stay; plus with the recent participation of Spotify, the movement doesn’t seem to be showing any sign of slowing down.

Desktop Spotify PWA UI
Alluring UI of Spotify PWA

Single Page Application has its limit of not being able to deliver satisfactory UX on big sites, which is why it works best for sites that are data-oriented and not necessarily visually stunning like Gmail, Facebook, …

Gmail UI
Gmail UI

In terms of Security

Security is a delicate subject. While both PWA and SPA use JavaScript as their main library for their developments, their issues regarding security differ a lot, with most of which come from SPA and its XSS (cross-site scripting) issue.

Join with thousands of other enthusiasts to receive the latest Magento and Progressive Web App news & tips.

Much fewer concerns regarding security are raised at PWA since it’s in the nature of Progressive Web App that all connections are to go through a secure HTTPS origin. Like PWAs, HTTPS, too, is the future of the Webs, through which cutting-edge features such as service workers are made accessible and possible.

In terms of Accessibility

Compared to SPAs, PWAs are generally more accessible, especially with the recent Chrome support for Desktop PWA. Users interacting with PWAs can have the option to add a shortcut of the app that they’re using to their Homescreen or to their Desktop.

Desktop Twitter PWA icon
Desktop Twitter PWA icon

That’s not to mention the inconsistencies that SPAs have. SPAs have the tendency of leaving its user in the middle of nowhere every time a page transition is executed. This is especially frustrating for users with disabilities since no aria or role attribute will be able to help them if the page keeps changing completely its DOM (Document Object Model) structure.

Wrapping Up

As revolutionary as SPAs might have been, time seems to have slowly caught up with it. While SPAs and PWAs are kinds of the same, more and more people are choosing PWAs over SPAs and that’s understandable, given the benefits that PWAs bring.

With SimiCart, we offer the best PWA solution for Magento merchants. Contact us now to receive a free demo of our product and get a quote.

A Content Writer with a passion for the English language.

avatar
  Subscribe  
Notify of