gkucmierz/tools-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pwa): add PWA support with auto-update and install prompt
All checks were successful
Deploy to Production / deploy (push) Successful in 12s
Details

Browse Source
This commit is contained in:
Grzegorz Kucmierz
2026-02-26 23:46:17 +00:00
parent bec57f9e49
commit 8655533a2d
6 changed files with 4949 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -3,6 +3,8 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/favicon.svg" />
<meta name="theme-color" content="#242424" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tools App</title> <title>Tools App</title>
</head> </head>

4772
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -15,6 +15,7 @@
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^6.0.2", "@vitejs/plugin-vue": "^6.0.2",
"vite": "^7.3.1" "vite": "^7.3.1",
"vite-plugin-pwa": "^1.2.0"
} }
} }

2
src/App.vue
View File

@@ -4,6 +4,7 @@ import { useRouter } from 'vue-router'
import Header from './components/Header.vue' import Header from './components/Header.vue'
import Footer from './components/Footer.vue' import Footer from './components/Footer.vue'
import Sidebar from './components/Sidebar.vue' import Sidebar from './components/Sidebar.vue'
import InstallPrompt from './components/InstallPrompt.vue'
const isSidebarOpen = ref(window.innerWidth >= 768) const isSidebarOpen = ref(window.innerWidth >= 768)
const router = useRouter() const router = useRouter()
@@ -51,6 +52,7 @@ onUnmounted(() => {
</main> </main>
</div> </div>
<Footer /> <Footer />
<InstallPrompt />
</template> </template>
<style scoped> <style scoped>

144
src/components/InstallPrompt.vue Normal file
View File

@@ -0,0 +1,144 @@
<template>
<div v-if="showInstallPrompt" class="install-prompt">
<div class="prompt-content">
<span class="prompt-text">Zainstaluj aplikację dla szybszego dostępu</span>
<div class="prompt-actions">
<button @click="installPWA" class="install-btn">Zainstaluj</button>
<button @click="dismissPrompt" class="dismiss-btn">✕</button>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
const showInstallPrompt = ref(false)
let deferredPrompt = null
const handleBeforeInstallPrompt = (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault()
// Stash the event so it can be triggered later.
deferredPrompt = e
// Update UI to notify the user they can add to home screen
showInstallPrompt.value = true
}
const installPWA = async () => {
if (!deferredPrompt) return
// Show the install prompt
deferredPrompt.prompt()
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice
console.log(`User response to the install prompt: ${outcome}`)
// We've used the prompt, and can't use it again, throw it away
deferredPrompt = null
showInstallPrompt.value = false
}
const dismissPrompt = () => {
showInstallPrompt.value = false
deferredPrompt = null
}
onMounted(() => {
window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
})
onBeforeUnmount(() => {
window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
})
</script>
<style scoped>
.install-prompt {
position: fixed;
bottom: 80px; /* Above footer */
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 400px;
background-color: var(--card-bg);
border: 1px solid var(--accent-color);
border-radius: 12px;
padding: 1rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 100;
animation: slideUp 0.3s ease-out;
}
.prompt-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.prompt-text {
font-size: 0.9rem;
font-weight: 500;
color: var(--text-color);
}
.prompt-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.install-btn {
background-color: var(--accent-color);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.dismiss-btn {
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 1.2rem;
cursor: pointer;
padding: 0 0.5rem;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translate(-50%, 20px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
@media (min-width: 768px) {
.install-prompt {
bottom: 2rem;
right: 2rem;
left: auto;
transform: none;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
</style>

29
vite.config.js
View File

@@ -1,10 +1,37 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
import packageJson from './package.json' import packageJson from './package.json'
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [
vue(),
VitePWA({
registerType: 'autoUpdate',
includeAssets: ['favicon.svg'],
manifest: {
name: 'Tools App',
short_name: 'Tools',
description: 'A collection of useful tools',
theme_color: '#242424',
background_color: '#242424',
display: 'standalone',
orientation: 'portrait',
icons: [
{
src: 'favicon.svg',
sizes: 'any',
type: 'image/svg+xml',
purpose: 'any maskable'
}
]
},
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg,json,vue,txt,woff2}']
}
})
],
define: { define: {
'__APP_VERSION__': JSON.stringify(packageJson.version) '__APP_VERSION__': JSON.stringify(packageJson.version)
} }