Blazor PWA breaks if hosted on Cloudflare Pages due to redirected index.html

[andreimilto]

Brief Description
An attempt to host a Blazor PWA on Cloudflare Pages results in broken service-worker: the website won't load after the first visit, installed PWA will display an error on start. The root of the problem seems to be the redirect of index.html. The problem may not be specific only to Cloudflare Pages, but to any host that redirects requests to the index page.

Example

1. Create a .NET 5.0 Blazor WebAssembly Progressive Web Application from the standard project template: https://github.com/andreimilto/CloudflareBreaksBlazorPwa/tree/main/src.
2. Publish to a folder (settings: release, net5.0, self-contained, browser-wasm, trim unused assemblies, delete all existing files prior to publish): https://github.com/andreimilto/CloudflareBreaksBlazorPwa/tree/main/deploy
3. Deploy to Cloudflare Pages and open the website in a browser: https://cloudflarebreaksblazorpwa.pages.dev/
4. On the first visit the website opens fine, web-app can be installed without any issues.
5. Try to refresh the page in the browser (F5) or close and reopen the installed application - instead of the contents of the website the default browser's error page will be displayed.
6. Browser console will have a warning:

The FetchEvent for "https://cloudflarebreaksblazorpwa.pages.dev/" resulted in a network error response: a redirected response was used for a request whose redirect mode is not "follow".
Promise.then (async)
(anonymous) @ service-worker.js:7

Cause of the problem
The root of the problem seems to be the index.html redirect that happens when the service-worker attempts to fetch static resources for offline mode during its initialization phase:

As a result index.html response gets saved in CacheStorage with redirected=true.
When a user attempts to visit the website for the second time, the service-worker's onFetch returns cached redirected response of index.hmtl. This causes error because of the security policy of modern browsers:

To avoid the risk of open redirectors (https://cwe.mitre.org/data/definitions/601.html) introduce a new security restriction which disallows service workers from responding with a redirected response to requests with a redirect mode different from "follow". This restriction also disallows to respond to navigation requests with redirected responses, because the redirect mode of navigation request is “manual”.
[source]

Solution
As a workaround the code that removes the redirected flag from cached responses may be added to the service worker:

if (cachedResponse && cachedResponse.redirected) {
    cachedResponse = new Response(cachedResponse.body,
                                 {
                                     headers: cachedResponse.headers,
                                     status: cachedResponse.status,
                                     statusText: cachedResponse.statusText
                                 });
}

Although I'm not sure it's 100% correct approach to do that, it seems to be working: https://fix.cloudflarebreaksblazorpwa.pages.dev/

Maybe something like this should be included in the Blazor PWA project template for .NET 6 to make it more robust and suitable for hosting on Cloudflare Pages out of the box.

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[scorfano]

I only want to note that Andrei's (@andreimilto) solution for this issue worked for me with a .NET 6.0 Blazor WebAssembly Progressive Web Application from the standard project template and deployed to Cloudflare.

[mkArtakMSFT]

Closing as the PWA template option is no longer available in .NET 8.

[danroth27]

Here's another example of a user that hit this issue: #54830

@SteveSandersonMS @mkArtakMSFT Should we consider reopening this issue? It was closed based on the current lack of support for PWAs for Blazor Web Apps in .NET 8, but we eventually hope to add PWA support and we still support building PWAs with Standalone Blazor WebAssembly apps.

[SteveSandersonMS]

Yeah I think we made a mistake in closing this. Like you say, the PWA template is still in .NET 8 and 9 for Blazor WebAssembly standalone, and we have no plans or goals to reduce PWA support.

Arguably we could close it as external on the grounds that it's specific to Cloudflare, but if there's a way we can make the standard service worker more robust to alternate hosting models that's a good thing for us to do regardless.