My Pwa doesnt work offline. I have all data available on local storage

Hi everyone, I have a problem with my PWA ionic5 + angular 10.x. on firebase.

All the data I use on the app is served only by localstorage so whenever I access the pwa I have already all the data on client side, I just need to update some data when it is needed.

Now, it works as it should without any issue, the problem is when I switch off the network simulating no internet connection then there is nothing to do the app doesnt even start, I only get the message from the browser saying no internet connection.

In the same moment I can inspect the localstorage and all the data are there available so I cannot understand what is wrong…

I just would need that the pwa to start as usual and access localstorage (in app.component) to get all the data needed to work.

Is there a way to have a control of the app on browser or in PWA mode if there is not an active connection?

P.S: I use ionic for the website, the pwa and the usual native versions.

What does Lighthouse say about your PWA?
Can you do a Lighthouse check on PWA compliance? (if never done)

Is there authentication flow which needs server contact?

Nothing incredibly quick but the speed it is not an important factor, more than this it looks ok.

I have the authentication to access some funcionalities but there are lot of pages which doesnt need any authentication.

In any case even the free pages uses an auth service to detect if you are logged or not.

do you think this could be the problem?

Depends on the details of performance. You need a valid reponse when offline. That earmarks your offline capabilities.

I couldn’t find exactly the same fields like yours…

Infact I cant see anything about offline capabilities, how to get them?

Chome DevTools, only select the PWA things

I did it already, and I did it again marking only pwa things but I get the same results as before…

I have checked everywhere to see If I have other options but no way… :slight_smile:

I have few other info but nothing about the page fast enough or respond with 200 when offline etc…

Well if u like me to run te test, dm me the url? Or post it here?

Oh thank you I would appreciate it, the url is visible on the last screenshot aboove, I prefer not to type it directly :slight_smile:
Another thing that I have seen is that if I turn off the connection once the home is loaded I can go everywhere (in all pages where it is not needed an authentication) without problems but if I hit reload, then nothing it doesnt start at all.

Thank you again for yout help!!

I think you do the service worker registration incorrectly. At least, you choose to do some sort of import with two service workers, but not the out-of-the-box angular thing.

No service worker that handles offline support

Maybe consider using the angular service worker out of the box, before trying to do your own customisations. And if you need to tweak the angular service worker, check how that is done.


Btw, if you want to do FCM using angular, you dont need to add additional service worker. FCM works fine with out-of-the-box service worker of angular. Just be aware that messaging in PWA wont work on iOS.

Nice suggestions, thank you!
By the way I have found what is the problem, it is the paypal script that it is launched by mistake on startup and if offline it gives error 504 stopping the execution. Once removed the paypal script in the head it starts working as usual even when offline.
In any case your suggestions will help me to make it better.

Thank you!

P.S: Yes I know that problem with iOS, I hope in the future it will be working there too…

1 Like

No I made a mistake the paypal script in the head didnt fix the issue, I will try as per your suggestion.

I tried to publish with the use of the standard service worker but nothing changed… if you have any other clue let me know!

make an empty project (starter project) and publish as PWA. So at least you know it can work with whatever setup you have in mind in terms of hosting.

If that works, then it is a matter of comparing?

as hosting it’s a firebase project so it’s hosted in google cloud, I dont think it depends from the hosting.
Thank you for your help! :slight_smile: