Creating a PWA with Webflow

Getting started with Webflow & Progressier

1. 

   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. 

   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. 

   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. 

   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. 

   5Get your install link

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

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 installation page that looks like install.page/covid. Send a link to your installation 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.