Automatically generate list of dependencies for PWAs service worker

[bmsantos]

List of dependencies must be generated to be used for caching by PWA service worker. This list must be tied with build method in order to provide an updated set of assets to be cahed. Must include versioning for service worker.

[nickl-]

This can be handled by dotnet build to generate the project's assets file, as per the ASP.NET Core Blazor Progressive Web Application (PWA) documentation page. Here is what you need...

Configuration

Add the following to the project file:

To render the assets add the following ServiceWorkerAssetsManifest property to a PropertyGroup

  ...
  <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
</PropertyGroup>

To configure the development (non caching) and production service workers add the following ServiceWorker item to an ItemGroup

<ItemGroup>
  <ServiceWorker Include="wwwroot\service-worker.js" 
    PublishedContent="wwwroot\service-worker.published.js" />
</ItemGroup>

Required files

Download the following raw files from the documentation repository and place them in the wwwroot folder:

• icon-192.png
• icon-512.png
• manifest.json - Remember to edit this file with your own app's details
• service-worker.js
• service-worker.published.js

Implemention

Add the following to the app's wwwroot/index.html file:

• Add <link> elements for the manifest and app icon:

<link href="manifest.json" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
<link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />

• Add the following <script> tag inside the closing </body> tag immediately after the blazor.webassembly.js script tag:

    ...
    <script>navigator.serviceWorker.register('service-worker.js');</script>
</body>