Hosting a PWA Over IPFS

Hello, I had a question about hosting a progressive web app over IPFS. Not sure if anyone’s tried this before, but I started using the Vite PWA (Astro | Examples | Vite PWA) and learning more about service workers.

The second of those two examples I linked I built locally and observed proper PWA behavior after building and previewing the project. Then after adding the dist directory to IPFS and pinning it using Gateway3’s free service, I tried navigating to it using https://.ipfs.gw3.io and the index page renders but no service worker gets registered and there’s no install PWA option in the browser.

Might someone be able to shed light on why there’s this discrepancy and if hosting a PWA over IPFS is possible?

It’s definitely possible to publish PWAs to IPFS.

Can you please share the CID of the PWA you deployed?

Things to be aware of:

Hey! Thank you for your reply, and apologies for my delay, was a busy week and wanted to tidy things up a bit before sharing to make finding a potential answer as smooth as possible.

I pushed a repo with src files I’m building from with the Vite-PWA built in; it’s very rough: GitHub - AustinFoss/astro-spa-template

After running pnpm i && pnpm build you can then use ipfs add -r dist/ to generate your CID locally which should currently produce this out put from the current mast branch:

added QmQxj8Y7poii6VuhayCH1DzbFJamrfGvbr3fRj8akgbPNN dist/_astro/NumberCounter.ddaac6e7.js
added QmXyvsnbXG9BqQfK1KZuLrUJCuv8qZvmTKQndK9BARZnUv dist/_astro/about.ab87a674.css
added QmVRBoeBoXkC9zKKy3VEgvhW1BeMcPTRDPJsBm9Wg4PU7e dist/_astro/client.ef651e53.js
added QmcYp2Cbm91Q31RMkhfyPpVPEJKn3HCcQeW7UcTfXhdotq dist/_astro/hoisted.83a46ac8.js
added QmTmhHayjJATQHhpa7PNEkAeYX3LLW81UckhMKXbSptTRu dist/_astro/workbox-window.prod.es5.a7b12eab.js
added QmdkbADWhztrEjKk9U8Qk2vGMibfHbWukGAnPd168HZJ18 dist/about/index.html
added QmZfkqwsZuPmPVPK6ZGq5xor97D8hi3QsuWQPrz6ABE47p dist/favicon.ico
added QmZjMW6GHvkL9h1bshzXRGg9ff7cqhWHWb5TyqEsP5bkHa dist/favicon.svg
added QmS44hwmUY7hoRKoTbfQgYUHCimGNzgsamaWUsLRVY45zj dist/index.html
added Qme4cfypvpX42nmSLRp2ki1UaZgNDc2eKMYTj2qfpDiPEb dist/manifest.webmanifest
added QmNrCeGaXUr1JKyukkDnrNZEzhyQimBpuN2KyXSgEvLmQM dist/pwa-192x192.png
added QmNzmgV6KozG5yeX5b5aHJKyUwAi7qQ25eDm9jrmFegmVy dist/pwa-512x512.png
added QmbU7UTKs3rES2cUJz8brpryifn9wPz8PgYPBHuFTjd1Yp dist/registerSW.js
added QmZxX6rtNN7VJnuPS8ir4EctYbQ3vk7XrqQWSnnQzwY7Wt dist/robots.txt
added QmV7iLapFan439LWARZXZ65UQ8V8frSXVaS9KV5CwPTEca dist/sw.js
added QmSw9MQJrDgc2PUAbfsMMPqriz4DenwNdTwQ4juPattGoV dist/workbox-fc5f5acf.js
added QmZP719QbQrVHUe7WdybzY3XEnH65GQBo7K39ddVLWvY4T dist/_astro
added QmaHgHVov1UqZRMBJvDneuTCWHRV8HS8GPFJdiB6Kqxx5S dist/about
added QmTGx5iX3YmfHhhg6ZWPa6Ge3UKBPrWPD8HiK4P6SCSoAe dist

When signed into my gw3.io account and given the option to upload a folder instead of a CID for pinning it produces this CID: bafybeihlgg2jvdijlwhhcsnbfzubjiymuipm24bss6ilam2d4obflh5c6q

So when navigating to “bafybeihlgg2jvdijlwhhcsnbfzubjiymuipm24bss6ilam2d4obflh5c6q.ipfs.gw3.io” I would expect to get the same PWA behavior as when that same dist folder is published using traditional https, I’ve hosted this temporarily at my own domain here “pwa.labadappt.com” .

When viewing that dist folder over https I get the desired offline PWA behavior but when viewing through an SSL secured ipfs gateway that isolates CIDs into subdomains PWA behavior doesn’t appear to be available.

Thank you very much again and I do appreciated any insights as to why PWA behavior is being blocked here.

You know what, I may have to retract what I was saying because I think it’s working now with Cloudflare’s ‘cf-ipfs.com’ gateway: https://bafybeihlgg2jvdijlwhhcsnbfzubjiymuipm24bss6ilam2d4obflh5c6q.ipfs.cf-ipfs.com/

My reason for using gw3 as my pinning service was it’s the only I came across, may be mistaken, who offered a free tier but also provided a CID sub-domain gateway. Every other service, even though a free tier was advertised still asked for payment info up front. Even though gw3 is listed as a sub-domain gateway on the IPFS status page (Public Gateway Checker | IPFS) they seem to redirect those subdomains to a much longer url and my original link now seems to be blocked with a “permission” error of some sort.

Cloudflare, even though they won’t pin it for me without payment info for their free tier, picks up the pinned dist folder from gw3’s node and provides proper sub-domain isolation without a subsequent redirect. Now I seem to have the expected offline PWA support from that gateway.

Although I’ve not had to do any further modifications to my PWA deployment to get it working through CF’s gateway, I would be curious to know more about the redirects and custom 404s link you referenced previously in case it becomes relevant later.

1 Like

For a list of pinning services see: Persistence | IPFS Docs

For redirections, check out Redirects and custom 404s | IPFS Docs