@rfprodz/client-pwa-offline
Version:
PWA offline feature for Angular clients.
132 lines (124 loc) • 8.12 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, InjectionToken, Injectable, Inject, NgModule } from '@angular/core';
import * as i3 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i1$1 from '@angular/router';
import { 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(location) {
this.location = 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: "19.1.5", ngImport: i0, type: AppPwaOfflineComponent, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", 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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", 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"] }]
}], ctorParameters: () => [{ type: i1.Location }] });
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(navigator, router) {
this.navigator = navigator;
this.router = 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: "19.1.5", ngImport: i0, type: AppPwaOfflineInterceptor, deps: [{ token: NAVIGATOR }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: AppPwaOfflineInterceptor, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: AppPwaOfflineInterceptor, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: Navigator, decorators: [{
type: Inject,
args: [NAVIGATOR]
}] }, { type: i1$1.Router }] });
const routes = [
{
path: 'offline',
component: AppPwaOfflineComponent,
},
];
class AppPwaOfflineRoutingModule {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: AppPwaOfflineRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: AppPwaOfflineRoutingModule, imports: [i1$1.RouterModule], exports: [RouterModule] }); }
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: AppPwaOfflineRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", 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: "19.1.5", ngImport: i0, type: AppPwaOfflineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: AppPwaOfflineModule, declarations: [AppPwaOfflineComponent], imports: [CommonModule, MatIconModule, MatButtonModule, AppPwaOfflineRoutingModule] }); }
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", 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: "19.1.5", 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