--- title: "Transforming a Blazor WebAssembly (WASM) App into a Progressive Web App" published_at: "2024-02-13T09:41:56+00:00" modified_at: "2026-01-16T07:53:53+00:00" url: "https://www.syncfusion.com/blogs/post/transform-blazor-wasm-to-pwa" excerpt: "Let’s see how to transform your existing Blazor WebAssembly (WASM) app into a progressive web app (PWA)." taxonomy_category: - "Blazor" - "Development" - "Syncfusion" - "Web" taxonomy_post_tag: - "Blazor" - "development" - "productivity" - "Syncfusion" - "Web" --- # Transforming a Blazor WebAssembly (WASM) App into a Progressive Web App [Hari Venkatesh E](https://www.syncfusion.com/blogs/author/harivenkateshe) ![Transforming a Blazor WebAssembly (WASM) App into a Progressive Web App](https://www.syncfusion.com/blogs/wp-content/uploads/2024/02/Transforming-a-Blazor-WebAssembly-WASM-App-into-a-Progressive-Web-App.png) Progressive web applications (PWAs) are the future of web development, offering an app-like experience that is fast, reliable, and engaging. With Blazor WebAssembly (WASM), we have a powerful tool to build interactive, client-side web apps with .NET. If a user wants the same Blazor WASM app to work across multiple platforms and devices, be responsive and offline, without migrating the exact requirement into multiple native apps, they need a PWA. In this blog, we’ll see how to transform a [Blazor](https://en.wikipedia.org/wiki/Blazor) [WebAssembly](https://en.wikipedia.org/wiki/WebAssembly) app into a [progressive web app](https://en.wikipedia.org/wiki/Progressive_web_app) (PWA), a process that promises to redefine your web development experience. ## Hosting a PDF Viewer in a Blazor WASM app First, we’ll create a Blazor WASM app, beginning with a use case of adding and hosting a PDF Viewer, like an online PDF Viewer tool, to open and view PDF files. When the app is completed and hosted on the online server, online PDF viewing will be available to internet users worldwide. ### Step 1: Setup your environment Before starting, ensure you have the latest version of [Visual Studio](https://visualstudio.microsoft.com/downloads/) installed on your computer. You’ll also need to have [.NET Core 3.1](https://dotnet.microsoft.com/en-us/download/dotnet/3.1) or later installed. ### Step 2: Create a new project Launch Visual Studio and create a new Blazor WebAssembly app project. You can do this by navigating to **File -> New -> Project,** selecting ** Blazor App**, and clicking ** Next.** Give your project a name and click ** Create.** Select ** Blazor WebAssembly App** on the next screen and click ** Create.** ### Step 3: Install the required NuGet packages After creating the project, install the PDF Viewer package. Open the NuGet package manager by navigating to **Tools -> NuGet Package Manager -> Manage NuGet Packages for Solution.** In the package manager, search for ** Syncfusion.Blazor.SfPdfViewer** and ** Syncfusion.Blazor.Themes** and install these packages. ### Step 4: Include the namespaces Add the **Syncfusion.Blazor** and ** Syncfusion.Blazor.SfPdfViewer** namespaces in the **_Imports.razor** page. The PDF Viewer component is part of the ** Syncfusion.Blazor.SfPdfViewer**namespace, so it needs to be accessible in your Blazor app. ### Step 5: Register the Syncfusion Blazor service In the **Program.cs** page, register the ** Syncfusion Blazor Service**. Syncfusion’s components are services that must be registered and configured in your app’s startup code before they are used. ### Step 6: Include the Bootstrap 5 theme file Then, add the Bootstrap 5 theme file from the **Syncfusion.Blazor.Themes** package to the ** index.html** page. This is to ensure that the Syncfusion components in your app have a consistent look and feel that matches Bootstrap 5’s styling. ### Step 7: Include the component-oriented script files The component-oriented script file from the **Syncfusion.Blazor.SfPdfViewer** package should also be included in the ** index.html** page. This script file contains the client-side code for the PDF Viewer component. ### Step 8: Declare and define the SfPdfViewer component Finally, declare and describe your app’s **SfPdfViewer** component. This is where you specify how the PDF Viewer should behave and what PDF document it should display. Refer to the following code example. **Index.razor** ``` @page "/" ``` By following these steps, you’re setting up your Blazor WASM app to use Syncfusion’s Blazor PDF Viewer component, allowing your app to display PDF documents in a user-friendly manner. **Note:** For more details, refer to the [Blazor PDF Viewer getting started documentation](https://blazor.syncfusion.com/documentation/pdfviewer-2/getting-started/web-assembly-application) . When you run the app, you will get the following output. ![Adding Syncfusion PDF Viewer to the Blazor WebAssembly app](https://www.syncfusion.com/blogs/wp-content/uploads/2024/02/Adding-Syncfusion-PDF-Viewer-to-the-Blazor-WebAssembly-app.png) Adding Syncfusion PDF Viewer to the Blazor WebAssembly app ## Transform your Blazor WASM app into a progressive web app We’ve created a Blazor WASM app in the previous section, and now we’ll go over the steps required to convert the same app to a progressive web app. So, for the conversion, we primarily need the following files to be included in our Blazor WASM app: - **manifest.json:** This file contains the metadata used to define and configure the PWA, such as the name, short name, start URL, background color, and icons. - **service-worker.js:** This is a JavaScript file that helps in the work of PWAs by caching the app and its data to be used offline.** Note:**This is used during the development phase. - **service-worker.published.js:** This is similar to service-worker.js but is used once the app is published. - **icon-192.png** - **icon-512.png**** Note:**The design of the icon-192.png and icon-512.png files are up to you. They are not mandatory. These icons will appear as the PWA app’s shortcut icon once installed. You can download all the files listed above from this [GitHub](https://github.com/SyncfusionExamples/transforming-a-blazor-webassembly-app-into-a-progressive-web-app-pwa-/tree/master/PDF_Viewer/wwwroot) repository. After downloading them, please copy and paste them into the **wwwroot** folder of your Blazor WASM app. Then, in the ** index.html** file of the ** wwwroot** folder, reference the ** manifest.json**, ** service-worker.js**, and icon files. Refer to the following code example. **index.html** ``` …… …… …… …… ``` Now, add the **ServiceWorkerAssetsManifest** option to the ** PropertyGroup** and the ** ServiceWorker** option to the ** ItemGroup**. Refer to the following code example. ***.csproj** ``` …… …… service-worker-assets.js …… …… ``` Finally, completely clean the project solution, rebuild it, and run it. You will see the same output but with an app installation option in the address bar. Click that to install your app. You can now see a desktop shortcut icon and your app running. ![Installation of the PDF Viewer App is recommended via an option in the address bar](https://www.syncfusion.com/blogs/wp-content/uploads/2024/02/Installation-of-the-PDF-Viewer-App-is-recommended-via-an-option-in-the-address-bar.png) Installation of the PDF Viewer App is recommended via an option in the address bar ![Installing the PDF Viewer App](https://www.syncfusion.com/blogs/wp-content/uploads/2024/02/Installing-the-PDF-Viewer-App.png) Installing the PDF Viewer App Following the installation, the app will run and display the PDF Viewer to upload and view PDF files. ![Transforming a Blazor WebAssembly app to a progressive web app](https://www.syncfusion.com/blogs/wp-content/uploads/2024/02/Transforming-a-Blazor-WebAssembly-app-to-a-progressive-web-app.png) Transforming a Blazor WebAssembly app to a progressive web app **Important Note:** If you are creating a Blazor WASM app for the first time, you don’t need to follow the steps previously outlined. When you are creating a new Blazor WASM app project, you can select the **Progressive Web Application** option directly. ![Option to create a new progressive web application](https://www.syncfusion.com/blogs/wp-content/uploads/2024/02/Option-to-create-a-new-progressive-web-application.png) Option to create a new progressive web application ## References For more details, refer to our [documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/progressive-web-app?view=aspnetcore-7.0&tabs=visual-studio#convert-an-existing-blazor-webassembly-app-into-a-pwa) and [GitHub demo](https://github.com/SyncfusionExamples/transforming-a-blazor-webassembly-app-into-a-progressive-web-app) . ## Conclusion Thanks for reading! In this blog, we’ve explored how to convert your existing Blazor WASM app into a progressive web app. Try out the steps in this blog post and share your feedback in the comments below. The Syncfusion Blazor component library offers 85+ responsive, lightweight components, including [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) , 50+ [Charts](https://www.syncfusion.com/blazor-components/blazor-charts) , and [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) , for building modern web apps. The new version of Essential Studio® is available for existing customers on the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out our controls’ features. For questions, you can reach us through our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/) . We are always happy to assist you! ## Related blogs - [Explore the Possibilities of the Blazor Playground App](https://www.syncfusion.com/blogs/post/syncfusion-blazor-playground-app.aspx) - [Enhance the User Experience in E-Commerce Checkouts Using the Stepper Control [Webinar Show Notes]](https://www.syncfusion.com/blogs/post/ux-ecommerce-checkouts-stepper.aspx) - [Introducing the New Blazor Dropdown Tree Component](https://www.syncfusion.com/blogs/post/new-blazor-dropdown-tree.aspx) - [Effortlessly Generate Radial Tree Diagrams in Blazor](https://www.syncfusion.com/blogs/post/radial-tree-diagrams-in-blazor.aspx) - [Blazor Synchronized Charts: The Perfect Tool for Trade Analysis](https://www.syncfusion.com/blogs/post/blazor-synchronized-charts.aspx)