Cant use PWA behind Cloudflare Tunnel

Hello everyone,

I use Cloundflare Tunnel to access my home-hosted services. This works without any problems for most of them. The services can be created as a PWA from the browser.

For some services (e.g. Vikunja and LinkAce) a own, separate nginx server is operated. These are also the services for which I cannot use PWAs via the Cloudflare Tunnel. When I call these services via the local IP, the PWA is created as desired.

So there seems to be a “security” problem somewhere between the Cloudflare tunnel and the nginx, which is why the PWA cannot be installed.

Can anyone help me further?

Best regards
Chris

Oh, and by the way. The strange thing is, on Windows the PWAs working fine over the Cloudflare Tunnel. Only on mobile phones (Android and IOS / Safari, Chrome, Brave) it isnt working.

Ive tested a bit further and figured out, that if i dont set a Cloudflare Access Policy, i can use the PWA on mobile phones.

Is there any way to configure Cloudflare Access wo work with PWAs?

I haven’t had an issue with any PWAs installation and usage so far with multiple different domains using Cloudflare.

So far, I always keep it simple:

  1. Have SSL
  2. manifest.json - lang, short_name, name, start_url, display, orientation, background_color, theme_color, prefer_related_applications (if you have Android/iOS app alongside for example), description, related_applications (only if you have list them), icons (32,48,57,60,64,72,76,96,114,120,144,152,192,196,512,maskable 192,maskable 512)
  3. service-worker.js on each web-page (home, inner …)
    has preload event, install event, cache for offline and cache for files (css,js,images , page…)
  4. It always offers me the “install” on Google Chrome, if not, then I tap/click the 3-dots and then there it is.

slika

Nowadays, are online PWA generators with even more stuff to add.

Is it pointed to localhost somewhere? :thinking:

Hello and thank you for your reply.

Unfortunately, I don’t understand much about points 2 and 3. I have not programmed the services myself. However, they do work as a PWA if I have not selected a authentication method in Cloudflare Zero Trust under the Access Tab. Then I can install them via the browser.

However, the PWAs with Cloudflare authentication only do not work if I run an extra nginx for the service. Services without an extra nginx can be installed with Cloudflare authentication enabled.