PWA tools

Progressive web apps (PWAs) are an extremely quick way to turn a website into something that functions a little more like a mobile app. If you decide to go all-in with PWAs, you can install them as you would a regular app, use them offline, and upload them to App Stores (not the Apple App Store though!).

In this case, we're looking at using PWA files to extend a Webflow site to behave more like an application. The "Try Galaxy on your iPhone" campaign from Samsung is a great example of using a PWA to prototype a real experience.

To be able to turn any Webflow site into a PWA (or at least partially), you'll need to export the site and host elsewhere (as a result, no CMS, memberships or e-commerce). This is because we'll need to add a series of new files to our site's root folder. This includes:

• A web manifest for browsers to be able to understand that the site behaves more like an app (therefore can be saved full-screen without browser chrome).

• A service worker to be able to run (at least portions of) the site offline, and to issue background notifications as if the PWA were a real app.

There's about a million and one hosting providers out there, but Netlify tends to be the simplest to set up and use for small projects. Best of all, it's got a cracking free tier.

Luckily web manifests are reasonably simple. Throw in some site details, add an icon and you're more or less good to go. Some extra fields to be aware of:

• A web manifest for browsers to be able to understand that the site behaves more like an app (therefore can be saved full-screen without browser chrome).

• A service worker to be able to run (at least portions of) the site offline, and to issue background notifications as if the PWA were a real app.

Once you're done, add a link to the file in your site's header, and drop it into your root folder when you export from Webflow.

An example web manifest - download

Service workers are a little more difficult, since you can programme all sorts of offline functionality and notifications with them.

For specifying content to be stored offline, the quickest way to generate one of these files is via a service like PWABuilder (open-source, started by Microsoft).

Similarly after you finish, add a link to the service worker in your site's header, and drop it into your root folder when you export from Webflow.

Coming onto notifications, this one' needs some more nitty gritty to work. See https://medium.com for a good read on this!