feat(pwa): add PWA support with auto-update and install prompt

2026-02-26 23:46:17 +00:00
parent bec57f9e49
commit 8655533a2d
6 changed files with 4949 additions and 3 deletions
--- a/index.html
+++ b/index.html
@@ -3,6 +3,8 @@
  <head>
    <meta charset="UTF-8" />
    <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" />
    <title>Tools App</title>
  </head>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.2",
-    "vite": "^7.3.1"
+    "vite": "^7.3.1",
+    "vite-plugin-pwa": "^1.2.0"
  }
 }
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@ import { useRouter } from 'vue-router'
 import Header from './components/Header.vue'
 import Footer from './components/Footer.vue'
 import Sidebar from './components/Sidebar.vue'
+import InstallPrompt from './components/InstallPrompt.vue'

 const isSidebarOpen = ref(window.innerWidth >= 768)
 const router = useRouter()
@@ -51,6 +52,7 @@ onUnmounted(() => {
    </main>
  </div>
  <Footer />
+  <InstallPrompt />
 </template>

 <style scoped>
--- a/src/components/InstallPrompt.vue
+++ b/src/components/InstallPrompt.vue
@@ -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>
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,10 +1,37 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
 import packageJson from './package.json'

 // https://vite.dev/config/
 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: {
    '__APP_VERSION__': JSON.stringify(packageJson.version)
  }