Offline Promise Handling in Angularfire2

Question

As per my understanding, Angularfire2 returns a Promise < void > whenever a query runs successfully(except fetch when it returns data).

Functionality:

I have a application where when a item is saved a function is called inside which if the set query is run successfully(i.e it receives a Promise< void >) it navigates to the previous page. It works perfectly when app is online but the app also needs to work offline. I have enabled persistence and configured service workers for the same

Issue

But when offline the code after the query returns a Promise is not called.So what should be the expected logic or behaviour during offline.

                this._itemService.setItem(item).then(()=>{
                    const message = item.name + saveMessage;
                    this.snackBar.open(message," ",{duration:2000});
                    this.location.back();

                }

score 0 · Answer 1 · answered May 29 '19 at 07:20

0

The code after the promise isn't called cause you get an Error, as you cann't access the source when you are offline. Add an ErrorHandling after the Promise, as described here: Using success/error/finally/catch with Promises in AngularJS

In the ErrorHandling you can add the behaviour of the app, when it is offline.

this._itemService.setItem(item).then(()=>{
    const message = item.name + saveMessage;
    this.snackBar.open(message," ",{duration:2000});
    this.location.back();
).catch((e) => {
    //Do what you want when you don't get the Promise
    this.location.back();
});

answered May 29 '19 at 07:20

shildmaiden

769
10
16

Thanks for the quick response. Sorry after implementing the above solution I faced another issue. Angularfire2 doesn't return a error when offline so the catch block is never called. – Dev Gourav May 29 '19 at 07:37
do you use the promise from rxjs library? And can xou show us the code from your itemService, speciall the function setItem. Thank you – shildmaiden May 29 '19 at 08:10
promise is from javascript library not rxjs – Dev Gourav May 29 '19 at 08:17

score 0 · Answer 2 · answered May 29 '19 at 08:31

           let itemPromise= this._itemService.setItem(item);

            if(navigator.onLine && itemPromise instanceof Promise){
                itemPromise.then(()=>{
                    const message = item.name + "account saved";
                    this.snackBar.open(message," ",{duration:2000});

                   ...More code
                    this.closeClicked();
                });
            }else{

                const message = item.name + "account saved";
                this.snackBar.open(message," ",{duration:2000});
                this.closeClicked();
            }

Offline Promise Handling in Angularfire2

2 Answers2