Turning your Bubble app into a PWA
In this quickstart guide, I'm going to tell everything you need to know about making your Bubble app an installable PWA — with push notifications and partial offline support.
Getting started with Bubble & Progressier
-
1Sign up to Progressier
Create a Progressier account or sign in, choose Bubble when asked for How was your app built? and activate your free trial.
-
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.
-
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.
-
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.
-
5That's it!
Now, your app should be installable! You also get a link to a unique install page that looks like this: install.page/covid. Share it with your users or customers so they can install your app.
Under the hood
Progressier generates all the assets required by browsers to make your app installable across devices. This includes an app manifest, a service worker, custom iOS icons, custom iOS splash screens for every iPhone and iPad screen size, and 44 unique meta tags. Progressier also saves and manages push subscriptions for you and automatically syncs them with your Bubble user data.
Which PWA features does Bubble support?
Android Installation
Your Bubble PWA is installable on Android tablets or smartphones in a click.
iOS Installation
Let users add your Bubble PWA to their home screen with our custom iOS install prompt.
Windows Installation
Your PWA can be installed from Chrome and Edge to your users' Desktop and/or Taskbar.
macOS Installation
Progressier helps users add your Bubble PWA to their Docks for quick access.
Chrome OS Installation
Progressier is also a great solution to get your app installed on Chrome OS.
Install Page
A beautiful single-purpose page to send to your users as a direct link to install your Bubble PWA on their device.
Original Domain Installation
Your Bubble PWA can be installed from your existing domain.
Web App Manifest
Progressier generates a web app manifest for you based on your preferences automatically.
Service Worker
A service worker is a file that runs independently from the main browser thread and that allows to define how to cache and refresh resources. It's also the mechanism by which push notifications can be delivered to a user who's not on your site. Progressier lets you customize the service worker in details without having to write code.
Cache Static Resources
Progressier lets you build caching strategies without writing code so you can easily cache resources and make them accessible offline.
100% Offline-Ready
Without full server-side control over the resources, it's not usually possible to make a site work offline entirely with a no-code app builder like Bubble.
Push Campaigns
Send push notifications to up to 1,000,000 users in one go within the Progressier dashboard or via the API.
Personalized Notifications
Send notifications to any particular user manually or programmatically. All your need is their email, their user ID or any other information that identifies them in your system.
Connect User Data
Link user data like emails, names, status to push subscriptions, so you can easily notify someone from your product directly or from our dashboard.
In-App PWA Promotion
A set of tools that allow you to promote installation of your PWA within the body of your app, including custom install buttons and floating action buttons.
Offline Alerts
Let users know when they lose their Internet connection.
Push Prompt on Standalone
Prompt users to allow push notifications right after they have installed your app. Less intrusive = better conversion rate.
Install & Push Analytics
See in real-time and track over time how users install your PWA and allow push notifications.
Programmatic PWA Creation
Create new Progressive Web Apps dynamically with our API on different domains or subdirectories.
Google Play & App Store Upload
Easily upload your app to Google Play or the App Store with our PWABuilder integration.
What they're saying
Why choose Bubble and Progressier for your PWA?
Among all the no-code app builders we support, Bubble is the one that offers the most possibilities. For starters, Bubble lets you upload custom files to the root of your domain. Bubble supports our service worker file, which allows for a deeper PWA integration.
Our Bubble plugin enables you to send push notifications from any workflows. No integration needed, just plug-and-play. In about half of all Bubble apps, we automatically sync the email of the active user with their push subscription right out of the box. So you won't have to find ways to integrate our client-side API. Even when it's not possible, the workaround doesn't take more than a few minutes.
If you use Bubble, you obviously see the value of not having to write code. And I bet you also value moving fast. PWA implementations are probably one of those things that you shouldn't do yourself. To make a PWA work perfectly across devices and browsers, it's a ton of testing and lots of weird browser quirks to overcome. You'll also need to be constantly on the lookout, just in case Google or Apple make breaking changes.
In August 2021, Google almost made a decision that would have broken most apps by forcing PWA developers to implement perfect offline. As it turns out, true offline is pretty hard to do. And unfortunately, as of now, it's pretty much impossible with Bubble.
Oh, and how about offline & caching...
With Bubble, offline support is only partial. That said, it's still more than most other no-code app builders. Caching static resources is generally easy, but caching data retrieved from the Bubble server is not possible, due to the way it's structured in Bubble.
The only real way to support true offline is by developing the app with code yourself — and by having as much server-side control as possible over the resources that your app loads. CORS makes the process extremely difficult otherwise.
Ready to turn your Bubble app into a PWA?
Try our PWA builder free of charge for 14 days. No credit card required.
Get started See plans