add PWA support

README.md

@@ -11,6 +11,7 @@ This is a sleek, lightweight single-page application designed to consolidate an
 - **Handlebars Templating**: Pre-compiled Handlebars templates for a JavaScript-free frontend.
 - **Optimized Performance**: Minimized CSS and HTML files, and optimized images for lightning-fast loading.
 - **Accessibility and SEO**: Adherence to web accessibility standards and SEO-friendly structure.
+- **Full PWA Support**: use browser caching and offline support for quick loading.
 - **Development Server**: Develop and view the changes on your page in high speed.
 
 ## Organizing the Files

build.js

@@ -61,16 +61,38 @@ function compileTemplate(templatePath, data) {
     return template(data);
 }
 
+function createManifest(data) {
+    return {
+        name: data.title || 'LinkMeUp',
+        short_name: data.short_title || 'LinkMeUp',
+        description: data.description || 'Get all weblinks of LinkMeUp',
+        start_url: '/',
+        display: 'standalone',
+        background_color: data.backgroundColor || '#ffffff',
+        theme_color: data.themeColor || '#0078D4',
+        icons: [
+            {
+                src: data.logo || '/android-chrome-192x192.png',
+                sizes: '192x192',
+                type: 'image/png',
+                purpose: "maskable"
+            },
+            {
+                src: data.logo2 || "/android-chrome-512x512.png",
+                sizes: "512x512",
+                type: "image/png",
+                purpose: "any"
+            }
+        ],
+    };
+}
+
 // Main build function
 function build() {
     const distPath = path.join(__dirname, 'dist');
     const baseHtmlPath = path.join(__dirname, 'public', 'index.html');
     const dataPath = path.join(__dirname, 'src', 'data.json');
     const cssPath = path.join(__dirname, 'public', 'styles', 'main.css');
-    const imagesSrcPath = path.join(__dirname, 'public', 'images');
-    const imagesDestPath = path.join(distPath, 'images');
-    const faviconSrcPath = path.join(__dirname, 'public', 'favicons');
-    const faviconDestPath = path.join(distPath);
     const headTemplatePath = path.join(__dirname, 'src', 'templates', 'head-template.hbs');
     const headerTemplatePath = path.join(__dirname, 'src', 'templates', 'header-template.hbs');
     const linksTemplatePath = path.join(__dirname, 'src', 'templates', 'social-links-template.hbs');
@@ -117,14 +139,27 @@ function build() {
     finalHtml = inlineCSS(finalHtml, css);
     finalHtml = minimizeHTML(finalHtml);
 
+    let manifest = createManifest(data.head)
+
     // Ensure dist directory exists
     if (!fs.existsSync(distPath)) {
         fs.mkdirSync(distPath);
     }
 
     writeFile(path.join(distPath, 'index.html'), finalHtml);
+    writeFile(path.join(distPath, 'manifest.json'), JSON.stringify(manifest));
+
+    const imagesSrcPath = path.join(__dirname, 'public', 'images');
+    const imagesDestPath = path.join(distPath, 'images');
     copyImages(imagesSrcPath, imagesDestPath);
+
+    const faviconSrcPath = path.join(__dirname, 'public', 'favicons');
+    const faviconDestPath = path.join(distPath);
     copyImages(faviconSrcPath, faviconDestPath)
+
+    const javascriptSrcPath = path.join(__dirname, 'src', 'scripts');
+    const javascriptDestPath = path.join(distPath);
+    copyImages(javascriptSrcPath, javascriptDestPath)
 }
 
 // Run the build process

public/favicons/site.webmanifest

@@ -1 +0,0 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/data.json

@@ -1,11 +1,14 @@
 {
     "theme": "galaxy",
+    "enablePWA": true,
     "head": {
         "title": "LinkMeUp WieErWill",
+        "short_title": "WieErWill",
         "description": "Get all weblinks of WieErWill.",
         "keywords": "social media links, software architecture, web development, single-page application, web performance",
         "url": "https://link.wieerwill.de/",
-        "logo": "favicons/android-chrome-192x192.png"
+        "logo": "android-chrome-192x192.png",
+        "themecolor": "#0078D4"
     },
     "header": {
         "title": "WieErWill",

src/scripts/service-worker.js

@@ -0,0 +1,19 @@
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open('linkemeup').then((cache) => {
+            return cache.addAll([
+                '/',
+                '/index.html',
+                /* Add other URLs of assets to cache */
+            ]);
+        })
+    );
+});
+
+self.addEventListener('fetch', (event) => {
+    event.respondWith(
+        caches.match(event.request).then((response) => {
+            return response || fetch(event.request);
+        })
+    );
+});

src/templates/footer-template.hbs

@@ -1,3 +1,16 @@
 <footer>
     <p>&copy; {{{footer.copyright}}} {{currentYear}}</p>
 </footer>
+{{#if enablePWA}}
+<script>
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/service-worker.js')
+      .then((registration) => {
+        console.log('Service Worker registered with scope:', registration.scope);
+      })
+      .catch((error) => {
+        console.error('Service Worker registration failed:', error);
+      });
+  }
+</script>
+{{/if}}

src/templates/head-template.hbs

@@ -18,8 +18,10 @@
     <title>LinkMeUp WieErWill</title>
     <meta name="description" content="{{head.description}}">
     <meta name="keywords" content="{{head.keywords}}">
+    <meta name="theme-color" content="{{head.themecolor}}">
     <link rel="canonical" href="{{head.url}}">
     <meta property="og:title" content="{{head.title}}">
     <meta property="og:description" content="{{head.description}}">
     <meta property="og:image" content="{{head.url}}{{head.logo}}">
+    <link rel="manifest" href="/manifest.json">
 </head>