What are PWAs, and how to build them with Bubble?

In my previous article, I discussed the differences between web apps, PWAs, hybrid apps, and native apps. Today, let's dive deeper into PWAs, understand their technical aspects, and how we can build them with Bubble (I will pick up more topics around building PWAs and hybrid-native apps with Bubble in the coming weeks - stay tuned).

Progressive web applications (PWAs) have become increasingly popular over recent years. Unfortunately, much of the information online about them is either superficial or inaccurate, leading to confusion about what PWAs are and what they can do.

PWAs are essentially websites that behave like mobile apps, utilizing web development technologies such as HTML, CSS, and JavaScript (or Bubble🥳). They allow developers to create web applications that look and feel like native mobile apps, without requiring end-users to download software from an app store. PWAs can be installed on a user's phone directly from a mobile browser, bypassing Apple or Google's app store policies and approval processes, thus making shipping much faster. Also, we can charge a user using Stripe, etc., and don’t have to go through the expensive Apple and Google in-app payments.

While any website (or Bubble app) can be added to a home screen on iOS and Android devices, if an app doesn't have any PWA features, it will simply be a bookmark with an icon - although Bubble even allows us to let it open in full screen. To tap into native features, PWAs leverage two key technical elements: Service Workers and Manifest files.

A service worker is a JavaScript file that runs in the background of a web application, providing advanced functionality such as offline support, background synchronization, and push notifications. This means that even if the user loses internet connectivity, the app can still function to some extent, allowing for a better user experience.
A manifest file, on the other hand, provides metadata about the web application, including its name, icon, and startup URL. This information allows the web application to be installed on a user's home screen, providing a more app-like experience. It also allows the app to take advantage of some of the device's native features, like push notifications and offline support.

This technology allows us to build some native features, including natively prompting users to install an app, push messages (Android only, iOS coming soon), offline capability (not recommended for most apps), and background synchronization (Android only). As you can see, iOS is usually more restrictive than Chrome and Android regarding PWA features.

So, how can we build it? There are two options to create such advanced PWA features for our Bubble app: Write a bunch of code (not recommended if you don't know JS very well) or use 3rd party no-code tools like progressier.com, which comes with a Bubble plugin.

If you want to learn more about this, check out my free videos:

That’s it. Keep it simple!

Damian

👉 twitter.com/DamianJanzi

👉 academy.bubblehacks.io

👉 bubblehacks.substack.com

👉 bubblehacks.i