Progressive web application vs Single page application in AEM | Community
Skip to main content
July 11, 2018
Solved

Progressive web application vs Single page application in AEM

  • July 11, 2018
  • 4 replies
  • 19076 views

Hi,

I am looking for a suggestion on pros and cons of using progressive web application over single page application.

Thanks,

Sagar

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by arunpatidar

A PWA is almost always a SPA.

SPA, a Single Page Application, means that the web-page has not been developed in the traditional way. The browser is not sending a request to load the whole new page when user clicks a link, but instead uses JavaScript to manipulate current page and making it look like the user has navigated away. They are typically developed using a framework such as Angular or a library such as React.

PWA, a Progressive Web Application, is a term coined by Google recently, and it’s more of a mindset than a technique. It doesn’t have a specific definition and different people mean different things when they say PWA. The most commonly referred feature, though, is usage of service workers which makes it possible for the application to be available offline. However, it doesn’t stop there: you also need to use HTTP, make the user experience smooth on mobile, work cross-browser, enable SSR, etc. Check out Google’s PWA checklist for more. A Single Page Application (SPA) can be a Progressive Web App (PWA) but a PWA doesn't need to be a SPA. They are two different things. A PWA as defined by Google is:

Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.

Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.

Engaging - Feel like a natural app on the device, with an immersive user experience.

The Google PWA site is a good place to start learning about PWA and why and how you would build one.

https://developers.google.com/web/progressive-web-apps/

Properly combining the principles of PWA and SPA can result in a much improved user experience especially on mobile phones with unreliable internet connections.

Probably the best example today of a well implemented PWA is Twitter Lite. Check it out here:

https://mobile.twitter.com/home

...and read about it here:

https://blog.twitter.com/en_us/topics/product/2017/introducing-twitter-lite.html


Neither is “better”. PWA definitely offers more features, but it also requires much more time spent during development.

4 replies

smacdonald2008
July 11, 2018

Have you built sites using AEM before?

smacdonald2008
July 11, 2018

Here is more details on SPA -- Getting Started with SPAs in AEM

arunpatidar
Community Advisor
arunpatidarCommunity AdvisorAccepted solution
Community Advisor
July 11, 2018

A PWA is almost always a SPA.

SPA, a Single Page Application, means that the web-page has not been developed in the traditional way. The browser is not sending a request to load the whole new page when user clicks a link, but instead uses JavaScript to manipulate current page and making it look like the user has navigated away. They are typically developed using a framework such as Angular or a library such as React.

PWA, a Progressive Web Application, is a term coined by Google recently, and it’s more of a mindset than a technique. It doesn’t have a specific definition and different people mean different things when they say PWA. The most commonly referred feature, though, is usage of service workers which makes it possible for the application to be available offline. However, it doesn’t stop there: you also need to use HTTP, make the user experience smooth on mobile, work cross-browser, enable SSR, etc. Check out Google’s PWA checklist for more. A Single Page Application (SPA) can be a Progressive Web App (PWA) but a PWA doesn't need to be a SPA. They are two different things. A PWA as defined by Google is:

Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.

Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.

Engaging - Feel like a natural app on the device, with an immersive user experience.

The Google PWA site is a good place to start learning about PWA and why and how you would build one.

https://developers.google.com/web/progressive-web-apps/

Properly combining the principles of PWA and SPA can result in a much improved user experience especially on mobile phones with unreliable internet connections.

Probably the best example today of a well implemented PWA is Twitter Lite. Check it out here:

https://mobile.twitter.com/home

...and read about it here:

https://blog.twitter.com/en_us/topics/product/2017/introducing-twitter-lite.html


Neither is “better”. PWA definitely offers more features, but it also requires much more time spent during development.

Arun Patidar
smacdonald2008
July 11, 2018

Excellent answer!