Blazor PWA node and push notifications article (#35688)

Author: guardrex

.openpublishing.redirection.json

@@ -1522,6 +1522,11 @@
             "source_path": "aspnetcore/migration/identity.md",
             "redirect_url": "/aspnet/core/migration/fx-to-core/examples/identity",
             "redirect_document_id": false
+        },
+        {
+            "source_path": "aspnetcore/blazor/progressive-web-app.md",
+            "redirect_url": "/aspnet/core/blazor/progressive-web-app/",
+            "redirect_document_id": false
         }
     ]
 }

aspnetcore/blazor/fundamentals/configuration.md

@@ -300,12 +300,12 @@ var hostname = builder.Configuration["HostName"];
 
 ## Cached configuration
 
-Configuration files are cached for offline use. With [Progressive Web Applications (PWAs)](xref:blazor/progressive-web-app), you can only update configuration files when creating a new deployment. Editing configuration files between deployments has no effect because:
+Configuration files are cached for offline use. With [Progressive Web Applications (PWAs)](xref:blazor/progressive-web-app/index), you can only update configuration files when creating a new deployment. Editing configuration files between deployments has no effect because:
 
 * Users have cached versions of the files that they continue to use.
 * The PWA's `service-worker.js` and `service-worker-assets.js` files must be rebuilt on compilation, which signal to the app on the user's next online visit that the app has been redeployed.
 
-For more information on how background updates are handled by PWAs, see <xref:blazor/progressive-web-app#background-updates>.
+For more information on how background updates are handled by PWAs, see <xref:blazor/progressive-web-app/index#background-updates>.
 
 ## Options configuration
 

aspnetcore/blazor/host-and-deploy/webassembly/bundle-caching-and-integrity-check-failures.md

@@ -154,7 +154,7 @@ To disable integrity checks, add the following to a property group in the Blazor
 `BlazorCacheBootResources` also disables Blazor's default behavior of caching the `.dll`, `.wasm`, and other files based on their SHA-256 hashes because the property indicates that the SHA-256 hashes can't be relied upon for correctness. Even with this setting, the browser's normal HTTP cache may still cache those files, but whether or not this happens depends on your web server configuration and the `cache-control` headers that it serves.
 
 > [!NOTE]
-> The `BlazorCacheBootResources` property doesn't disable integrity checks for [Progressive Web Applications (PWAs)](xref:blazor/progressive-web-app). For guidance pertaining to PWAs, see the [Disable integrity checking for PWAs](#disable-integrity-checking-for-pwas) section.
+> The `BlazorCacheBootResources` property doesn't disable integrity checks for [Progressive Web Applications (PWAs)](xref:blazor/progressive-web-app/index). For guidance pertaining to PWAs, see the [Disable integrity checking for PWAs](#disable-integrity-checking-for-pwas) section.
 
 We can't provide an exhaustive list of scenarios where disabling integrity checking is required. Servers can answer a request in arbitrary ways outside of the scope of the Blazor framework. The framework provides the `BlazorCacheBootResources` setting to make the app runnable at the cost of *losing a guarantee of integrity that the app can provide*. Again, we don't recommend disabling integrity checking, especially for production deployments. Developers should seek to solve the underlying integrity problem that's causing integrity checking to fail.
 

aspnetcore/blazor/host-and-deploy/webassembly/index.md

@@ -483,7 +483,7 @@ Rename file extensions in the `blazor.boot.json` file:
 ((Get-Content {PATH}\blazor.boot.json -Raw) -replace '.dll"','.bin"') | Set-Content {PATH}\blazor.boot.json
 ```
 
-If service worker assets are also in use because the app is a [Progressive Web App (PWA)](xref:blazor/progressive-web-app):
+If service worker assets are also in use because the app is a [Progressive Web App (PWA)](xref:blazor/progressive-web-app/index):
 
 ```powershell
 ((Get-Content {PATH}\service-worker-assets.js -Raw) -replace '.dll"','.bin"') | Set-Content {PATH}\service-worker-assets.js
@@ -507,7 +507,7 @@ Rename file extensions in the `blazor.boot.json` file:
 sed -i 's/\.dll"/.bin"/g' {PATH}/blazor.boot.json
 ```
 
-If service worker assets are also in use because the app is a [Progressive Web App (PWA)](xref:blazor/progressive-web-app):
+If service worker assets are also in use because the app is a [Progressive Web App (PWA)](xref:blazor/progressive-web-app/index):
 
 ```console
 sed -i 's/\.dll"/.bin"/g' {PATH}/service-worker-assets.js
