Flutter apps vs PWAs - which should you build?
These days there are so many choices when it comes to creating a great mobile UX.
The mobile internet is better than ever, building apps is more accessible than ever, and new tools, frameworks and services come out constantly.
A key question is whether you need to build mobile apps for iOS and Android or whether a mobile friendly web app is OK.
Researching this question will naturally lead you to progressive web apps (PWAs), and cross-platform app development frameworks like Flutter.
Although they may seem similar on the surface, Flutter vs PWA are two very different technology choices, with different advantages and drawbacks.
In this article we’re going to break down each, explain all the important considerations, and guide you through everything you need to know.
We’ll start off by explaining the basics of Flutter and PWAs, then we’ll get into the comparison.
What is a PWA?
Progressive web apps are the cutting edge in web app development.
They are built with web technologies like HTML, CSS and JavaScript - and run in web browsers on mobile and desktop.
They behave like a cross between a website and a mobile app though.
By leveraging web technologies like service workers, PWAs bring many of the features traditionally associated with native mobile apps to the web, like:
- Offline functionality
- Push notifications
- Access to device hardware
There is no strict definition that helps us, but to put it simply: PWAs are modern web applications that behave in a similar manner to mobile apps.
A PWA isn’t something “separate” from your main website or web app, it's better to think of it as a series of enhancements to your site that give it specific modern capabilities.
For a detailed breakdown, check out this article.
What is Flutter?
Flutter is a cross-platform app development framework.
Cross-platform app development is building apps for multiple platforms from one single codebase. A framework is like a development “toolkit” that makes certain tasks vastly more efficient.
In the case of Flutter, it was released by Google in 2017.
It allows developers to use the Dart programming language to build apps once, writing code for them once, then “converts” that into machine code that can run natively on iOS, Android, the web, and even desktop programs.
This is very efficient, because traditionally you had to write separate code bases for each platform. You’d need to build specific apps for iOS and Android, effectively doubling the work (at least) compared to Flutter.
Though many businesses still opt for the traditional, expensive and laborious native development - many are embracing Flutter and other cross-platform frameworks like React Native in recent years.
Flutter is known for creating smooth and pleasing UIs, as well as making mobile app development much more efficient.
Flutter vs PWA 101
So we’ve seen that Flutter apps and PWAs are different things.
PWAs are web apps that run in browsers, and share several of the key characteristics of native mobile apps. Fundamentally though, they are a web technology that can be thought of as an “enhanced” and cutting edge website.
These days, they’re fast and efficient to build, especially if you already have a web app, and in recent years have led to more engaging web experiences.
Flutter is a tool for building “real” native mobile apps. The apps do not run on the browser, but rather on the chip of the iOS or Android device.
They go (far) beyond the capabilities of a PWA, can be deployed on the Apple App Store and Google Play, and can take full advantage of the capabilities of the device.
Ultimately - Flutter apps and PWAs are not really “alternatives” to one another, although there are overlaps in the business benefits.
Flutter vs PWAs - the Tech Stack
Let’s look at some of the more technical differences between Flutter apps and PWAs.
Flutter’s tech stack
Flutter is a framework for Dart.
Dart was released by Google back in 2013, and was originally seen as an alternative to JavaScript for web development.
While Dart is used for building both web and server applications, it has really found its niche as the language of Flutter development.
Dart is known for being great to work with and feature rich.
It is object oriented, meaning it uses “objects” - self contained units that have both data and methods. It’s also class defined, which means objects are made from “classes”, which are like reusable blueprints for objects.
Syntactically, Dart is similar to languages from the C family, but has some special features. One is hot reload, which allows developers to “preview” code changes in real time.
To build the UI, Flutter has a vast library of “widgets”.
Widgets are like pre-built components that developers can combine to create the UI and functionality of the apps.
When the apps are ready, the code is compiled into native code for the platform in question - for our purposes iOS or Android.
Finally, when the apps run, the widget-based UI is rendered onto the users’ screen via Skia, an open-source 2D graphics engine used extensively by Google. Flutter can control every pixel on the user’s screen - allowing very rich and sophisticated user experiences.
The PWA Tech Stack
PWAs are simpler.
Like everything on the web - they leverage the most standard web technologies, including HTML, CSS, and JavaScript.
But the technological lynchpin of PWAs is the service worker, a handy script that runs in the web browser and manages requests, caching, and storage in a very efficient manner.
This allows PWAs to perform well regardless of even in areas with relatively poor network conditions, which can really improve UX.
PWAs can also use modern APIs for other powerful capabilities like push notifications, background data sync, and interaction with the device features like the camera and GPS.
Flutter apps vs PWAs - which is better?
As we mentioned earlier, Flutter apps and PWAs aren’t really alternatives. Both have pros and cons.
Why PWAs > Flutter apps
For example - PWAs are easier and more affordable to build.
Because they use standard web technologies, and are relatively simpler on a technical level, you should be able to build (rough estimate):
- A simple PWA for $5k - $20k
- A sophisticated PWA for $20k - $50k
If we’re talking about converting your existing website or web app into a PWA, the cost should be lower still.
They’re easier to launch, and also to push updates to, since you don’t need to go through the App Store or Google Play review process.
Flutter apps on the other hand are more complex to build, requiring more specialized expertise. Generally - they’ll cost $100k+ to build. They also require a significant ongoing investment to maintain and update.
Since they run in the browser, PWAs are cross-platform by default, and they can use some of the most useful app functionalities like push notifications and the ability to install on the users home screen.
PWAs are also more discoverable on the web through organic search.
Why Flutter apps > PWAs
PWAs are great, and have made progress in leveling the playing field between native apps and the web.
But, they aren’t there yet. Far from it in fact. This is for a few reasons.
Compared to Flutter apps, PWAs fall short in the following ways:
- Limited access to device features - they won’t be able to interact with the hardware capabilities and device APIs as deeply
- Performance - while PWAs are fast, they often can’t measure up to the speed and smooth UX of native
- Offline capabilities - although PWAs can have some offline functionality, this is generally limited in comparison
With PWAs, you also lack a few critical aspects entirely.
Firstly, you have no presence on the App Store or Google Play. Only native apps can be deployed on the two major app stores.
Although the user can “install” a PWA on their home screen - but this is effectively only adding a shortcut to the web. You’ll have to get them to do it too, which isn’t an easy sell.
Speaking of hard sells, with PWAs it is harder to send push notifications.
Native app notifications have:
- Higher opt in rates
- Better for iOS
- Better personalization (and therefore are more powerful)
They’re also a much better way to target the lucrative iOS market, because the permissions are more forgiving.
With PWA web notifications, you first need the user to install on the homescreen, and only then can you ask for permission to send them.
This is high friction.
Giving permission for web notifications isn’t really a thing on mobile, although it can work on desktop. We covered all this in detail here.
There’s also the fact that a portion of your users and customers will just expect an app on top of a web presence, as well as trust it to a greater extent.
A PWA is not an app in most people’s minds - rather a fancy website - and having Flutter apps on the App Store and Google Play taps into existing habits much better.
Flutter vs other platforms
We compared Flutter with several other app development options as part of this series.
PWAs are one thing, but there are also many other cross-platform frameworks and programming languages for developing apps.
- Flutter vs React Native
- Flutter vs Kotlin
- Flutter vs Swift
- Flutter vs Ionic
- Flutter vs Xamarin
- Flutter vs native development
- Flutter vs Expo
You can take a read of these to learn about how Flutter stacks up against other the other mobile app options.
For now though, let’s wrap up our comparison with PWAs.
Why they aren’t actually alternatives
PWAs and native apps aren’t really alternatives. They are different things.
A PWA is an upgraded version of your site, with new and improved features and UX.
A Flutter app is an entirely new channel that works in synergy but (somewhat) separately to your site.
We recommend you get both.
Start off with a PWA for your standard web experience, then build iOS and Android apps for deep engagement with your most loyal users.
You can do this with Flutter - but it will take a lot of work to both build the apps and share business logic between the apps and the web.
Think multiple six figures and months of effort to get something running smoothly.
A much better option, if you already have a PWA or web app, is MobiLoud.
Convert your web app to native apps with MobiLoud
We’ve seen that Flutter apps are expensive and difficult to build, and that PWAs are no alternative to native apps.
MobiLoud solves the problem by letting you convert your website or PWA into native iOS and Android apps.
We build the apps for you, based on your website but with all the native elements - like push notifications, native navigation and much more.
You’ll get apps that give you all the benefits of Flutter apps, but they’re much better.
For a start the cost is <5% and the apps will be ready in weeks. The apps will sync automatically with your site, updating with any changes you make on the web. Our team also handles all the updates and maintenance - so there’s nothing to add to your team’s workload.
A PWA and MobiLoud iOS and Android apps is a powerful combination.
It has worked for thousands of businesses, from small startups to multibillion dollar brands.
It can work for you too.
So if you already have a website or a web app, get in touch with one of our mobile app experts and learn about what MobiLoud can do for you.
