Single Page App (SPA) or Progressive Web App (PWA)?
Let's dig into what you should consider when building either a single page app (SPA) or a progressive web app (PWA).
As a startup or enterprise you've got a lot to consider when building an app: "Should I hire a developer in house or should I hire an agency to do it?", "Should I build a mobile app or a websites or both?"
It's a lot to think about and you've got a lot of options. But, if you decide that you definitely need a website and you need you're website to be either a SPA or a PWA then this is the article for you.
In this article we'll help you understand what a single page application is and what a progressive web app is and how they relate to each other. We'll also go over what you should consider when deciding what route to go for your next business venture.
What is a PWA (Progressive Web App)?
A progressive web app is a really cool piece of technology because it begins to bridge the gap between native mobile apps and websites. Many times, a company will want to build a native app, but they'll have to decide between either Android or iOS because they only have the budget for one. And many times, a company will also have to decide if they should even have a mobile version because they might need something on the web and they don't want to have to pay for both a website and a mobile applications.
Well, a progressive web app starts to fix this problem!
At it's heart a progressive web app is a website that can be used offline. Another cool feature is that on mobile devices and even on desktop you can download a shortcut that can be used to open up the application. This is great! Not only are you building something that works on the web and mobile, but it also works on desktop too! Can it get any better?
Well yes! Sort of. Like always lifes complicated, but some more good news is that a progressive web app costs about as much as just building a single page application. So for example if you're AirBnB and you don't want to have to build a mobile and desktop applications you can just add a little extra code and development time to your single page application and viola! You have an application that can be used on any device.
Now to the downside. Since the technology is fairly new there are still some limitation to what you can do with a single page application.
Things you can't do
- Proximity Sensors
- Ambient Light
- Wake Lock
Things you can do! (Quite a bit)
- Local Notifications
- Push Messages
- Offline Mode
- Home Screen Installation
- Foreground Detection
- Touch Gestures
- Speech Recognition
- Camera & Microphone
- Network Type & Speed
- Battery Status
- Online State
- Device Orientation
- Screen Orientations & Lock
- Presentation Features
- Offline Storage
- File Access
- Storage Quotas
What is a SPA (Single Page App)?
A single page app is much like a progressive web app in that it has access to many of the features that are available to a progressive web app, but with the main difference being that a single page app is limited to being online.
A single page app will be able to use all the features above, but if you can use app offline and download it on the home screen then it becomes a progressive web app.
It's really just a difference utilizing those key features that makes the distinction.
At it's heart an SPA is a website that allows the user to interact with it without navigating from page to page. It's all about allowing the user to do things on your website without the user feeling like the entire page changed. They can check notifications, check messages, or do any number of things, but the context has to stay the same for it to be a single page.
But, is this distinction important? I would say not really. Sure technically a single page app allows the user to make changes to a website without navigation from page to page, but it doesn't really matter.
What really matters is that the users actions are intuitive. And so, it's important that the web developer that you hire has the ability to create a single page application, but chooses to change routes or change page context when it's applicable because it helps the user understand what they're doing on the website.
Very rarely do you need a single page application that plays strictly by the definition of everything happens on a single page.
Lets explain that a little better with an example:
Here we have a screenshot of someones Twitter profile. Twitter is a single page application. It also happens to be a progressive we app as well, but this actually doesn't matter in this case. The only benefit a PWA adds in this case is the ability to save it to the home screen and have files locally available.
The point being that if I were to click on a button, like the "Follow" button that you see, there a popup would appear
Here you see the signup popup, which is dynamically programmed to appear if a user is either not signed in or doesn't have an account. But the key point being that this appears without the URL changing.
It's this dynamic action that is important when designing modern websites.
However, even twitter still makes use of the URL. It's not entirely on a single page and that's because it's useful to have bookmarks.
So I would classify the entire Twitter website as a single page application, but it is a little bit of a gray area because it makes use of multiple URLs/Pages to guide the user.
Clearing Up Some Confusion
It's pretty easy to think that you either have a progressive web app or a single page app and not both.
This simple is not true. A progressive web app can and many times is a single page app. However, a single page app does not have to be a progressive web app.
How Does Mobile Friendly Fit In?
What is mobile friendly? This refers to the ability of a website to not just fit onto a mobile device, but to be user friendly on a phone or tablet.
Both progressive web apps and single page applications can but don't have to be mobile friendly. At Flux Tech we believe that they all should be mobile friendly because it take very little extra time to design for mobile. For me personally, I design the desktop first and from there it usually takes me very little time to set some breakpoints and fold the content on top of itself so that it's all in a single line.
But, I realize there may be some special cases where mobile friendly doesn't make much sense either.
What Should You Pick?
When deciding whether to go with a progressive web app or a single page application there are a lot of things to consider, but I'll lay out a few questions you should ask yourself.
- Will the app be frequently used?
- Will mobile be the primary method of interaction?
- Will the user benefit from having quick access to the app?
- Will the user benefit from having offline capabilities?
- Will there be a limited amount of animation? (e.g. it's not a video game)
If you answered yes to any of these questions then that's an indication that a progressive web app would be a better fit than a single page application. And the good news is that there is very little extra cost!
Let me know if you found that article helpful in the comments and if you need help building your own web application I'd love to help you through the process 😊