CODEWITHSUNDEEP
c#asp.net-coreweb-applicationsprogressive-web-appsweb-essentials
Dijish U.K
Dijish U.K

Reputation: 159

serviceworker location is wrong when integrating PWA to .NET Web Application using WebEssentials.AspNetCore.PWA

I am trying to integrate PWA to my .NET Web Application using WebEssentials.AspNetCore.PWA .

I am following this tutorial https://medium.com/beginners-guide-to-mobile-web-development/introduction-to-pwa-in-asp-net-core-application-da96c7cc4918

I have done everything that is mentioned in this tutorial. But I am getting following error

Uncaught (in promise) TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

When I looked the doc of WebEssentials.AspNetCore.PWA : https://github.com/madskristensen/WebEssentials.AspNetCore.ServiceWorker]2

The following line is supposed to be added above </body> tag 

<script>'serviceWorker'in navigator&&navigator.serviceWorker.register('/serviceworker')</script>

instead of this line mine has following line

<script nws-csp-add-nonce='true'>'serviceWorker'in navigator&&navigator.serviceWorker.register('~/serviceworker')</script>

As you can see path of my serviceworker is wrong ('~/serviceworker') . How can I fix this path error of service worker?

Upvotes: 2

Views: 1198

Answers (1)

Tim Maes
Tim Maes

Reputation: 612

It fails because of the tilde ~

A workaround is like this:

Disable registering the service worker and manifest:

services.AddProgressiveWebApp(new PwaOptions
{
RegisterServiceWorker = false,
RegisterWebmanifest = false,
OfflineRoute = "offline"
});

Then, you can manually add them in _Layout (where manifest.webmanifest is your webmanifest.json file under wwwroot)

<meta name="theme-color" content="#FFFFFF" />
<link rel="manifest" href="/manifest.webmanifest" />

And finally add the service worker

<script>'serviceWorker' in navigator && navigator.serviceWorker.register('/serviceworker')</script>

Upvotes: 2

Related Questions