Want your Webflow website to feel like a mobile app? You need a Progressive Web App, or PWA. A PWA lets users add your site to their home screen, work offline, and load instantly.
This guide shows you exactly how to turn any Webflow site into a PWA, even though Webflow does not support it natively.
Who is this for?
Webflow users who want to improve their mobile experience without building a separate app.
Does Webflow Support PWA Natively?
No, Webflow does not natively support PWA features.
This means Webflow does not automatically generate the two essential files you need:
- A manifest.json file
- A service-worker.js file
You have to create and add these files yourself using custom code. It sounds technical, but it is completely possible.
What Do You Need to Build a PWA on Webflow?
To make your Webflow site a PWA, you need two core components.
Web App Manifest (manifest.json)
This is a simple JSON file that tells the browser about your app. It controls how your app appears when installed on a device. It defines things like:
- The app’s name and short name
- Icons for the home screen
- The start URL when launched
- The background and theme colors
- The display mode (e.g., fullscreen)
Service Worker (service-worker.js)
This is a script that runs in the background, separate from your webpage. It is the engine that powers advanced PWA features. A service worker can:
- Cache files for offline use
- Handle push notifications
- Enable fast loading on slow networks
How to Add a Manifest File to Webflow
You need to host your manifest.json file and link to it in your site’s <head> tag.
Step 1: Create your manifest.json file
Create a new file and name it manifest.json. Paste the code below and customize the values for your project.
{
"name": "My Awesome Web App",
"short_name": "MyApp",
"description": "A description of my awesome app",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "https://uploads-ssl.webflow.com/.../icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://uploads-ssl.webflow.com/.../icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Step 2: Host your manifest file
You cannot directly upload JSON files to Webflow. You must host your manifest.json file elsewhere. Good options include:
- Your own web server
- A GitHub repository
- A cloud storage service like Google Drive or Dropbox (with a direct public link)
- A CDN like jsDelivr
Step 3: Link the manifest in Webflow
- Go to your Webflow Project Settings.
- Navigate to the Custom Code tab.
- In the Head Code section, paste this line (replace
YOUR-MANIFEST-URLwith the direct public link to your hosted file):
<link rel="manifest" href="YOUR-MANIFEST-URL/manifest.json">
- Publish your site.
How to Add a Service Worker to Webflow
Adding a service worker is the most technical part. The service worker file itself must be hosted at the root of your domain (e.g., yoursite.com/service-worker.js). Since you cannot upload arbitrary files to Webflow’s root, you need a workaround.
The best method is to use a third-party service or a reverse proxy.
One common and reliable method is to use Cloudflare Workers. You can set up a Cloudflare Worker to intercept requests for /service-worker.js and serve the actual service worker code that you have stored elsewhere.
A simpler alternative is to use a third-party integration that handles this for you.
Basic Service Worker Example
Here is a simple service worker code for caching. You would use this as the basis for your file hosted on Cloudflare or another service.
// Cache name
const CACHE_NAME = 'my-site-cache-v1';
// Files to cache immediately
const urlsToCache = [
'/',
'/styles/main.css',
'/scripts/main.js'
];
// Install the service worker and cache the files
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(urlsToCache);
})
);
});
// Serve cached content when offline
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Return the cached version or fetch from network
return response || fetch(event.request);
})
);
});
Step 4: Register the Service Worker in Webflow
Finally, you need to tell the browser where to find your service worker. Back in your Webflow Project Settings > Custom Code > Head Code, add the following script:
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('ServiceWorker registration successful');
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
});
});
}
</script>
What Are the Best PWA Solutions for Webflow?
Because this process is complex, many people use third-party tools to simplify it.
- FinSweet is a trusted resource in the Webflow community. They offer detailed tutorials and tools that can help automate parts of this process.
- Cloudflare Workers are a powerful and flexible way to host your service worker logic at your site’s root domain.
These tools provide a more streamlined path than building everything from scratch.
What Are the Limitations of a Webflow PWA?
The main limitation is that it is not a native feature. You are building it yourself. This means:
- Setup is technical: You need comfort with code and external hosting.
- Maintenance is on you: If you update your site, you may need to update your service worker cache rules.
- Advanced features like push notifications require even more complex setup.
Conclusion
You can absolutely turn your Webflow site into a Progressive Web App. While Webflow does not do it for you, the process is achievable by adding custom code for a web manifest and a service worker.
