To use BitBswup, please follow these steps:
- Install the
Bit.Bswupnuget package - Disable static file caching.You can follow below code in
Startup.csfile
app.UseStaticFiles(new StaticFileOptions
{
OnPrepareResponse = ctx =>
{
ctx.Context.Response.GetTypedHeaders().CacheControl = new CacheControlHeaderValue()
{
NoCache = true
};
}
});- In the default document (
_Host.cshtml,index.htmlor_Layout.cshtml), add anautostart = "false"attribute and value to the <script> tag for the Blazor script.
<script src="_framework/blazor.webassembly.js" autostart="false"></script>- In the default document (
_Host.cshtml,index.htmlor_Layout.cshtml), add theBit.Bswupreference after the <script> tag for the Blazor script.
<script src="_content/Bit.Bswup/bit-bswup.js"
scope="/"
log="verbose"
sw="service-worker.js"
handler="bitBswupHandler"></script>- scope: The scope of the service worker determines which files the service worker controls. You need more about that read it.
- log: The log level for log provider. log options:
info,verbose,debug,error - sw: The sw is name and path service worker file.
- handler: The name of handler for the service worker events
You can not specify the values of the attributes, and use the default values which are equal to the above values.
- Add a handler in the simplest way possible, like the below code. or you can add a handler with a progress process bar like the bitBswupHandler on the sample in the index.html file of the demo project in this repo.
function bitBswupHandler(type, data) {
switch (type)
{
case 'updatefound':
return console.log('new version is downloading...');
case 'statechange':
return console.log('new version state has changed to:', data.currentTarget.state);
case 'controllerchange':
return console.log('sw controller changed:', data);
case 'installing':
return console.log('installing new version:', data.version);
case 'installed':
console.log('new version installed:', data.version)
data.reload();
return;
case 'progress':
return console.log('asset downloaded:', data);
case 'activate':
return console.log('new version activated:', data.version);
}
}- Configure additional settings in the service worker file (based on the sample shown in the
service-worker.jsfile of the demo project)
self.assetsInclude: The list of files or regex of files to be cached.self.assetsExclude: The list of files or regex of files that should not be cached.self.defaultUrl: The default page url. Use/for_Host.cshtmlself.prohibitedUrls: The list of files or regex of files that should not be accessed.self.assetsUrl: The url address of service worker assets.self.externalAssets: The list of external assets. If you're not usingindex.htmlfor default url, then you should add this{ "url": "/" }item.self.caseInsensitiveUrl: If set true you can check case insensitive url in the cache process.self.serverHandledUrls: The list of urls or regex that do not enter the service worker process. ex.api, swagger, ...self.serverRenderedUrls: The list of urls or regex that should be cached by the server after rendering. ex.about.html