Consider adding Progressive Web App (PWA) option to the Blazor Web App template

[danroth27]

Currently we only support the Progressive Web App (PWA) template option with the Blazor WebAssembly template. This is primarily because offline scenarios don't make sense with Blazor Server. That said, it's still valid to have an installable PWA that doesn't support offline execution. Could we make our PWA support more general?

With the current Blazor Web App template it's not clear to me if it would ever make sense to enable offline support. The one case this might make sense is if we end up with some option or combination of options that make the entire app interactive using the WebAssembly or Auto render modes, but this isn't the currently plan.

[javiercn]

@danroth27 that requires us to move the service-worker support down one layer to static web assets, which we punted.

It should be doable though.

[mkArtakMSFT]

Depends on #46999

[veertien]

With the current Blazor Web App template it's not clear to me if it would ever make sense to enable offline support

Please consider this scenario: A Blazor WebAssembly PWA with offline support and server prerendering.

I have it working in .NET 7 but it is quite a head ache to migrate to .NET 8.

[RyansBello]

I want to kick off a new project with .NET 8, hoping it kicks off or starts off like Blazor .NET 7 with its awesome Hosted option, which already includes the fantastic PWA capability.
With .NET 8, I can have a framework almost the same as the project setup:

Interactive render mode => WebAssembly
Interactivity location => Global

Unfortunately, that amazing PWA feature is missing from .NET 8. How can we build an extraordinary and user-friendly web framework as promised when that feature is gone?

Please reconsider bringing back the PWA capability in the Blazor Server App feature. Perhaps by restricting the PWA options to appear only if the settings are configured, as suggested by @SteveSandersonMS in #50433

[SteveSandersonMS]

@RyansBello You can still build a PWA; we just don't have checkbox in the template wizard that sets it up for you. For example you can add your own service-worker.js file to the project (e.g., starting with the one from the WebAssembly Standalone PWA template) and corresponding <ServiceWorkerAssetsManifest> and <ServiceWorker> entries in your .csproj.

I totally appreciate it's nonobvious and harder to get started than if there was a template option. I agree it would be good if we could add a template option for it in the future. If you are determined, it is possible to proceed right now with some extra manual setup work.

[MarkSky]

In .Net 7, Blazor Webassembly with Asp.Net Core hosting could prerender and also work on PWA, just like the JavaScript Framework.
But in .Net 8, it doesn't support both PWA and prerender on the same web project, if I want to use prerender in Blazor, I have to use Blazor Web App.
So I thing adding PWA option to the Blazor Web App is needed.

[ghost]

Thanks for contacting us.

We're moving this issue to the .NET 9 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s).
If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues.
To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[SteveSandersonMS]

Based on some community feedback, I tried out setting up a PWA manually using a combination of the Blazor Web and Standalone Blazor WebAssembly templates: https://github.com/SteveSandersonMS/MyDotNet8PWA

It does work in this simple case. However:

• It's very nontrivial to set up. You have to make lots of nonobvious changes to CSS file paths and inside service-worker.published.js to make it work. Unless you're very familiar with the framework it's likely you'd be fighting problems for a long time.
• It still doesn't generalize to more complex app patterns. For example, if you wanted a subset of pages still to be SSR, how would you do it? You need to have an interactive router for the PWA to work, but you need to not have an interactive router to be able to reach the SSR page.
  • I thought I could work around it by using MapWhen in the host Program.cs to use different root components for different URL subsets, but that didn't work, because if you have multiple calls to MapRazorPages then they register clashing endpoints for _framework/blazor.web.js. It doesn't look like there's any sensible way to host more than one Blazor Web application in a single app right now.

[laryhil]

we need blazor wasm with server prerender with pwa.... please @danroth27 and @SteveSandersonMS just bring it back asap...

[alex-fitplans]

I would love to have PWA support with blazor auto render mode.
It would allow fast initial load for new customers AND the option to install the app for existing customers.

In fact, the scenario you mention @SteveSandersonMS is the perfect scenario for me: Have SSR for the landing/static pages, and have interactive PWA with auto render mode for the app portion of the website. At the moment I work around that with two websites, which works but isn't ideal from a customer journey perspective.

I had a look at your example (thanks!), reading your warnings I guess it's best to not use this on production?

[gragra33]

@danroth27 @SteveSandersonMS I'm just giving this a ping to see if it made it onto the roadmap for .Net 9.0. I am like others, would love to migrate from .Net 7.0.

[danroth27]

I'm just giving this a ping to see if it made it onto the roadmap for .Net 9.0. I am like others, would love to migrate from .Net 7.0.

@gragra33 Unfortunately, this issue didn't make the cut for .NET 9, but you should still be able to retarget your existing app to .NET 8 without having to make any code changes. The existing Blazor Server and Blazor WebAssembly hosting models are still fully supported in .NET 8.

[gragra33]

@danroth27 Thanks for responding so quickly. I will continue to work with what is available. I will hold hope for .Net 10. Auto + PWA would be powerful.

[douglassimaodev]

Even if we dont want to work off-line, the app can be fully online but I just would like to give to my user the experience of having something "native/installed" to his desktop or mobile instead keep opening the browser and searching for the website/app
any update on that query?

[SteveSandersonMS]

@douglassimaodev If all you want to do is prompt the user to add your page to their homescreen, you can easily add that to your site following the guide at https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable. This isn't a Blazor-specific thing - it works the same with any web app.

[hgirma]

@douglassimaodev Once installed, how do you upgrade it when a new version of the app is available?

[Laftek]

This is must feature to have to make it easier for us

[sdktraceur]

And we use PWA to get full screen on the Android devices, it's killer feature.

[PSCourtney]

@douglassimaodev Once installed, how do you upgrade it when a new version of the app is available?

My approach is to store a version number in my db, and have a check on page layout level to check the version with an api call. If there is a mismatch prompt the user to update.

Or handle it on the service-worker.js level https://whuysentruit.medium.com/blazor-wasm-pwa-adding-a-new-update-available-notification-d9f65c4ad13