Add progressive web app support.

This commit is contained in:
Spencer Ofwiti
2021-03-22 22:13:11 +03:00
parent 0668abd62d
commit c864f3a787
16 changed files with 331 additions and 45 deletions

View File

@@ -1,5 +1,6 @@
import {ChangeDetectionStrategy, Component, HostListener} from '@angular/core';
import {ChangeDetectionStrategy, Component, HostListener, OnInit} from '@angular/core';
import {AuthService, LoggingService, TokenService, TransactionService} from '@app/_services';
import {SwUpdate} from '@angular/service-worker';
@Component({
selector: 'app-root',
@@ -7,7 +8,7 @@ import {AuthService, LoggingService, TokenService, TransactionService} from '@ap
styleUrls: ['./app.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
export class AppComponent implements OnInit {
title = 'CICADA';
readyStateTarget: number = 3;
readyState: number = 0;
@@ -18,6 +19,7 @@ export class AppComponent {
private tokenService: TokenService,
private transactionService: TransactionService,
private loggingService: LoggingService,
private swUpdate: SwUpdate
) {
(async () => {
await this.authService.mutableKeyStore.loadKeyring();
@@ -28,6 +30,16 @@ export class AppComponent {
this.onResize(this.mediaQuery);
}
ngOnInit(): void {
if (!this.swUpdate.isEnabled) {
this.swUpdate.available.subscribe(() => {
if (confirm('New Version available. Load New Version?')) {
window.location.reload();
}
});
}
}
// Load resize
onResize(e): void {
const sidebar = document.getElementById('sidebar');

View File

@@ -17,6 +17,7 @@ import {LoggerModule} from 'ngx-logger';
import {environment} from '@src/environments/environment';
import {ErrorInterceptor, HttpConfigInterceptor, LoggingInterceptor} from '@app/_interceptors';
import {MutablePgpKeyStore} from '@app/_pgp';
import { ServiceWorkerModule } from '@angular/service-worker';
@NgModule({
declarations: [
@@ -35,7 +36,8 @@ import {MutablePgpKeyStore} from '@app/_pgp';
serverLogLevel: environment.serverLogLevel,
serverLoggingUrl: `${environment.loggingUrl}/api/logs/`,
disableConsoleLogging: false
})
}),
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
],
providers: [
AuthGuard,

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 792 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 958 B

View File

@@ -5,18 +5,21 @@
<title>CICADA</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="A fully featured admin client for managing users and transactions in the CIC network." name="description" />
<meta content="Spencer Ofwiti" name="author" />
<meta content="A fully featured admin client for managing users and transactions in the CIC network." name="description"/>
<meta content="Spencer Ofwiti" name="author"/>
<link rel="icon" type="image/x-icon" href="assets/images/CIC-Logo-white.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#1976d2">
</head>
<body class="mat-typography">
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script async src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script async="" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script async="" src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>

70
src/manifest.webmanifest Normal file
View File

@@ -0,0 +1,70 @@
{
"lang": "en",
"name": "CICADA",
"short_name": "CICADA",
"description": "A fully featured admin client for managing users and transactions in the CIC network.",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"orientation": "any",
"scope": "/",
"start_url": ".",
"shortcuts": [
{
"name": "Authentication",
"short_name": "auth",
"description": "Authentication using private keys",
"url": "/auth"
}
],
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
]
}