{"id":229224,"date":"2020-05-13T15:02:20","date_gmt":"2020-05-13T22:02:20","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/visualstudio\/?p=229224"},"modified":"2020-11-04T14:29:28","modified_gmt":"2020-11-04T22:29:28","slug":"building-a-progressive-web-app-with-blazor","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/building-a-progressive-web-app-with-blazor\/","title":{"rendered":"Building a Progressive Web App with Blazor"},"content":{"rendered":"

A Progressive Web Application (PWA) is a Single Page Application (SPA) that uses modern browser APIs and capabilities to behave like a desktop app. Blazor WebAssembly (now in preview) includes support for Progressive Web Applications. Today, I want to show you how to build your first Blazor PWA. I am using the latest preview of Visual Studio for Mac<\/a>, you can also create them using the latest Visual Studio 2019 Preview on Windows<\/a>.<\/p>\n

Creating a new Blazor PWA<\/h2>\n

In this post, we\u2019ll walk through creating a simple \u201cTo Do\u201d application; in a future post we\u2019ll add some more advanced PWA features.<\/p>\n

Creating a new Blazor PWA is especially easy now in Visual Studio for Mac using the latest Blazor project template. You’ll need to have version 8.6 Preview 5 and later, and until the full release you’ll need to ensure you have the latest .NET Core SDK installed and to install the latest Blazor templates manually<\/a> to see them show up in the Visual Studio for Mac new project dialog. After launching Visual Studio for Mac you\u2019ll see the dialog below, click New to begin creating the project. If you already have Visual Studio open, you could also use the \u21e7\u2318N shortcut<\/a> to open the new project dialog.<\/p>\n

\"A<\/p>\n

From here we will create a .NET Core Console project by selecting Web and Console > App > Blazor WebAssembly App<\/em>.<\/p>\n

\"A<\/p>\n

Next, you\u2019ll need to configure the new Blazor WebAssembly (often abbreviated as WASM) application. We\u2019ll name our application \u201cBlazorPwaTodo\u201d. Select \u201cNo Authentication<\/em>\u201d, and check both the \u201cASP.NET Core Hosted<\/em>\u201d and \u201cProgressive Web Application<\/em>\u201d options as shown below.<\/p>\n

\"A<\/p>\n

If you\u2019re using Visual Studio 2019 on Windows, the new project dialog is pretty similar:<\/p>\n

\"A<\/p>\n

If you\u2019re using Visual Studio Code, you can create a Blazor PWA from the command line using the \u2013pwa switch.<\/p>\n

dotnet new blazorwasm -o BlazorPwaTodo --pwa --hosted<\/pre>\n
Note: We\u2019re selecting the \u201cASP.NET Core Hosted<\/em>\u201d option for two reasons. First, because we plan to integrate some backend services in the future. Second, using an ASP.NET Core Hosted site makes it easier to run a published version of the app in your local developer environment.<\/p>\n
Adding a Todo Razor Component<\/h2>\n
We\u2019re going to build a simple To Do application, so we\u2019ll start by creating a new page to view our list. Right-click the Pages folder and select Add<\/em> > New Item<\/em> > Razor Component<\/a><\/em>. Name the component\u2019s file Todo.razor<\/em>.<\/p>\n
Use the following initial markup for the Todo component:<\/p>\n
@page \"\/todo\"\r\n\r\n<h3>Todo<\/h3><\/pre>\n
The first line of this template defines a route template<\/a>, so browsing to \u201c\/todo\u201d will resolve to this Todo component.<\/p>\n
Next, we\u2019ll add the Todo component to the navigation bar. Open Shared\/NavMenu.razor<\/em> and add a new list item with a NavLink<\/em> element for the Todo component as shown below:<\/p>\n
<li class=\"nav-item px-3\">\r\n    <NavLink class=\"nav-link\" href=\"todo\">\r\n        <span class=\"oi oi-plus\" aria-hidden=\"true\"><\/span> Todo\r\n    <\/NavLink>\r\n<\/li><\/pre>\n
Now run the application by selecting Run<\/em> > Start Without Debugging<\/em> from the menu. Clicking the Todo link in the navigation shows our new page with the Todo heading, ready for us to start adding some code.<\/p>\n
\"A<\/p>\n
Coding basic Todo functionality<\/h2>\n
Let\u2019s create a simple class to represent a todo item. Since we\u2019re using an ASP.NET Core hosted template and will probably include some back-end APIs later, we\u2019ll put that class in Shared project to make it available for use in our server application as well. Right-click the Blazor.PwaTodo.Shared<\/em> project and select Add<\/em> > New<\/em> Class<\/em>. Name the new class file TodoItem.cs<\/em> and enter the following code:<\/p>\n
public class TodoItem\r\n{\r\n    public string Title { get; set; }\r\n    public bool IsDone { get; set; }\r\n}<\/pre>\n
Return to the Todo.razor component and add the following code:<\/p>\n
@page \"\/todo\"\r\n\r\n<h3>Todo<\/h3>\r\n\r\n<ul>\r\n    @foreach (var todo in todos)\r\n    {\r\n        <li>@todo.Title<\/li>\r\n    }\r\n<\/ul>\r\n\r\n<input placeholder=\"Something todo\" @bind=\"newTodo\" \/>\r\n<button @onclick=\"AddTodo\">Add todo<\/button>\r\n\r\n@code {\r\n    private IList<TodoItem> todos = new List<TodoItem>();\r\n    private string newTodo;\r\n\r\n    private void AddTodo()\r\n    {\r\n        if (!string.IsNullOrWhiteSpace(newTodo))\r\n        {\r\n            todos.Add(new TodoItem { Title = newTodo });\r\n            newTodo = string.Empty;\r\n        }\r\n    }\r\n}<\/pre>\n
Let\u2019s take a look at what this code is doing:<\/p>\n
    \n
  1. In the code block at the bottom, we\u2019d declared a list to hold our TodoItem objects, named todo.<\/li>\n
  2. We\u2019re iterating over the list of items using a foreach<\/em> loop inside the ul<\/em> element.<\/li>\n
  3. We have an input<\/a><\/em> element that is bound<\/a> to a string property named newTodo<\/em>.<\/li>\n
  4. The input element has a a corresponding button to allow adding new items to the list.<\/li>\n
  5. We\u2019re using the button<\/em>\u2019s @onclick<\/em> attribute to call the AddTodo method.<\/li>\n
  6. The AddTodo method checks to make sure that text has been entered, then adds a new item to the list and clears the input to allow adding another item.<\/li>\n<\/ol>\n
    Note: This explanation is condensed for brevity. If you\u2019d like a more thorough explanation, there\u2019s an in-depth walkthrough of this Todo example<\/a> in the Blazor documentation.<\/p>\n
    Run the application (again, by using the Run<\/em> > Start Without Debugging<\/em> command in the menu) and verify that you can add new items to the list.<\/p>\n
    \"A<\/p>\n
    Marking Todo items complete<\/h2>\n
    So far, our Todo application only allows adding new items to the list with no support for marking them complete. Let\u2019s fix that by adding a checkbox for each item that\u2019s bound to the IsDone<\/em> property.<\/p>\n
    Update the list to include a checkbox input element as shown below.<\/p>\n
    <ul>\r\n    @foreach (var todo in todos)\r\n    {\r\n        <li>\r\n            <input type=\"checkbox\" @bind=\"todo.IsDone\" \/>\r\n            <input @bind=\"todo.Title\" \/>\r\n        <\/li>\r\n    }\r\n<\/ul><\/pre>\n
    And finally, to verify that these values are bound, we\u2019ll update the page header to show the number of items that are not yet complete. Update the h3<\/em> element with this code:<\/p>\n
    <h3>Todo (@todos.Count(todo => !todo.IsDone))<\/h3><\/pre>\n
    Run the application to see it in action. Leave the application running when you\u2019re done testing, as we\u2019ll be using the running application in the next section.<\/p>\n
    \"A<\/p>\n
    Installing the PWA<\/h2>\n
    Now that we\u2019ve built a basic application, we can start taking advantage of the PWA features. Every time you\u2019ve been running this application, it\u2019s actually been running with PWA support due to using the PWA template.<\/p>\n
    A Progressive Web Application (PWA) is a Single Page Application (SPA) that uses modern browser APIs and capabilities to behave like a desktop app. Blazor WebAssembly is a standards-based client-side web app platform, so it can use any browser API, including PWA APIs required for the following capabilities:<\/p>\n