mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-06 10:08:52 +08:00
add manifest and offline support #12
This commit is contained in:
3958
package-lock.json
generated
3958
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -52,6 +52,7 @@
|
||||
"karma-webpack": "^4.0.2",
|
||||
"vue-cli-plugin-ui-karma": "^0.2.5",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"workbox-webpack-plugin": "^6.1.5",
|
||||
"worker-loader": "^3.0.8"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
public/Logo192x192.png
Normal file
BIN
public/Logo192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
public/Logo512x512.png
Normal file
BIN
public/Logo512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
@@ -5,6 +5,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.png">
|
||||
<link rel="manifest" href="<%= BASE_URL %>manifest.webmanifest">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
20
public/manifest.webmanifest
Normal file
20
public/manifest.webmanifest
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"background_color": "white",
|
||||
"description": "Sqliteviz is a single-page application for fully client-side visualisation of SQLite databases or CSV.",
|
||||
"display": "fullscreen",
|
||||
"icons": [
|
||||
{
|
||||
"src": "Logo192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "Logo512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"name": "sqliteviz",
|
||||
"short_name": "sqliteviz",
|
||||
"start_url": "index.html"
|
||||
}
|
||||
42
registerServiceWorker.js
Normal file
42
registerServiceWorker.js
Normal file
@@ -0,0 +1,42 @@
|
||||
function invokeServiceWorkerUpdateFlow (registration) {
|
||||
const agree = confirm('New version of the app is available. Refresh now?')
|
||||
if (agree) {
|
||||
if (registration.waiting) {
|
||||
// let waiting Service Worker know it should became active
|
||||
registration.waiting.postMessage({ type: 'SKIP_WAITING' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', async () => {
|
||||
const registration = await navigator.serviceWorker.register('/service-worker.js')
|
||||
// ensure the case when the updatefound event was missed is also handled
|
||||
// by re-invoking the prompt when there's a waiting Service Worker
|
||||
if (registration.waiting) {
|
||||
invokeServiceWorkerUpdateFlow(registration)
|
||||
}
|
||||
|
||||
// detect Service Worker update available and wait for it to become installed
|
||||
registration.addEventListener('updatefound', () => {
|
||||
const newRegestration = registration.installing
|
||||
if (newRegestration) {
|
||||
// wait until the new Service worker is actually installed (ready to take over)
|
||||
newRegestration.addEventListener('statechange', () => {
|
||||
if (registration.waiting) {
|
||||
invokeServiceWorkerUpdateFlow(registration)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
let refreshing = false
|
||||
// detect controller change and refresh the page
|
||||
navigator.serviceWorker.addEventListener('controllerchange', () => {
|
||||
if (!refreshing) {
|
||||
window.location.reload()
|
||||
refreshing = true
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -12,6 +12,8 @@ import '@/assets/styles/dialogs.css'
|
||||
import '@/assets/styles/tooltips.css'
|
||||
import '@/assets/styles/messages.css'
|
||||
|
||||
import '../registerServiceWorker'
|
||||
|
||||
Vue.use(VuePlugin)
|
||||
Vue.use(VModal)
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
const CopyPlugin = require('copy-webpack-plugin')
|
||||
const WorkboxPlugin = require('workbox-webpack-plugin')
|
||||
|
||||
module.exports = {
|
||||
publicPath: '',
|
||||
@@ -9,7 +10,12 @@ module.exports = {
|
||||
// It is important that we do not change its name, and that it is in the same folder as the js
|
||||
{ from: 'node_modules/sql.js/dist/sql-wasm.wasm', to: 'js/' },
|
||||
{ from: 'LICENSE', to: './' }
|
||||
])
|
||||
]),
|
||||
new WorkboxPlugin.GenerateSW({
|
||||
clientsClaim: true,
|
||||
skipWaiting: false,
|
||||
maximumFileSizeToCacheInBytes: 40000000
|
||||
})
|
||||
]
|
||||
},
|
||||
chainWebpack: config => {
|
||||
|
||||
Reference in New Issue
Block a user