commit e574e9ec1c33197e0c115cc1549806d45ffe6ace
parent c55b012ce4dd8f833078ed916566a2609e629508
Author: Vetle Haflan <vetle@haflan.dev>
Date: Wed, 6 Oct 2021 22:26:10 +0200
Fix web/pwa-svelte issues described in previous commit
Diffstat:
4 files changed, 30 insertions(+), 16 deletions(-)
diff --git a/web/pwa-svelte/public/icon.png b/web/pwa-svelte/public/icon.png
Binary files differ.
diff --git a/web/pwa-svelte/public/index.html b/web/pwa-svelte/public/index.html
@@ -1,13 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset='utf-8'>
- <meta name='viewport' content='width=device-width,initial-scale=1'>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <meta name="theme-color" content="#000000">
<title>numgen</title>
- <link rel='stylesheet' href='/global.css'>
- <link rel='stylesheet' href='/build/bundle.css'>
+ <link rel="stylesheet" href="/global.css">
+ <link rel="stylesheet" href="/build/bundle.css">
<link rel="manifest" href="manifest.json">
<link rel="icon" href="icon.svg">
diff --git a/web/pwa-svelte/public/manifest.json b/web/pwa-svelte/public/manifest.json
@@ -2,8 +2,10 @@
"name": "Number generator",
"short_name": "numgen",
"icons": [{
- "src": "icon.svg",
- "sizes": "any"
+ "src": "icon.png",
+ "sizes": "512x512",
+ "type": "image/png",
+ "purpose": "any maskable"
}],
"start_url": "/",
"scope": "/",
diff --git a/web/pwa-svelte/rollup.config.js b/web/pwa-svelte/rollup.config.js
@@ -30,24 +30,35 @@ function serve() {
};
}
+// Calls workbox directly - might want to use https://www.npmjs.com/package/rollup-plugin-workbox instead
function generateSW() {
workbox.generateSW({
cacheId: 'example_pwa',
- globDirectory: './',
+ globDirectory: 'public/',
+ // Precaching
globPatterns: [
- '**/*.{css|js}'
+ '**/*.{html,json,js,css}'
],
- swDest: './public/sw.js',
+ swDest: 'public/sw.js',
+ navigateFallback: '/index.html',
+ // Runtime caching - do not cache image until they're used
runtimeCaching: [{
- urlPattern: /\.(?:css|html)$/,
- handler: 'StaleWhileRevalidate',
+ // Match any request that ends with .png, .jpg, .jpeg or .svg.
+ urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
+
+ // Apply a cache-first strategy.
+ handler: 'CacheFirst',
+
options: {
- cacheName: 'markup',
+ // Use a custom cache name.
+ cacheName: 'images',
+
+ // Only cache 10 images.
expiration: {
- maxAgeSeconds: 3600,
- }
- }
- }]
+ maxEntries: 10,
+ },
+ },
+ }],
})
}
