Written by Sonia Rebecca Menezes
The no-code revolution is here to stay.
It’s the revolution that took the mantra of ‘fake it till you make it’ and industrialized it to bring countless dreams to life.
No-code is built on the credence that technology should enable creation, and not in itself, be a barrier to entry. There are many outstanding ways to use no-code to start a business. Today we’re exploring the wonderful world of progressive web apps — PWAs, for short.
These web apps function as websites but provide an almost 100% native mobile app experience. We’re talking push notifications, offline use, and screen-responsive pages.
And to many businesses, this sounds too good to be true, but it gets better! No-code tools have made PWA development easier, faster, and more affordable than ever before.
But web apps aren’t new… How’s this a trend?
No, they’ve been around for the better part of the last decade. So, why are we still talking about them?
Answering this question is pretty easy;
- They work — just ask Pinterest about their 60% boost in engagement, or Starbucks about doubling their daily active users, or look at the other case studies further along in this post;
- They’re easy to build with no-code, allowing creators without technical ability to build brilliant visually-led, efficient solutions;
- They save money! (I feel like we could have ignored 1 and 2, and jumped straight to this one).
PWA vs native: what makes a web app a progressive web app?
I’m glad you asked. Here’s an overview of what makes a web app ‘progressive’:
- Firstly, a PWA is discoverable, meaning its contents can be found through search engines.
- You can use a PWA offline, meaning it should be network-independent. If you own a PWA, your users are usually notified of new content through push notifications and can install the PWA on their home screen.
- User data is protected from third-party use, so connections between the app, the user, and the server must be secure.
- Lastly, a PWA is progressive — it can be used on older browsers, but is completely functional on the newer ones too.
Costs to build progressive web apps
Let’s talk progressive web apps and their main competitor: native apps — which are developed using Java or Kotlin for Android, or Objective-C or Swift for iOS.
To start, the latter usually involves a costly development process that needs to be duplicated across each platform, and then maintained. Sure, there are development frameworks like React Native that allow you to reuse your code, but the high cost is a significant barrier for small to medium-sized businesses.
The reason PWAs are so competitive on pricing is that they're built on web technology like HTML, CSS, and JavaScript. It's the stuff that most front-end developers can tackle in their sleep.
What’s even better is that today, there are no-code tools that allow you to build beautiful web apps at an even lower cost, without compromising on quality or experience.
Examples of the best progressive web apps
Let’s take a look at some real world examples to show you how impactful and useful PWAs are. Here’s a round-up of my three favorite:
1. Trivago
Why Trivago chose a PWA
The hotel search engine Trivago aims to help travelers find accommodation seamlessly. With the rise in people using smartphones, Trivago decided to dive deep into the world of the mobile internet with the launch of a PWA.
Their team initially chose not to launch a PWA with the complete feature set, and instead focused on only the features that their users most valued: offline access, push notifications, and ability to add to home screen.
The result
- Trivago’s PWA is available in over 30 languages and 50+ countries
- Over half a million people added a Trivago shortcut to their home screen, causing website engagement to increase by over 150%
- Trivago was able to communicate with users through push notifications, resulting in a 97% increase in clicks on exclusive Trivago offers
2. Uber
Why Uber chose a PWA
As Uber began expansion into new markets, it needed to account for varying network speeds, devices, and ease of use. They chose to build a PWA (appropriately named m.uber and pronounced ‘moober’) that was easily compatible with all modern browsers, offering an app-like experience even for riders on basic cell phone devices.
The web app was essentially a shrunk-down version of their native app, enabling super-fast loading even on 2G networks.
The result
- The PWA checked in at a tiny 50kB
- Time to first byte reduced from 1.5s to 1.26s and time taken for page interactivity was reduced from 2s to 1.45s
- It takes only 3 seconds to load even on a 2G connection
3. Flipkart Lite
Why Flipkart chose a PWA
Flipkart is one of India’s largest e-commerce platforms. However, they had a unique challenge to overcome: over 63% of the Flipkart users accessed the website via 2G network, causing slow loading time and poor accessibility. Coupled with the fact that many of their users didn’t have space on their device for another app, Flipkart decided to introduce ‘Flipkart Lite’ — A PWA with the same experience as the native app, but without the strain on network bandwidth and device constraints.
The result
- The PWA Flipkart Lite was 100x smaller than the native Android app with the same functionality
- A massive 200% increase in the time users spent on Flipkart Lite vs. the native app
- The ‘Add to Home Screen’ icon was responsible for 60% of all visits to Flipkart Lite, delivering a conversion rate as high as 70%
- 40% higher re-engagement rate
Lowering the barrier, raising the bar: No-code PWA building tools
Drag-and-drop tools have revolutionised progressive web app building. As the name suggests, these tools run on an open-source platform, and allow you to arrange your dream PWA page like it’s a set of building blocks!
They've allowed regular non-coders and citizen developers to build exquisite platforms for ecommerce, content management, email marketing, and more.
Here’s a round-up of the top 4 no-code progressive web app building tools, including costs:
1. Panda Suite
Unique features
Aside from the adorable name, Panda Suite allows you to design web apps with a simple drag-and-drop style, embracing the ‘What You See is What You Get’ (or WYSIWYG) ethos.
Their library of gestures and components helps you create an interactive PWA with responsive and adaptive design. They have also received high praise for their promptness to support their customers through the design process.
Use cases
Their library of use cases features an impressively diverse set of categories, from the generic ones like sales, human resources, and marketing, to the more interesting — museums, eLearning, and interactive digital signage, to name a few.
Price to publish
$96 per month.
2. Thorium Builder
Unique features
Thorium is a powerful no-code tool that’s great for collaboration, and the projects manager feature allows you to keep track of all your work with ease.
The reviews highlight the database as one of the USPs of the tool, with a local SQLite database, access to a remote database with the JSON API REST plugin, and a ready-to-work implementation of Google Firebase.
Use cases
None listed on the website.
Price to publish
$89 one time fee.
3. Lumavate
Unique features
Lumavate is one of the leading no-code mobile app platforms for marketers.
You can use it to quickly build and publish progressive web apps with no code required. It is suitable for businesses of different sizes and industries, and apart from just marketing, you can use their solutions for registration and onboarding, service and support, and aftermarket revenue.
Based on their reviews, users seem to love the ability to track app engagement in real-time and publish updates instantly.
Use cases
Whether it’s financial services, manufacturing, ordering food, entertainment, sports, or healthcare — Lumavate seems to have covered all bases, and covered well!
Price to publish
$100 per month.
4. Bubble
Unique features
Bubble lets you create interactive, multi-user apps for desktop and mobile web browsers and includes, as the website mentions, the tools you need to build a site like Facebook or Airbnb.
Similar to other sleek, WYSIWYG tools, on Bubble you can design, develop, and deploy a web application all in one place, using an easy drag-and-drop visual editor and cloud-hosting service.
As one of the more credible and popular no-code PWA builders, Bubble is fairly critically acclaimed. Over 750,000 users have built and launched businesses on Bubble — and many have gone on to participate in top accelerator programs, such as Y Combinator.
Use cases
Bubble.io’s website boasts a variety of use cases ranging from simple prototypes to complex marketplaces, SaaS products, and more. They also have a handy little pricing plan where an agency can build apps for clients.
Price to publish
$115 per month.
⇒⇒ Learn more: Watch this workshop on doing responsive design in Bubble
How to get started quickly building your own PWA
While the list of tools we shared is by no means exhaustive, it should be enough to get you started on your own research for the right tool. Once you’ve got that covered, here’s a quick to-do list to get you going (starting is always the hardest part, isn’t it?):
- Find some inspiration: Choose an app that is the most similar to the idea you have, this way you can have a template to follow for features, components, and design. Make a note of the features and components you’d like to incorporate in your solution.
- Add in your team: Many platforms are designed for collaboration, so choose your team members and add them to your project. In case it’s a new tool, schedule some time for training so that everyone can get the hang of it.
- Map out delivery time: Based on how quickly you need to launch your PWA, we recommend you work backwards. Set a launch date (be ambitious, but not too ambitious!) and plan your time accordingly.
While native apps are not on their way out (as earlier predicted), progressive web apps built on no-code are putting tools in the hands of eager business-builders; opening doors to those with a vision, and the gumption to get their dream up and running.
And we’re here to say: keep building!