504

[BLecha]

I created a project ng new testpwa then add pwa ng add @angular/pwa all latest cli ng and pwa.

I have on my local IIS under default website a web api project visions under vision I added a new web api project testpwa which is pinting to the dist/testpwa folder of my ng project I described above.

so in my testpwa angular project i run ng build --prod.

The I go on the chrome browser in incognito mode and navigate to my https://localhost/visions/testpwa/ and my ng app open and runs no problem. Then I go to devtools application tab and I can see the ngsw-worker.js is registered then I select offline and update on reload in the application tab of devtools and reload the page everything works as expected the ng app is displayed and my external images from the web are also displayed in the network tab in size column I can see they are loaded from the service worker.

But when I take out my cabel and physically disconnect from internet and realod the ng app everything works fine except the external images from the web. Its says 504 timeout and is red the network tab.

I added everything to datagroups in the urls. I dont know why it does not load the images from the service worker when I physically disconnect internet but loads them when I simulate it through dev tools offline mode.

I did a lot of research on the internet but nothing usefull so far for this specific problem.

Kind Regards

Lecha

[webmaxru]

Hello! Try to do the following:

• Build, deploy, open the app in the browser
• Refresh the page one more time (this is important!)
• Now it's ok to turn off the network

If the above option fixed your problem, here is the explanation: on the very first page load and SW registration, the SW does not intercept the http calls, therefore fetch event is not fired, therefore dataGroups part of configuration (runtime caching) is not active. This is all according to SW specification and explained here: https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle

By default, a page's fetches won't go through a service worker unless the page request itself went through a service worker. So you'll need to refresh the page to see the effects of the service worker. clients.claim() can override this default, and take control of non-controlled pages.

Code sample: https://stackoverflow.com/a/45010127

[BLecha]

@webmaxru Hello, thank you for quick responce. About your eloboration yes in fact I already had read about this however this is not solving the problem Im facing. As I said its all works when I go offline through the browser even the external images are displayed as example "https://www.meteotrentino.it/protcivtn-meteo/api/front/mappeImg?nome=MappaBase_0.png".

But when I take out the internet cable and refresh everything works but the external images are not displayed with the error 504 gateway timeout (by the way everything that is from the web be it for example "https://fonts.googleapis.com/css?family=Ubuntu" or "https://use.fontawesome.com/releases/v5.6.1/css/all.css") are not retrieved from the cache as well with the same error 504. This is what I am not understanding why it works when internet is disconnected in the browser but does not work when I disconnect the internet cable. below is my ngsw-config.json `{ "index": "/index.html", "assetGroups": [ { "name": "app", "installMode": "prefetch", "resources": { "files": [ "/favicon.ico", "/index.html", "/.css", "/.js" ], "urls":["https://fonts.googleapis.com/css?family=Ubuntu","https://use.fontawesome.com/releases/v5.6.1/css/all.css" ] } }, { "name": "assets", "installMode": "lazy", "updateMode": "prefetch", "resources": { "files": [ "/assets/*", "/.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)" ] } } ], "dataGroups": [ { "name": "api-OutputVisions", "urls": [ "https://www.meteotrentino.it/**"
], "cacheConfig": { "strategy": "freshness", "maxSize": 100, "maxAge": "1d", "timeout": "10s" } }

]

} `

Kind Regards

Lecha

[BLecha]

@webmaxru

Hallo Maxim I figured out what the problem was. I needed to add crossorigin="anonymous" to my img tag. Its seems that angular pwa does not cache opaque responces.

[webmaxru]

Good to know! Thank you for following up on this!