Creating a PWA with Webflow

In this quickstart guide, I'm going to tell you everything there is to know about turning your Webflow app into an installable PWA with push notifications — including what the limitations are.

4 min60% compatible
Webflow Logo
Cover image for Creating a PWA with Webflow

Getting started with Webflow & Progressier

  1. Illustration screenshot for Connect your Webflow domain

    1Connect your Webflow domain

    Open your Webflow Dashboard and go to the Settings of the app you want to make a PWA. Navigate to Hosting > Custom Domains. There, you'll have to follow Webflow's instructions to connect your domain (if you haven't yet).

  2. Illustration screenshot for Allow embedding

    2Allow embedding

    Still in your Webflow dashboard, once your domain is connected, scroll to Hosting > Advanced Publishing Options and make sure Use Secure Frame Headers is off (it should be off by default).

  3. Illustration screenshot for Sign up to Progressier

    3Sign up to Progressier

    Create a New PWA, choose Webflow in the dropdown menu when prompted to select how your app was built. Then sign up for an account, and activate your free 14-day trial.

  4. Illustration screenshot for Upload a logo

    4Upload a logo

    Upload the logo of your app. Progressier takes care of resizing it and creating all necessary assets, including your splash screens, app manifest and service worker.

  5. Illustration screenshot for Get your install link

    5Get your install link

    Progressier provides you with 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

Webflow works a bit differently from most other no-code app builders. The difference with say, Bubble, is that Webflow does not allow you to directly add a service worker to the root of your domain. So with Webflow, instead of directly making your domain installable, we create a wrapper around your app that contains the entire installation and push functionality.

Which PWA features does Webflow support?

Android Installation

Your Webflow PWA is installable on Android tablets or smartphones in a click.

iOS Installation

Let users add your Webflow 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

Get your app installed on macOS from Chrome — Progressier walks users through installing your PWA to their Docks.

Chrome OS Installation

Progressier is also a great solution to get your app installed on Chrome OS.

Install Page

An app-store like installation experience for your PWA — without the hassle of managing Google Play/App Store listings.

Original Domain Installation

Due to the limitations of the platform, it's not possible to install your app as PWA from your own domain. Progressier provides an alternative custom domain for installation purposes that looks like elonmusk.installable.app.

Web App Manifest

Progressier builds a PWA manifest with your preferences set in the dashboard, with toggles and inputs instead of lines of code

Service Worker

A service worker is a file that continues running in the browser even after the web page that has registered it has closed. For a domain to be a PWA, it must have a service worker hosted at the root. Unfortunately, Webflow does not support adding a service worker to your domain.

Cache Static Resources

This platform doesn't provide an option to modify the service worker file, so it's not possible to cache static resources.

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 Webflow.

Push Campaigns

Notify all your users of news in your app with our dashboard and/or API. Progressier manages all user push subscriptions for you.

Personalized Notifications

Other app builders allow you to send notifications to a particular user. It's not currently possible with this platform.

Connect User Data

With Webflow, it's not currently possible to sync your user data (e.g. emails, names or account types). Bubble is the best no-code option for that.

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

In-app alerts displayed when users lose network connectivity. Not available with Webflow.

Request Notifications After Installation

Prompt users to allow push notifications right after they have installed your app. Less intrusive = better conversion rate.

Install & Push Analytics

Progressier tracks installs of your Webflow PWA over time. Also tracks push subscriptions.

Programmatic PWA Creation

Create Webflow PWAs programmatically with our API.

Google Play & App Store Upload

Since Webflow doesn't allow their users to install PWAs from their own domain, it's not possible to make it available through Google Play or the App Store as a PWA.

Why choose Webflow and Progressier for your PWA?

Leading no-code builder

Webflow is arguably the leader on the no-code app builder market, having raised more than $120 million at a $4 billion valuation. The flexibility of the tool allows you to create beautifully-designed apps.

Code exports

Unlike many of its rivals, Webflow allows you to export code. So you could design your app in Webflow and later decide to host it somewhere else. Custom hosting your Webflow-created app will substantially simplify the process of making it a PWA. The main limitation with Webflow when it comes to creating PWAs is that the platform doesn't allow you to add a service worker to the root of your domain, which is an essential browser requirement.

Only solution to create a PWA with Webflow

With Progressier, we overcome this by creating a custom domain that looks like elonmusk.installable.app and a custom install page that looks like install.page/covid. Send a link to your install page to users. When they install your app, they actually install our custom domain. Our custom domain then either embeds or wraps your Webflow app.

Low maintenance

Progressier is the best tool for creating PWAs with Webflow (I'm biased though!). The process is quick, and there's nothing for you to manage. Whenever browser vendors add new PWA functionality, we add it to all apps that use Progressier. Progressier also comes with a push service, meaning you'll be able to send push notifications to all your users.

When you shouldn't use Webflow & Progressier

If you need offline

If you're building an app that must work offline perfectly, you probably shouldn't use Webflow. It just isn't the right tool for the job. The Webflow server sets Cache-Control and Access-Control-Allow-Origin headers when serving your app resources. And while that isn't abnormal per se (every server does this), this takes away the flexibility you need server-side to cache every resource using your service worker without running into CORS issues.

If you're building a website

Progressier, and Progressive Web Apps, are really more for web apps, rather than just websites. While you can still technically make a website a PWA, it will be of little value to you or your users. And Progressier isn't a free solution, so it probably won't be worth it.

Your app here

Ready to turn your Webflow app into a PWA?

Try our PWA builder free of charge for 14 days. No credit card required.

Get started See plans