Merge pull request #4 from alexfriesen/feature/pwa

✨ PWA
alexfriesen · Dec 2, 2023 · faea2c8 · faea2c8
2 parents 8383a05 + 8007790
commit faea2c8
Show file tree

Hide file tree

Showing 14 changed files with 129 additions and 11 deletions.
diff --git a/angular.json b/angular.json
@@ -23,12 +23,17 @@
  "polyfills": ["zone.js"],
  "tsConfig": "tsconfig.app.json",
  "inlineStyleLanguage": "scss",
- "assets": ["src/favicon.ico", "src/assets"],
+ "assets": [
+ "src/favicon.ico",
+ "src/manifest.webmanifest",
+ "src/assets"
+ ],
  "styles": [
  "@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.scss"
  ],
- "scripts": []
+ "scripts": [],
+ "serviceWorker": "ngsw-config.json"
  },
  "configurations": {
  "production": {

diff --git a/ngsw-config.json b/ngsw-config.json
@@ -0,0 +1,30 @@
+{
+ "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+ "index": "/index.html",
+ "assetGroups": [
+ {
+ "name": "app",
+ "installMode": "prefetch",
+ "resources": {
+ "files": [
+ "/favicon.ico",
+ "/index.html",
+ "/manifest.webmanifest",
+ "/*.css",
+ "/*.js"
+ ]
+ }
+ },
+ {
+ "name": "assets",
+ "installMode": "lazy",
+ "updateMode": "prefetch",
+ "resources": {
+ "files": [
+ "/assets/**",
+ "/media/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+ ]
+ }
+ }
+ ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
  "@angular/platform-browser": "^17.0.0",
  "@angular/platform-browser-dynamic": "^17.0.0",
  "@angular/router": "^17.0.0",
+ "@angular/service-worker": "^17.0.0",
  "@ngneat/elf": "^2.4.0",
  "@ngneat/elf-entities": "^4.4.3",
  "@ngneat/transloco": "^6.0.0",

diff --git a/src/app/app.config.ts b/src/app/app.config.ts
@@ -1,6 +1,11 @@
-import { ApplicationConfig, importProvidersFrom } from '@angular/core';
-import { provideHttpClient } from '@angular/common/http';
+import {
+ ApplicationConfig,
+ importProvidersFrom,
+ isDevMode,
+} from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideServiceWorker } from '@angular/service-worker';
+import { provideHttpClient } from '@angular/common/http';
 import { MixedCdkDragDropModule } from 'angular-mixed-cdk-drag-drop';
 import { provideTransloco } from '@ngneat/transloco';
 
@@ -13,6 +18,10 @@ export const appConfig: ApplicationConfig = {
  providers: [
  provideAnimations(),
  provideHttpClient(),
+ provideServiceWorker('ngsw-worker.js', {
+ enabled: !isDevMode(),
+ registrationStrategy: 'registerWhenStable:30000',
+ }),
  importProvidersFrom(MixedCdkDragDropModule),
  provideTransloco({
  config: generateAutoConfig(['en', 'de']),

diff --git a/src/assets/icons/icon-128x128.png b/src/assets/icons/icon-128x128.png
diff --git a/src/assets/icons/icon-144x144.png b/src/assets/icons/icon-144x144.png
diff --git a/src/assets/icons/icon-152x152.png b/src/assets/icons/icon-152x152.png
diff --git a/src/assets/icons/icon-192x192.png b/src/assets/icons/icon-192x192.png
diff --git a/src/assets/icons/icon-512x512.png b/src/assets/icons/icon-512x512.png
diff --git a/src/assets/icons/icon-72x72.png b/src/assets/icons/icon-72x72.png
diff --git a/src/assets/icons/icon-96x96.png b/src/assets/icons/icon-96x96.png
diff --git a/src/index.html b/src/index.html
@@ -1,23 +1,24 @@
 <!doctype html>
 <html lang="en">
 <head>
- <meta charset="utf-8">
+ <meta charset="utf-8"/>
  <title>PDF-Tools</title>
  <meta name="description" content="Merge PDF's, Rearange PDF's and remove Pages"/>
  <meta name="keywords" content="PDF, Edit PDF, Merge PDF, Sort PDF"/>
  <meta property="og:type" content="website"/>
  <meta property="og:site_name" content="PDF-Tools"/>
  <meta property="og:title" content="PDF-Tools"/>
 
- <base href="/">
- <meta name="viewport" content="width=device-width, initial-scale=1">
+ <base href="/"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="mobile-web-app-capable" content="yes"/>
- <meta name="theme-color" content="#4c8080"/>
- <meta name="msapplication-TileColor" content="#4c8080"/>
+ <meta name="theme-color" content="#3f51b5"/>
+ <meta name="msapplication-TileColor" content="#3f51b5"/>
 
- <link rel="icon" type="image/x-icon" href="favicon.ico">
- <link rel="icon" type="image/svg+xml" href="assets/pdf.svg">
+ <link rel="icon" type="image/x-icon" href="favicon.ico"/>
+ <link rel="icon" type="image/svg+xml" href="assets/pdf.svg"/>
+ <link rel="manifest" href="manifest.webmanifest"/>
 </head>
 <body class="mat-typography">
  <app-root class="mat-app-background">

diff --git a/src/manifest.webmanifest b/src/manifest.webmanifest
@@ -0,0 +1,53 @@
+{
+ "name": "PDF-tools",
+ "short_name": "PDF-tools",
+ "theme_color": "#3f51b5",
+ "background_color": "#fafafa",
+ "display": "standalone",
+ "scope": "./",
+ "start_url": "./",
+ "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-512x512.png",
+ "sizes": "512x512",
+ "type": "image/png",
+ "purpose": "maskable any"
+ }
+ ]
+}