blacklight/gpstracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use vite-plugin-pwa to initialize the PWA

Browse source
This commit is contained in:
Fabio Manganiello 2025-03-31 13:44:34 +02:00
parent 62be99a5b0
commit 9ac36dec3e
7 changed files with 4155 additions and 47 deletions

2
frontend/index.html
View file

@ -5,8 +5,6 @@
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GPS Tracker</title>
<!-- PWA builder -->
<script type="module" src="/js/pwabuilder-sw-register.js"></script>
</head>
<body>
<div id="app"></div>

4130
frontend/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
frontend/package.json
View file

@ -45,6 +45,7 @@
"sass-embedded": "^1.85.0",
"typescript": "~5.7.3",
"vite": "^6.2.3",
"vite-plugin-pwa": "^1.0.0",
"vite-plugin-vue-devtools": "^7.7.2",
"vue-tsc": "^2.2.2"
}

BIN
frontend/public/icons/pwa-192x192.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 7.7 KiB

15
frontend/public/js/pwabuilder-sw-register.js
View file

@ -1,15 +0,0 @@
// This is the "Background Sync" service worker
// Add this below content to your HTML page inside a <script type="module"></script> tag, or add the js file to your page at the very top to register service worker
// If you get an error about not being able to import, double check that you have type="module" on your <script /> tag
/*
This code uses the pwa-update web component https://github.com/pwa-builder/pwa-update to register your service worker,
tell the user when there is an update available and let the user know when your PWA is ready to use offline.
*/
import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
const el = document.createElement('pwa-update');
document.body.appendChild(el);

27
frontend/public/pwabuilder-sw.js
View file

@ -1,27 +0,0 @@
// This is the "Offline copy of assets" service worker
const CACHE = "pwabuilder-offline";
const QUEUE_NAME = "bgSyncQueue";
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
self.addEventListener("message", (event) => {
if (event.data && event.data.type === "SKIP_WAITING") {
self.skipWaiting();
}
});
const bgSyncPlugin = new workbox.backgroundSync.BackgroundSyncPlugin(QUEUE_NAME, {
maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes)
});
workbox.routing.registerRoute(
new RegExp('/*'),
new workbox.strategies.StaleWhileRevalidate({
cacheName: CACHE,
plugins: [
bgSyncPlugin
]
})
);

27
frontend/vite.config.ts
View file

@ -1,6 +1,7 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
@ -24,6 +25,32 @@ export default defineConfig((env) => {
plugins: [
vue(),
vueDevTools(),
VitePWA({
injectRegister: 'auto',
includeAssets: [
'favicon.ico',
'icons/*',
],
manifest: {
name: "GPSTracker",
short_name: "GPSTracker",
theme_color: "#3498db",
icons: [
{
src: "./icons/pwa-192x192.png",
sizes: "192x192",
type: "image/png"
},
{
src: "./icons/pwa-512x512.png",
sizes: "512x512",
type: "image/png"
},
],
start_url: ".",
display: "standalone"
},
}),
],
resolve: {