@@ -522,12 +522,12 @@ To address the compressed `blazor.boot.json` file, adopt either of the following
 * Recompress the updated `blazor.boot.json` file, producing new `blazor.boot.json.gz` and `blazor.boot.json.br` files. (*Recommended*)
 * Remove the compressed `blazor.boot.json.gz` and `blazor.boot.json.br` files. (*Compression is disabled with this approach.*)
 
-For a [Progressive Web App (PWA)](xref:blazor/progressive-web-app)'s compressed `service-worker-assets.js` file, adopt either of the following approaches:
+For a [Progressive Web App (PWA)](xref:blazor/progressive-web-app/index)'s compressed `service-worker-assets.js` file, adopt either of the following approaches:
 
 * Recompress the updated `service-worker-assets.js` file, producing new `service-worker-assets.js.br` and `service-worker-assets.js.gz` files. (*Recommended*)
 * Remove the compressed `service-worker-assets.js.gz` and `service-worker-assets.js.br` files. (*Compression is disabled with this approach.*)
 
-To automate the extension change on Windows in .NET 6/7, the following approach uses a PowerShell script placed at the root of the project. The following script, which disables compression, is the basis for further modification if you wish to recompress the `blazor.boot.json` file and `service-worker-assets.js` file if the app is a [Progressive Web App (PWA)](xref:blazor/progressive-web-app). The path to the [`publish` folder](xref:blazor/host-and-deploy/index#default-publish-locations) is passed to the script when it's executed.
+To automate the extension change on Windows in .NET 6/7, the following approach uses a PowerShell script placed at the root of the project. The following script, which disables compression, is the basis for further modification if you wish to recompress the `blazor.boot.json` file and `service-worker-assets.js` file if the app is a [Progressive Web App (PWA)](xref:blazor/progressive-web-app/index). The path to the [`publish` folder](xref:blazor/host-and-deploy/index#default-publish-locations) is passed to the script when it's executed.
 
 `ChangeDLLExtensions.ps1:`:
 
@@ -539,7 +539,7 @@ Remove-Item $filepath\wwwroot\_framework\blazor.boot.json.gz
 Remove-Item $filepath\wwwroot\_framework\blazor.boot.json.br
 ```
 
-If service worker assets are also in use because the app is a [Progressive Web App (PWA)](xref:blazor/progressive-web-app), add the following commands:
+If service worker assets are also in use because the app is a [Progressive Web App (PWA)](xref:blazor/progressive-web-app/index), add the following commands:
 
 ```powershell
 ((Get-Content $filepath\wwwroot\service-worker-assets.js -Raw) -replace '.dll"','.bin"') | Set-Content $filepath\wwwroot\service-worker-assets.js

aspnetcore/blazor/hosting-models.md

@@ -101,7 +101,7 @@ When a standalone Blazor WebAssembly app uses a backend ASP.NET Core app to serv
 
 :::moniker range=">= aspnetcore-6.0"
 
-A Blazor WebAssembly app built as a [Progressive Web App (PWA)](xref:blazor/progressive-web-app) uses modern browser APIs to enable many of the capabilities of a native client app, such as working offline, running in its own app window, launching from the host's operating system, receiving push notifications, and automatically updating in the background.
+A Blazor WebAssembly app built as a [Progressive Web App (PWA)](xref:blazor/progressive-web-app/index) uses modern browser APIs to enable many of the capabilities of a native client app, such as working offline, running in its own app window, launching from the host's operating system, receiving push notifications, and automatically updating in the background.
 
 :::moniker-end
 

aspnetcore/blazor/progressive-web-app.md renamed to aspnetcore/blazor/progressive-web-app/index.md

@@ -6,7 +6,7 @@ monikerRange: '>= aspnetcore-3.1'
 ms.author: wpickett
 ms.custom: mvc
 ms.date: 11/12/2024
-uid: blazor/progressive-web-app
+uid: blazor/progressive-web-app/index
 ---
 # ASP.NET Core Blazor Progressive Web Application (PWA)
 
@@ -159,13 +159,13 @@ In the app's `wwwroot/index.html` file:
 
 When visiting an app created using the PWA template, users have the option of installing the app into their OS's start menu, dock, or home screen. The way this option is presented depends on the user's browser. When using desktop Chromium-based browsers, such as Edge or Chrome, an **Add** button appears within the URL bar. After the user selects the **Add** button, they receive a confirmation dialog:
 
-![The confirmation dialog in Google Chrome presents an Install button to the user for the 'MyBlazorPwa' app.](~/blazor/progressive-web-app/_static/image2.png)
+![The confirmation dialog in Google Chrome presents an Install button to the user for the 'MyBlazorPwa' app.](~/blazor/progressive-web-app/index/_static/image2.png)
 
 On iOS, visitors can install the PWA using Safari's **Share** button and its **Add to Homescreen** option. On Chrome for Android, users should select the **Menu** button in the upper-right corner, followed by **Add to Home screen**.
 
 Once installed, the app appears in its own window without an address bar:
 
-![The 'MyBlazorPwa' app runs in Google Chrome without an address bar.](~/blazor/progressive-web-app/_static/image3.png)
+![The 'MyBlazorPwa' app runs in Google Chrome without an address bar.](~/blazor/progressive-web-app/index/_static/image3.png)
 
 To customize the window's title, color scheme, icon, or other details, see the `manifest.json` file in the project's `wwwroot` directory. The schema of this file is defined by web standards. For more information, see [MDN web docs: Web App Manifest](https://developer.mozilla.org/docs/Web/Manifest).
 
@@ -185,18 +185,18 @@ To see how offline support works:
 1. Deploy the app to a server that supports HTTPS, and access the app in a browser at its secure HTTPS address.
 1. Open the browser's dev tools and verify that a *Service Worker* is registered for the host on the **Application** tab:
 
-   ![Google Chrome developer tools 'Application' tab shows a Service Worker activated and running.](~/blazor/progressive-web-app/_static/image4.png)
+   ![Google Chrome developer tools 'Application' tab shows a Service Worker activated and running.](~/blazor/progressive-web-app/index/_static/image4.png)
 
 1. Reload the page and examine the **Network** tab. **Service Worker** or **memory cache** are listed as the sources for all of the page's assets:
 
-   ![Google Chrome developer tools 'Network' tab showing sources for all of the page's assets.](~/blazor/progressive-web-app/_static/image5.png)
+   ![Google Chrome developer tools 'Network' tab showing sources for all of the page's assets.](~/blazor/progressive-web-app/index/_static/image5.png)
 
 1. To verify that the browser isn't dependent on network access to load the app, either:
 
    * Shut down the web server and see how the app continues to function normally, which includes page reloads. Likewise, the app continues to function normally when there's a slow network connection.
    * Instruct the browser to simulate offline mode in the **Network** tab:
 
-   ![Google Chrome developer tools 'Network' tab with the browser mode dropdown list changed from 'Online' to 'Offline'.](~/blazor/progressive-web-app/_static/image6.png)
+   ![Google Chrome developer tools 'Network' tab with the browser mode dropdown list changed from 'Online' to 'Offline'.](~/blazor/progressive-web-app/index/_static/image6.png)
 
 Offline support using a service worker is a web standard, not specific to Blazor. For more information on service workers, see [MDN web docs: Service Worker API](https://developer.mozilla.org/docs/Web/API/Service_Worker_API). To learn more about common usage patterns for service workers, see [Google Web: The Service Worker Lifecycle](https://web.dev/service-worker-lifecycle/).
 
@@ -358,7 +358,7 @@ What surprises many developers is that, even when this update completes, it does
 
 This commonly troubles developers who are trying to test updates to their service worker or offline cached resources. If you check in the browser's developer tools, you may see something like the following:
 
-![Google Chrome 'Application' tab shows that the Service Worker of the app is 'waiting to activate'.](~/blazor/progressive-web-app/_static/image7.png)
+![Google Chrome 'Application' tab shows that the Service Worker of the app is 'waiting to activate'.](~/blazor/progressive-web-app/index/_static/image7.png)
 
 For as long as the list of "clients," which are tabs or windows displaying your app, is nonempty, the worker continues waiting. The reason service workers do this is to guarantee consistency. Consistency means that all resources are fetched from the same atomic cache.