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.

3 min95% compatible
Bubble Logo
Cover image for Turning your Bubble app into a PWA

Getting started with Bubble & Progressier in 5 easy steps

  1. Illustration screenshot for Sign up to 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.

  2. Illustration screenshot for Add the Progressier script to your Bubble app

    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. Illustration screenshot for Add the service worker to your Bubble app

    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. Illustration screenshot for Get the official Progressier plugin (optional)

    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. Illustration screenshot for That's it!

    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.

"We had developed some PWAs in-house. Then... we tested Progressier. The very next day, we moved all our PWAs to Progressier. Fast, simple, well documented, Progressier covers all needs in PWA development. Intrepid and responsive support, always available to accommodate new requests."
Photo of Achille D'Aniello Achille D'Aniello CEO @ Komunica
"I went looking for a simple way to create a progressive web app for our users. After spending a few hours trying to figure this out on my own, I stumbled upon Progressier on Twitter. I had a PWA ready to go for my app in minutes, giving me exactly what I needed. Super simple for users to implement!"
"Progressier is very easy to use. The integration with my product was quick and simple."
Photo of Antonio Carlos Amaral Antonio Carlos Amaral CEO & Founder @ Mabuya Tech
"I'm a first-time, non-technical, no code SaaS developer, and Progressier has been a critical no code tool for me to extend my web app as a PWA."
Photo of Benjamin Hillman Benjamin Hillman Bubble Developer
"Progressier is perfect for startups that don't want to waste time on tracking, web push and service workers."
Photo of Kilian S. Kilian S. CTO in Austria
"If you want to turn your web application into a PWA but have no idea or desire to learn how to code for it, Progressier makes it as easy as possible."
Photo of Joel S. Joel S. Software Engineer in Belgium

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.

Your app here

Get started

Ready to create a PWA with Bubble? Get a universal installation link today with our delightfully simple PWA toolkit.

Get started See plans