Turn your Bubble App into a Mobile App/PWA in 3 Minutes



Augment your Bubble.io app with PWA installation, push notifications & offline


Watching this Video will take Approximately: 

3m 12s

Reading this lesson will take approximately: 

3m 12s

The Original Source of this content may include additional useful information or context, and will likely contain links to any content, templates or resources mentioned by the narrator. You can find visit the source below:

Lesson Content:

Make your Bubble app a PWA in 3 minutes

Augment your Bubble.io app with PWA installation & push notifications

The backstory

In January 2020, I gathered a couple of friends and together we built — on a hunch — the very first COVID-19 app, modestly entitled coronavirus.app.

It quickly exceeded all our expectations, and a few months later, over 15 million people around the world were regularly using it basis to track the spread of the epidemic.

Because timing was crucial to the success of such an app, we built it as a Progressive Web App. And as it turned out — and without really realizing it — we were building a pretty kick-ass PWA implementation.

So we took that PWA implementation, made it a standalone product, called it Progressier, and made it available to anyone who needs it.

Today, Progressier is finally available to anyone who is building apps using Bubble.io.

Why do I need this in my Bubble app?

If you’re using Bubble, chances are that you value building things quickly more than anything else. You probably want to spend as little time as possible figuring out how different browser vendors implement certain PWA features, or why your PWA might break in August 2021.

It’s never been faster to build apps than with Bubble

The whole block of functionality that comes with Progressive Web Apps (push notifications, installation, etc) is a great user-experience add-on.

While it may seem easy to build at first, it actually requires a substantial effort. And worse yet— you won’t simply be able to directly build these features in Bubble. You’ll have to build them as separate entities and add them back to your Bubble app. In 99.99% of cases, that’s not going to be worth your time.

All you have to do with Progressier is add it to your existing Bubble app, and all that functionality will be available right out of the box. Start your clock now — it should take you less than 3 minutes.

How to make my Bubble app a PWA

  1. Create an account at Progressier, then choose “Bubble” under Website builder
  2. Open your Bubble dashboard and go to Settings > SEO/metatags.

Note: while you can use Progressier free of charge, you may have to upgrade your Bubble account to use some of the features under SEO /metatags

3. Scroll to Advanced settings and next to Scripts/meta tags in header, paste the code snippet we provide you in the Progressier dashboard.

This script automatically creates an app manifest, generate all required logos & splash screens, handles push notifications, and generates a bunch of cool analytics.

4. A PWA requires a service worker. Download the file we provide in the dashboard, go back to Bubble, scroll down to Hosting files in the root directory, name the file progressier.js and upload the file you just downloaded from Progressier. Finally, click Save.

You’re done! Your Bubble app is now installable (yes, even on iOS). And you can segment users and send them notifications right now. Best of all, that was a one-time effort. You won’t need to worry about what new features browser vendors may implement in the future. With Progressier, you always have the best possible PWA implementation available in your app.

Tools used in this Tutorial