diff --git a/README.md b/README.md index 0023b37..e2eed8f 100644 --- a/README.md +++ b/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 diff --git a/build.js b/build.js index 8a08fc9..e168381 100644 --- a/build.js +++ b/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 diff --git a/lighthouse-score.png b/lighthouse-score.png index 5b400a3..08aff88 100644 Binary files a/lighthouse-score.png and b/lighthouse-score.png differ diff --git a/public/favicons/site.webmanifest b/public/favicons/site.webmanifest deleted file mode 100644 index 45dc8a2..0000000 --- a/public/favicons/site.webmanifest +++ /dev/null @@ -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"} \ No newline at end of file diff --git a/src/data.json b/src/data.json index bd4fc29..466200b 100644 --- a/src/data.json +++ b/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", diff --git a/src/scripts/service-worker.js b/src/scripts/service-worker.js new file mode 100644 index 0000000..6232149 --- /dev/null +++ b/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); + }) + ); +}); \ No newline at end of file diff --git a/src/templates/footer-template.hbs b/src/templates/footer-template.hbs index d816e91..155ec8c 100644 --- a/src/templates/footer-template.hbs +++ b/src/templates/footer-template.hbs @@ -1,3 +1,16 @@ \ No newline at end of file + +{{#if enablePWA}} + +{{/if}} \ No newline at end of file diff --git a/src/templates/head-template.hbs b/src/templates/head-template.hbs index 1100cee..ac40cf9 100644 --- a/src/templates/head-template.hbs +++ b/src/templates/head-template.hbs @@ -18,8 +18,10 @@