Blazor PWA: Add support for excluding subfolders and files from assets manifest

[scottaddie]

Is your feature request related to a problem? Please describe.

This feature request is inspired by the conversation in dotnet/AspNetCore.Docs#18630.

Here's the relevant info that I received offline from the customer (@comfycoder):

FYI, I am working on a Blazor PWA.

I use Libman to bring in JavaScript dependencies, which are automatically placed in the project's wwwroot folder.

This results in a larger-than-necessary bin/Debug/netstandard2.1/wwwroot/service-worker-assets.js file and includes many undesired entries (in the file's assets array) for the wwwroot/lib folder's files. One example of an undesired entry is:

    {
      "hash": "sha256-BHNhq10T\/9aejlrFEhS\/NYeYS3Djwv\/pqg2xUjQCx\/s=",
      "url": "lib\/bootstrap\/dist\/css\/bootstrap-grid.css"
    },

I understand there is no easy solution right now.

But, preventing this behavior through exclusion (preferred) or removal of the lib folder would be nice to have.

/cc: @SteveSandersonMS @danroth27

[danroth27]

@comfycoder Even though these files are included in the assets manifest, you should be able to exclude them from being cached by modifying onInstall in the service-worker.published.js as documented here: https://docs.microsoft.com/aspnet/core/blazor/progressive-web-app#control-asset-caching. Is that sufficient for your scenario? Or is the size of the assets manifest causing you other issues than caching more than is needed?

[comfycoder]

Hi Daniel,

Thank you for personally taking the time to respond to my request.

I tried to follow the guidance in the documentation you shared with me.

I added entries to the offlineAssetsExclude variable in the service-worker-assets.js file, but I have not been able to see any changes to the files listed in the generated service-worker-assets.js file.

Perhaps you might consider adding a new documentation page to provide various scenarios and use cases for properly modifying the generated service-worker-assets.js file.

With that said, I think I have achieved my desired goal using a different approach. I modified my libman.json and bundleconfig.json files to store and work with the downloaded CSS and JavaScript file in a separate folder that is not inside wwwroot. This way the files I do not wish to cache never get placed into the wwwroot folder and do not get added to the service-worker-assets.js.

Here are examples of my libman.json and bundleconfig.json files:

libman.json

{
  "version": "1.0",
  "defaultProvider": "unpkg",
  "libraries": [
    {
      "library": "jquery@3.5.1",
      "destination": "content/lib/jquery/",
      "files": [
        "dist/jquery.js",
        "dist/jquery.min.js",
        "dist/jquery.min.map",
        "dist/jquery.slim.js",
        "dist/jquery.slim.min.js",
        "dist/jquery.slim.min.map"
      ]
    },
    {
      "provider": "cdnjs",
      "library": "popper.js@2.4.0",
      "destination": "content/lib/popper.js/",
      "files": [
        "umd/popper-base.js",
        "umd/popper-base.js.map",
        "umd/popper-base.min.js",
        "umd/popper-base.min.js.map",
        "umd/popper-lite.js",
        "umd/popper-lite.js.map",
        "umd/popper-lite.min.js",
        "umd/popper-lite.min.js.map",
        "umd/popper.js",
        "umd/popper.js.map",
        "umd/popper.min.js",
        "umd/popper.min.js.map"
      ]
    },
    {
      "library": "bootstrap@4.5.0",
      "destination": "content/lib/bootstrap/"
    },
    {
      "library": "ag-grid-community@23.2.0",
      "destination": "content/lib/ag-grid-community/",
      "files": [
        "dist/ag-grid-community.min.noStyle.js",
        "dist/styles/ag-theme-fresh.min.css",
        "dist/styles/ag-theme-dark.min.css",
        "dist/styles/ag-theme-bootstrap.min.css",
        "dist/styles/ag-theme-balham.min.css",
        "dist/styles/ag-theme-balham-dark.min.css",
        "dist/styles/ag-theme-alpine.min.css",
        "dist/styles/ag-theme-alpine-dark.min.css",
        "dist/styles/ag-grid.min.css"
      ]
    }
  ]
}

bundleconfig.json

[
  {
    "outputFileName": "wwwroot/css/app.min.css",
    "inputFiles": [
      "content/css/bootstrap.css",
      "content/css/app.css"
    ],
    "minify": {
      "enabled": true
    }
  },
  {
    "outputFileName": "wwwroot/js/app.min.js",
    "inputFiles": [
      "content/lib/jquery/dist/jquery.slim.js",
      "content/lib/popper.js/umd/popper.js",
      "content/lib/bootstrap/dist/js/bootstrap.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": true
  }
]

Thanks,

Dennis Moon (@comfycoder)

[danroth27]

I added entries to the offlineAssetsExclude variable in the service-worker-assets.js file, but I have not been able to see any changes to the files listed in the generated service-worker-assets.js file.

@comfycoder Right, the service-worker-assets.js file is constructed at BUILD time. Modifying onInstall in your server worker won't change the contents of service-worker-assets.js, but it allows you to control which assets actually get cached locally.

[comfycoder]

@danroth27 I think I understand now. Thanks for clarifying that for me. I'll just have to do more publish testing until I observe that the exclude works as desired to control which assets actually get cached locally. Thanks again for your help.

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.