CODEWITHSUNDEEP
progressive-web-appsangular-service-worker
Kamaldeep Singh
Kamaldeep Singh

Reputation: 907

PWA app not working in the offline mode when using the angular/service-worker

I have deployed the PWA app on the server but somehow it is not working in the offline mode. Please find the URL https://notifystaging.securenow.in/app

When online, the service worker seems to be getting perfectly installed. Please refer the screenshot for the same. For service worker installation, I am using @angular/service-worker Please let me know the possible loop holes where I should check.

enter image description here

enter image description here

Upvotes: 0

Views: 2491

Answers (2)

ASR
ASR

Reputation: 319

Issue that i faced was, After deployment on Azure, Angular PWA service worker does not fetch the api response from cache in Offline mode, and also the manifest created was showing error in deployed version, whereas in localhost it was all working perfect. the main issue for me was: By default, IIS does not serve any files that does not have a MIME map associated with it in its (IIS) core settings. To address this challenge, you will need to map the .webmanifest file extension to its appropriate MIME type. For this you need to add following to web.config file:

        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
        </staticContent>

this helps azure to understand our manifest.webmanifest file which otherwise it will not be able to. After this it was able to detect manifest.webmanifest file which solved my both issues, Fetching the response from cache in Offline mode, And also with manifest file now my Angular PWA app was installable with app icon and all other features. You can also refer to my question to get rest of details on ngsw-config.json file etc, After deployment Angular PWA service worker does not fetch the api response from cache in Offline mode

Upvotes: 0

vndpal
vndpal

Reputation: 757

I know I am very late on this, I have also struggled on this and finally followed these steps to solve the issue:

  1. In manifest.JSON file, set "scope": "." and "start_url": "./". This indicate that you are using sub-directory.

  2. Then build the project using CLI command ng build --prod --baseHref=/Your_sub_directory_name/

  3. And finally paste the dist folder content to your pointed Your_sub_directory_name IIS location (or whichever server you are using).

  4. Then just refresh page and wait to register the service worker, you can check this in application tab of chrome's developer tool. Once service worker is reigstered, just switch to offline mode and you'll the page will work fine in offline.

Upvotes: 1

Related Questions