Blazor.PWA.MSBuild icon indicating copy to clipboard operation
Blazor.PWA.MSBuild copied to clipboard

Ability to explicitly add items to the cache

Open marin-bratanov opened this issue 6 years ago • 3 comments

Unless I misunderstand and misconfigure the ServiceWorkerPreCacheExcludeFiles and ServiceWorkerPreCacheExcludeReleaseFiles, we can't explicitly add things to the requiredFiles array that will be cached.

Being able to explicitly add resources can be helpful when your data comes from a some REST endpoint (e.g., a controller) and not from a static file, which I expect will be common in a real app.

EDIT: This can also be helpful for static assets used by other packages - they are not in the project folder so they won't be generated, but they need to be cached as well.

While I can edit the array myself, I must remember to edit it again after re-generating anything from the PWA infrastructure, which is error prone. I'd rather not add another js file of my own to try to add to the cache myself (this is my first touch with a PWA and I'll probably mess something up).

marin-bratanov avatar Dec 17 '19 09:12 marin-bratanov

HI Marin,

Thanks for raising this issue -yes I can see that being useful - I'll add it in the next version.

Hopefully I will be able to do that this week.

Can you show me (anonymised as required) some examples of what you need to manually add, so I can recreate/test?

SQL-MisterMagoo avatar Dec 18 '19 14:12 SQL-MisterMagoo

The most basic example I can suggest is:

  1. create a new WASM app with the ASP.NET Core hosting (so you get the controller action for free)
  2. make it into a PWA with your tool
  3. modify the controller like this so it can take params:
    [ApiController]
    [Route("[controller]")]
    public class WeatherForecastController : ControllerBase
    {
        private static readonly string[] Summaries = new[]
        {
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };

        private readonly ILogger<WeatherForecastController> logger;

        public WeatherForecastController(ILogger<WeatherForecastController> logger)
        {
            this.logger = logger;
        }

        [HttpGet]
        public IEnumerable<WeatherForecast> Get([FromQuery]int? count) // this parameter here's the change
        {
            int total = count == null ? 5 : 150; // and some silly logic

            var rng = new Random();
            return Enumerable.Range(1, total).Select(index => new WeatherForecast
            {
                Date = DateTime.Now.AddDays(index),
                TemperatureC = rng.Next(-20, 55),
                Summary = Summaries[rng.Next(Summaries.Length)]
            }).ToList();
        }
    }

So, to fetch this data you'd be doing something like this in a component:

    List<WeatherForecast> forecasts { get; set; } = new List<WeatherForecast>();

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetJsonAsync<List<WeatherForecast>>("WeatherForecast?count=150");
    }

And this is what I'd have to add, something like:

const requiredFiles = [
// the original stuff that is generated
"/WeatherForecast?count=150", // that's for some custom page where you get a ton of data
"/WeatherForecast" // this is for the original FetchData page
];

Without these lines going offline will throw exceptions when these requests are invoked by Blazor, so the app dies. If I re-generate the assets - these lines are gone.

If you want me to make an actual sample, let me know and I'll attach it by tomorrow.

marin-bratanov avatar Dec 18 '19 17:12 marin-bratanov

That's great thanks

SQL-MisterMagoo avatar Dec 18 '19 17:12 SQL-MisterMagoo