Turning your Bubble app into a PWA

Getting started with Bubble & Progressier

1. 

   1Sign up to Progressier

   Create a Progressier account or sign in, choose Bubble under Development Platform, and activate your free trial.

2. 

   2Add the Progressier script to your Bubble app

   Open your Bubble dashboard and go to Settings > SEO/metatags. Scroll to Advanced settings and next to Scripts/meta tags in header, paste the code provided in the Progressier dashboard.

3. 

   3Add the service worker to your Bubble app

   The Progressier dashboard also provides you with a service worker file. Simply download it and upload in your Bubble settings under Hosting files in the root directory.

4. 

   4Get the official Progressier plugin (optional)

   If you want to send personalized push notifications, download our official Bubble plugin. With the plugin, you can send notifications to users in a Bubble workflow.

5. 

   5That's it!

   Now, your app should be installable! You also get a link to a unique installation page that looks like this: install.page/covid. Share it with your users or customers so they can install your app.

Which PWA features does Bubble support?

Why choose Bubble and Progressier for your PWA?

Choosing Bubble and Progressier for your PWA offers distinct advantages. Among all the no-code app builders we work with, Bubble is unrivaled in its potential. Notably, Bubble permits the direct upload of custom files to your domain's root. This compatibility extends to our service worker file, ensuring deeper PWA integration.

Our Bubble plugin enables you to send push notifications directly from any given workflow. No integration needed, just plug-and-play. In many Bubble apps, there's an automatic sync between the active user's email and their push subscription, which means you don’t have to manually integrate our client-side API. And on the rare occasions that direct syncing isn’t feasible, the workaround doesn't take more than a few minutes.

If you're a Bubble aficionado, you're undoubtedly captivated by the speed and simplicity of a code-free approach. But PWAs, while profoundly beneficial, aren't without their challenges. Perfecting a PWA that operates smoothly across all browsers and devices demands rigorous testing, not to mention the task of circumnavigating the peculiarities specific to each browser and continuous adaptability, especially with tech giants like Google or Apple at the helm.

For example, in August 2021, Google almost made a decision that would have broken most apps by forcing PWA developers to implement perfect offline functionality, a feat that, for now, remains elusive for Bubble.

Oh, and how about offline & caching...

On the topic of offline functionality and caching, it's worth noting that Bubble's offline support, while limited, outpaces many of its no-code counterparts. Caching static resources is relatively uncomplicated; however, caching data sourced from the Bubble server is a different story, owed mainly to its inherent structure. If absolute offline capabilities are your goal, it's a venture best undertaken with coded app development, placing a premium on having robust server-side control over app resources. The challenges posed by CORS only add to the complexity.