From abb1baeecdc9677f4f9d4352ee2b9a292ddcbbcd Mon Sep 17 00:00:00 2001 From: nimbleghost <132819643+nimbleghost@users.noreply.github.com> Date: Thu, 29 Jun 2023 12:20:42 +0200 Subject: [PATCH 1/5] =?UTF-8?q?Don=E2=80=99t=20include=20mp3=20due=20to=20?= =?UTF-8?q?Firefox=20sw=20issue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/vite.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/vite.config.js b/web/vite.config.js index 22d17d9bc..86e17646a 100644 --- a/web/vite.config.js +++ b/web/vite.config.js @@ -25,7 +25,7 @@ export default defineConfig(({ mode }) => ({ navigateFallback: "index.html", }, injectManifest: { - globPatterns: ["**/*.{js,css,html,mp3,ico,png,svg,json}"], + globPatterns: ["**/*.{js,css,html,ico,png,svg,json}"], globIgnores: ["config.js"], manifestTransforms: [ (entries) => ({ From 55eed868faf2e8092d864c6dd777ada4feae2e4d Mon Sep 17 00:00:00 2001 From: nimbleghost <132819643+nimbleghost@users.noreply.github.com> Date: Thu, 29 Jun 2023 13:02:17 +0200 Subject: [PATCH 2/5] Reduce padding on mobile / narrow screens --- web/src/components/App.jsx | 5 ++--- web/src/components/Notifications.jsx | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/web/src/components/App.jsx b/web/src/components/App.jsx index 2951a2bc1..2ad7f4199 100644 --- a/web/src/components/App.jsx +++ b/web/src/components/App.jsx @@ -1,7 +1,6 @@ import * as React from "react"; import { createContext, Suspense, useContext, useEffect, useState, useMemo } from "react"; -import { Box, Toolbar, CssBaseline, Backdrop, CircularProgress, useMediaQuery } from "@mui/material"; -import { ThemeProvider, createTheme } from "@mui/material/styles"; +import { Box, Toolbar, CssBaseline, Backdrop, CircularProgress, useMediaQuery, ThemeProvider, createTheme } from "@mui/material"; import { useLiveQuery } from "dexie-react-hooks"; import { BrowserRouter, Outlet, Route, Routes, useParams } from "react-router-dom"; import { AllSubscriptions, SingleSubscription } from "./Notifications"; @@ -133,7 +132,7 @@ const Main = (props) => ( display: "flex", flexGrow: 1, flexDirection: "column", - padding: 3, + padding: { xs: 0, md: 3 }, width: { sm: `calc(100% - ${Navigation.width}px)` }, height: "100dvh", overflow: "auto", diff --git a/web/src/components/Notifications.jsx b/web/src/components/Notifications.jsx index fe9fcc485..85ced7430 100644 --- a/web/src/components/Notifications.jsx +++ b/web/src/components/Notifications.jsx @@ -184,7 +184,7 @@ const NotificationItem = (props) => { const hasUserActions = notification.actions && notification.actions.length > 0; const showActions = hasAttachmentActions || hasClickAction || hasUserActions; return ( - + From 9fa1288dbc8610405fa23adfa2d6d975ed43081f Mon Sep 17 00:00:00 2001 From: nimbleghost <132819643+nimbleghost@users.noreply.github.com> Date: Thu, 29 Jun 2023 15:07:18 +0200 Subject: [PATCH 3/5] Fix update behaviour --- web/public/sw.js | 3 +++ web/src/index.jsx | 28 ++++++++++++++++++++++++++++ web/vite.config.js | 2 +- 3 files changed, 32 insertions(+), 1 deletion(-) diff --git a/web/public/sw.js b/web/public/sw.js index d39674412..33154628d 100644 --- a/web/public/sw.js +++ b/web/public/sw.js @@ -2,6 +2,7 @@ import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from "workbox-precaching"; import { NavigationRoute, registerRoute } from "workbox-routing"; import { NetworkFirst } from "workbox-strategies"; +import { clientsClaim } from "workbox-core"; import { dbAsync } from "../src/app/db"; @@ -224,6 +225,8 @@ precacheAndRoute( self.__WB_MANIFEST ); +// Claim all open windows +clientsClaim(); // Delete any cached old dist files from previous service worker versions cleanupOutdatedCaches(); diff --git a/web/src/index.jsx b/web/src/index.jsx index d60c05a40..040f94b58 100644 --- a/web/src/index.jsx +++ b/web/src/index.jsx @@ -1,6 +1,34 @@ import * as React from "react"; import { createRoot } from "react-dom/client"; +// eslint-disable-next-line import/no-unresolved +import { registerSW } from "virtual:pwa-register"; import App from "./components/App"; +// fetch new sw every hour, i.e. update app every hour while running +const intervalMS = 60 * 60 * 1000; + +// https://vite-pwa-org.netlify.app/guide/periodic-sw-updates.html +registerSW({ + onRegisteredSW(swUrl, registration) { + if (!registration) { + return; + } + + setInterval(async () => { + if (registration.installing || navigator?.onLine === false) return; + + const resp = await fetch(swUrl, { + cache: "no-store", + headers: { + cache: "no-store", + "cache-control": "no-cache", + }, + }); + + if (resp?.status === 200) await registration.update(); + }, intervalMS); + }, +}); + const root = createRoot(document.querySelector("#root")); root.render(); diff --git a/web/vite.config.js b/web/vite.config.js index 86e17646a..4df6ef9dd 100644 --- a/web/vite.config.js +++ b/web/vite.config.js @@ -16,7 +16,7 @@ export default defineConfig(({ mode }) => ({ react(), VitePWA({ registerType: "autoUpdate", - injectRegister: "inline", + injectRegister: null, strategies: "injectManifest", devOptions: { enabled: true, From 57bd37ef2fc9444cd1df3a71cc21591c623655af Mon Sep 17 00:00:00 2001 From: nimbleghost <132819643+nimbleghost@users.noreply.github.com> Date: Thu, 29 Jun 2023 15:22:59 +0200 Subject: [PATCH 4/5] Fix sidebar colour on mobile --- web/src/components/theme.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/web/src/components/theme.js b/web/src/components/theme.js index 64217eeea..0ce693a6e 100644 --- a/web/src/components/theme.js +++ b/web/src/components/theme.js @@ -55,6 +55,13 @@ export const darkTheme = { }, }, }, + MuiPaper: { + styleOverrides: { + root: { + backgroundImage: "none", + }, + }, + }, }, palette: { mode: "dark", From 0b918464c191b892517908b069565a5ccbc6f7f3 Mon Sep 17 00:00:00 2001 From: nimbleghost <132819643+nimbleghost@users.noreply.github.com> Date: Fri, 30 Jun 2023 08:59:20 +0200 Subject: [PATCH 5/5] Move registerSW out --- web/src/components/theme.js | 1 + web/src/index.jsx | 29 ++--------------------------- web/src/registerSW.js | 31 +++++++++++++++++++++++++++++++ web/vite.config.js | 1 + 4 files changed, 35 insertions(+), 27 deletions(-) create mode 100644 web/src/registerSW.js diff --git a/web/src/components/theme.js b/web/src/components/theme.js index 0ce693a6e..9cf6649f5 100644 --- a/web/src/components/theme.js +++ b/web/src/components/theme.js @@ -58,6 +58,7 @@ export const darkTheme = { MuiPaper: { styleOverrides: { root: { + // for the sidebar on narrow (xs) screens backgroundImage: "none", }, }, diff --git a/web/src/index.jsx b/web/src/index.jsx index 040f94b58..1a123a8a4 100644 --- a/web/src/index.jsx +++ b/web/src/index.jsx @@ -1,34 +1,9 @@ import * as React from "react"; import { createRoot } from "react-dom/client"; -// eslint-disable-next-line import/no-unresolved -import { registerSW } from "virtual:pwa-register"; import App from "./components/App"; +import registerSW from "./registerSW"; -// fetch new sw every hour, i.e. update app every hour while running -const intervalMS = 60 * 60 * 1000; - -// https://vite-pwa-org.netlify.app/guide/periodic-sw-updates.html -registerSW({ - onRegisteredSW(swUrl, registration) { - if (!registration) { - return; - } - - setInterval(async () => { - if (registration.installing || navigator?.onLine === false) return; - - const resp = await fetch(swUrl, { - cache: "no-store", - headers: { - cache: "no-store", - "cache-control": "no-cache", - }, - }); - - if (resp?.status === 200) await registration.update(); - }, intervalMS); - }, -}); +registerSW(); const root = createRoot(document.querySelector("#root")); root.render(); diff --git a/web/src/registerSW.js b/web/src/registerSW.js new file mode 100644 index 000000000..adef47464 --- /dev/null +++ b/web/src/registerSW.js @@ -0,0 +1,31 @@ +// eslint-disable-next-line import/no-unresolved +import { registerSW as viteRegisterSW } from "virtual:pwa-register"; + +// fetch new sw every hour, i.e. update app every hour while running +const intervalMS = 60 * 60 * 1000; + +// https://vite-pwa-org.netlify.app/guide/periodic-sw-updates.html +const registerSW = () => + viteRegisterSW({ + onRegisteredSW(swUrl, registration) { + if (!registration) { + return; + } + + setInterval(async () => { + if (registration.installing || navigator?.onLine === false) return; + + const resp = await fetch(swUrl, { + cache: "no-store", + headers: { + cache: "no-store", + "cache-control": "no-cache", + }, + }); + + if (resp?.status === 200) await registration.update(); + }, intervalMS); + }, + }); + +export default registerSW; diff --git a/web/vite.config.js b/web/vite.config.js index 4df6ef9dd..a4fd5a318 100644 --- a/web/vite.config.js +++ b/web/vite.config.js @@ -16,6 +16,7 @@ export default defineConfig(({ mode }) => ({ react(), VitePWA({ registerType: "autoUpdate", + // see registerSW.js imported by index.jsx injectRegister: null, strategies: "injectManifest", devOptions: {