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

mrcrix · March 11, 2021, 10:36am

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.

Tommertom · March 11, 2021, 2:16pm

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?

mrcrix · March 11, 2021, 7:17pm

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?

Tommertom · March 11, 2021, 7:33pm

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

mrcrix · March 12, 2021, 12:07pm

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

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

Tommertom · March 12, 2021, 2:56pm

Chome DevTools, only select the PWA things

mrcrix · March 12, 2021, 3:19pm

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…

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

Tommertom · March 12, 2021, 9:05pm

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

mrcrix · March 13, 2021, 10:18am

Oh thank you I would appreciate it, the url is visible on the last screenshot aboove, I prefer not to type it directly
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!!

Tommertom · March 13, 2021, 10:25am

Hi
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.

github.com

angular/angularfire/blob/a26676c69790b9a236dbc08504db705f983bd8fc/docs/messaging/messaging.md

# AngularFireMessaging

> The FCM JavaScript API lets you receive notification messages in web apps running in browsers that support the Push API.

### AngularFireMessaging is not out-of-the-box compatible with the Angular Service Worker

If you are using the Angular Service Worker, you are not currently able to use AngularFireMessaging out-of-the-box.
If you'd like this feature please add your 👍 to [this issue](https://github.com/angular/angular/issues/34352).

Your alternatives are to use
- [WorkboxJS](https://developers.google.com/web/tools/workbox/)
- Follow the discussion in [this issue](https://github.com/angular/angular/issues/34352) and [here](https://github.com/angular/angularfire/discussions/1923), manually registering the Angular Service Worker
- The Firebase Messaging Service Worker, which is detailed below

### Import the `NgModule`

Push Notifications for AngularFire are contained in the `@angular/fire/messaging` module namespace. Import the `AngularFireMessagingModule` in your `NgModule`. This sets up the `AngularFireMessaging` service for dependency injection.

```ts
import { BrowserModule } from '@angular/platform-browser';

This file has been truncated. show original

mrcrix · March 13, 2021, 10:46am

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…

mrcrix · March 13, 2021, 11:47am

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!

Tommertom · March 13, 2021, 12:38pm

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?

mrcrix · March 13, 2021, 12:46pm

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!