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 a development platform. 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/british24. 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?

Forefront of No-code Platforms

Webflow stands tall as a premier player in the no-code app builder sphere, boasting a noteworthy investment of over $120 million and a valuation of $4 billion. Its versatility facilitates the crafting of aesthetically appealing apps.

Freedom to Export Code

Distinguishing itself from many competitors, Webflow offers the capability to export the code. This means you can design in Webflow and opt for alternate hosting solutions. Opting for custom hosting can simplify the PWA transition. A significant challenge with Webflow regarding PWAs is its limitation on adding a service worker at the domain root, a crucial requirement.

Navigating Webflow's PWA Limitations

At Progressier, we address this by introducing a tailored domain resembling elonmusk.installable.app and a distinct installation page akin to install.page/british24. Just share the installation link with your audience. Upon installation, they essentially engage with our bespoke domain. This domain then either embeds or encapsulates your Webflow application.

Minimal Maintenance

As a tool for Webflow-based PWAs, Progressier stands out (although, I admit, I might be partial!). The setup is efficient with zero hassles on your end. As browsers evolve and introduce fresh PWA features, we seamlessly integrate these across all Progressier-utilized apps. Additionally, Progressier is equipped with a push notification system, empowering you to connect directly with your user base.

Scenarios to Reconsider Webflow & Progressier

The Imperative of Offline Functionality

If crafting an app with impeccable offline performance is your goal, Webflow might not be the best fit. Webflow's server dispatches Cache-Control and Access-Control-Allow-Origin headers when providing your app resources. Though this is a common practice, it restricts the back-end flexibility essential for leveraging a service worker to cache every resource without confronting CORS obstacles.

When Your Aim is Merely a Website

Progressier, and PWAs in general, are tailored more towards web apps than mere websites. While converting a website into a PWA isn't impossible, the value addition for both the owner and the users might be minimal. Plus, given that Progressier comes with a price tag, the benefits might not outweigh the costs.