Angular PWA Offline

RxJS operator and other utils catching offline errors in Angular apps and PWA.

FORK

This repo is maintained beacause the author of https://github.com/cyrilletuzi/ngx-pwa-offline decided to remove the code.

Why this lib?

You know the Angular async pipe, right? Amazing tool, but there is one big issue with it: by letting Angular automatically subscribing and unsubscribing your Observable or Promise, you can't handle the error callback.

Problem is: in a web app, especially in a Progressive Web App (PWA), a lot of your Observable or Promise are about HTTP requests, and they will inevitably fail when the user is offline (or the server is inaccessible).

So if you want to get the benefice of the async pipe without breaking your app, you need to catch offline errors on every page. Painful.

So here it is: a RxJS operator catching offline errors for you, so you can use the async pipe everywhere!

There are also other tools for offline management, like online status helpers and guards.

Getting started

Install with npm or another package manager:

1npm i @ngx-builders/pwa-offline
2# Angular 13
3npm install @ngx-pwa/offline@13
4

Then you just have to inject the Network service at least once, for example in AppComponent:

1import { Network } from '@ngx-builders/pwa-offline';
2
3@Component()
4export class AppComponent {
5
6  constructor(protected network: Network) {}
7
8}

Note: you may not use the service itself and just the RxJS operator, but an injection is required in all cases to setup the service.

Catching offline errors

RxJS operator

Just use the catchOffline RxJS operator:

1import { catchOffline } from '@ngx-builders/pwa-offline';
2
3@Component({
4  selector: 'some-page',
5  template: `
6    <presentation-component [data]="data$ | async"></presentation-component>
7  `
8})
9export class SomePageComponent implements OnInit {
10
11  data$: Observable<Data>;
12
13  constructor(protected someService: SomeService) {}
14
15  ngOnInit() {
16
17    this.data$ = this.someService.getData().pipe(catchOffline());
18
19  }
20
21}

As it may cause a redirection, your app must use Angular router (RouterModule.forRoot()).

Redirecting

By default, catchOffline will redirect to:

• /offline if the user is offline (no Internet connection),
• /unavailable if the service is inaccessible (5xx HTTP errors).

Note: creating the corresponding routes and components in your app is up to you, as the lib can't decide the content and design of these pages for you.

If you want to change the redirection URLs:

1import { OfflineModule } from '@ngx-builders/pwa-offline';
2
3@NgModule({
4  imports: [
5    OfflineModule.forRoot({
6      routeOffline: '/oops/offline',
7      routeUnavailable: '/oops/unavailable',
8    })
9  ]
10})
11export class AppModule {}

Note: you need to provide the full URL, so the leading / is required.

Online status

Static check

To check online status at some point:

1import { Network } from '@ngx-builders/pwa-offline';
2
3@Component({
4  template: `
5    <online-component *ngIf="online"></online-component>
6    <offline-component *ngIf="!online"></offline-component>
7  `
8})
9export class SomePageComponent implements OnInit {
10
11  online = this.network.online;
12
13  constructor(protected network: Network) {}
14
15}

Observable check

To observe when online status changes:

1import { Network } from '@ngx-builders/pwa-offline';
2
3@Component({
4  template: `
5    <online-component *ngIf="online$ | async; else offline"></online-component>
6    <ng-template #offline>
7      <offline-component></offline-component>
8    </ng-template>
9  `
10})
11export class SomePageComponent implements OnInit {
12
13  online$ = this.network.onlineChanges;
14
15  constructor(protected network: Network) {}
16
17}

Notes:

• as usual in Angular, do not use the async pipe twice on the same Observable. The example above shows you how to manage those situations in the proper way,
• this Observable does not auto-complete. Then you should either use the async pipe as above for automatic unsubscription, either you should unsubscribe manually (in ngOnDestroy method in most cases),
• be aware the online status is provided by the browser and it is not always reliable: for example, if your computer is connected to a network but with no Internet access, the browser will still says it's online.

Guards

Guards catching offline errors are also available, for CanActivate, CanActivateChild and CanLoad. For example:

1import { OnlineGuard } from '@ngx-builders/pwa-offline';
2
3const routes: Routes = [
4  { path: 'some-page', component: SomePageComponent, canActivate: [OnlineGuard] }
5];

By default, guards will redirect to the /offline page (so your app must use Angular router: RouterModule.forRoot()). If you just want to block the navigation:

1import { OfflineModule } from '@ngx-builders/pwa-offline';
2
3@NgModule({
4  imports: [
5    OfflineModule.forRoot({ guardsRedirect: false })
6  ]
7})
8export class AppModule {}

Angular support

This lib supports the last stable version of Angular.

This module supports AoT pre-compiling and Ivy.

This module supports Universal server-side rendering.

License

MIT

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Omkar kulkarni 💻

This project follows the all-contributors specification. Contributions of any kind welcome!