PWA's on webflow hosted sites?

I would love to have a go at some Progressive web apps. Am I right in saying we can’t add the required files like the manifest to Webflow? http://docs.pwabuilder.com/what/is/a/pwa/2018/02/03/pwa-min-requirements.html

I guess I am fishing for some CMS driven PWA solutions that webflowers have has success with?

Cheers

1 Like

I also look forward to answers on the question

Okay I have built a couple of PWAs with webflow but only by exporting code, hosting elsewhere and connecting to another database for dynamic updates. It is still a good/okay solution. However it would be amazing to simply be able to “turn on PWA” as a hosting add on. This is not crazy difficult and I am sure the team at Webflow could do it and have probably chatted/plotted about it already. The challenge is that Webflow have a lot that they want to do and that their users implore them to do. Remember we want them to add new features while keeping the same quality they have provided to date. This means that regardless of the size of their team they can only do so much each quarter. I would like integrated PWA feature but there are a dozen other things I would also like, so though I vote strongly for this feature I am pragmatic enough that I don’t think it will not be any time soon.

It can be voted for here! :slight_smile:

https://wishlist.webflow.com/ideas/WEBFLOW-I-1422

Hey guys, check out this method to make a Webflow PWA easy with 1 line of code here

2 Likes

Not all heroes wear capes, you sir, deserve one.

So no offline with this Nick? My initial goal was an offline tourism app for remote locations with no signal.

I think working off line has to do with the Service Worker. Which now that I’m thinking about it, maybe we can link that too?!

I haven’t linking the Service Worker yet, but the manifest at least makes it “feel” like an app.

But yea, in your case, you def need offline access. But I don’t think maps would work offline even with the Service Worker (if thats what you were going for)

Nick, your link is 404.

1 Like

The link is not working

1 Like

Hello lain_Brady,
Could you tell us the solution to this if you still have it, Nick’s link is not working now! :pensive:
Any help would be really great!
Thanks

I don’t have access to that site anymore so this is all from memory and piecing random bits of information together…

You need to create a manifest.json, I think I used https://app-manifest.firebaseapp.com and upload the .json to a hosting site (I used GitHub).

Then in the head tag you point to the file and define the PWA using the following code

<link rel="manifest" href="https://raw.githubusercontent.com/--yourGitHubAccount--/--YourFileLocation--/manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Does any of that make sense?

1 Like

This makes a lot of sense, Thanks for the info Iain!

Hi there Iian.
I did everything but the manifesto.json does not appear on the published website.
Can you be more specific on how that code should be put in head tag?
Thanks

Hey, link doesn’t work, can you update it?

If anyone is still interested in this, I built a solution for turning your Webflow app into a PWA. It does come with a few limitations, but other than that it works pretty well. The product essentially builds a wrapper around your app with the PWA functionality.

The only thing that would be missing in Webflow to turn your domain itself into a PWA the traditional way would be for Webflow to allow their users to upload a file to the root of their Webflow domain (to create a service worker). Bubble.io has that option. Hopefully, Webflow will allow that soon as well!

Just adding on here in case anyone looks at this in the future. I’ve come across a solution for making a simple PWA with Webflow. It doesn’t allow for any of the fancy service-worker stuff (allowing your PWA to run offline), but this will allow you to save your PWA to your home screen on mobile.

Go to this site and generate a manifest file for your PWA. This article is a good place to learn about how to fill out your manifest file.
https://www.simicart.com/manifest-generator.html/

Open the manifest .zip that site gives you. Then take all the icon sizes it provides and upload it to the asset manager in Webflow. Now open the ‘manifest.webmanifest’ file in a code editor and in all the spots in the code where it has an SRC for the icon, replace those with the corresponding links that were generated in Webflow when you uploaded the assets.

Save that manifest file with a different file extension - "manifest.txt". Then upload that to the asset manager in Webflow and copy the file link it provides you.

Now go to your Global Site Settings Header Code and paste in the following:

<!--Load PWA Manifest json-->
<link rel="manifest" type="text/json" href="paste-your-manfest-txt-link-here">

The key here is that we added type=‘text/json’, which tells the browser to load your txt file, but read it as a JSON file.

From here, you should be good to go! Open your site, and if you’re on iOS, click the share icon, then Add to Home Screen. Haven’t tested this on Android, but assume it works similarly there as well.

2 Likes

Just posting a solution to this since Nick Harris’ link died:

  • In the header of your Webflow site, you can add a manifest inline, e.g:
    <link rel="manifest" href='data:application/manifest+json,{ "name": "longName", "short_name": "shortName","icons": [{"src": "/placeholder.png", "type": "image/png", "sizes": "512x512" }], "start_url": "index.html/?source=pwa", "display": "standalone", "theme_color": "\u0023000000"}' />
  • Having a manifest makes your website “installable” like an app on iOS/Android (and some desktop devices).
  • You can sub out things like the theme colour (last six digits are the hex code), and src images for app icons etc. If the app icon doesn’t work, it’ll fall back to the favicon on most devices.
  • I have not found a solution to service workers yet. Looking at this and will update if I find anything!
1 Like

Reverse proxy it. As far as I know the service-worker.js file must be under the same origin, so there is no way to create that via assets, or by uploading it to another host. By default scope is defined by the path of the worker script, so ideally you want it right at the root, e.g. /service-worker.js.

I’m curious though what types of problems here is everyone trying to solve with a PWA? Offline caching? Push notifications?