@rfprodz/client-pwa-offline
Version:
PWA offline feature for Angular clients.
128 lines (120 loc) • 7.97 kB
JavaScript
import { Location, CommonModule } from '@angular/common';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import * as i0 from '@angular/core';
import { inject, ChangeDetectionStrategy, Component, InjectionToken, Injectable, NgModule } from '@angular/core';
import * as i2 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i1$1 from '@angular/router';
import { Router, RouterModule } from '@angular/router';
import { NEVER } from 'rxjs';
/**
* PWA offline component.
* Displays a view that notifies the user of the offline network status.
*/
class AppPwaOfflineComponent {
constructor() {
this.location = inject(Location);
}
/**
* Loads a previous route that failed to load due to offline status.
*/
back() {
this.location.back();
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AppPwaOfflineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: AppPwaOfflineComponent, isStandalone: false, selector: "app-pwa-offline", ngImport: i0, template: "<div class=\"container\">\n <span class=\"container__message\"><mat-icon color=\"warn\">wifi_off</mat-icon></span>\n <span class=\"container__message mat-body-2\">You are offline.</span>\n <span class=\"container__message mat-body-2\">Please check your network connection.</span>\n <button mat-button (click)=\"back()\" color=\"accent\"><mat-icon>refresh</mat-icon> Retry</button>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.container{display:flex;flex-direction:column;align-content:center;align-items:center;justify-content:center;justify-items:center;width:100%;height:100%}.container__message{flex:0 1 auto}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AppPwaOfflineComponent, decorators: [{
type: Component,
args: [{ selector: 'app-pwa-offline', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"container\">\n <span class=\"container__message\"><mat-icon color=\"warn\">wifi_off</mat-icon></span>\n <span class=\"container__message mat-body-2\">You are offline.</span>\n <span class=\"container__message mat-body-2\">Please check your network connection.</span>\n <button mat-button (click)=\"back()\" color=\"accent\"><mat-icon>refresh</mat-icon> Retry</button>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.container{display:flex;flex-direction:column;align-content:center;align-items:center;justify-content:center;justify-items:center;width:100%;height:100%}.container__message{flex:0 1 auto}\n"] }]
}] });
const NAVIGATOR = new InjectionToken('NAVIGATOR');
function navigatorFactory() {
return window.navigator;
}
const navigatorProvider = {
provide: NAVIGATOR,
useFactory: navigatorFactory,
};
/**
* PWA offline interceptor.
* Redirects to a dedicated view when the app goes offline.
*/
class AppPwaOfflineInterceptor {
constructor() {
this.navigator = inject(NAVIGATOR);
this.router = inject(Router);
}
intercept(req, next) {
const routeLoaded = this.router.url.includes('offline');
if (!this.navigator.onLine && !routeLoaded) {
void this.router.navigateByUrl('/offline');
return NEVER;
}
return next.handle(req);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AppPwaOfflineInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AppPwaOfflineInterceptor, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AppPwaOfflineInterceptor, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const routes = [
{
path: 'offline',
component: AppPwaOfflineComponent,
},
];
class AppPwaOfflineRoutingModule {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AppPwaOfflineRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.12", ngImport: i0, type: AppPwaOfflineRoutingModule, imports: [i1$1.RouterModule], exports: [RouterModule] }); }
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AppPwaOfflineRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AppPwaOfflineRoutingModule, decorators: [{
type: NgModule,
args: [{
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
}]
}] });
/**
* PWA offline module.
* Provides an interceptor that redirects to a dedicated view when the app goes offline.
*/
class AppPwaOfflineModule {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AppPwaOfflineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.12", ngImport: i0, type: AppPwaOfflineModule, declarations: [AppPwaOfflineComponent], imports: [CommonModule, MatIconModule, MatButtonModule, AppPwaOfflineRoutingModule] }); }
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AppPwaOfflineModule, providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AppPwaOfflineInterceptor,
multi: true,
},
navigatorProvider,
], imports: [CommonModule, MatIconModule, MatButtonModule, AppPwaOfflineRoutingModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AppPwaOfflineModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, MatIconModule, MatButtonModule, AppPwaOfflineRoutingModule],
declarations: [AppPwaOfflineComponent],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AppPwaOfflineInterceptor,
multi: true,
},
navigatorProvider,
],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { AppPwaOfflineModule };
//# sourceMappingURL=rfprodz-client-pwa-offline.mjs.map