Merge pull request #795 from nimbleghost/pwa-improvements

PWA: Fix reload, Firefox mp3 load, reduce mobile padding
This commit is contained in:
Philipp C. Heckel 2023-06-30 08:43:19 -04:00 committed by GitHub
commit 4f0ddfc30d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 51 additions and 6 deletions

View File

@ -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();

View File

@ -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",

View File

@ -184,7 +184,7 @@ const NotificationItem = (props) => {
const hasUserActions = notification.actions && notification.actions.length > 0;
const showActions = hasAttachmentActions || hasClickAction || hasUserActions;
return (
<Card sx={{ minWidth: 275, padding: 1 }} role="listitem" aria-label={t("notifications_list_item")}>
<Card sx={{ padding: 1 }} role="listitem" aria-label={t("notifications_list_item")}>
<CardContent>
<Tooltip title={t("notifications_delete")} enterDelay={500}>
<IconButton onClick={handleDelete} sx={{ float: "right", marginRight: -1, marginTop: -1 }} aria-label={t("notifications_delete")}>

View File

@ -55,6 +55,14 @@ export const darkTheme = {
},
},
},
MuiPaper: {
styleOverrides: {
root: {
// for the sidebar on narrow (xs) screens
backgroundImage: "none",
},
},
},
},
palette: {
mode: "dark",

View File

@ -1,6 +1,9 @@
import * as React from "react";
import { createRoot } from "react-dom/client";
import App from "./components/App";
import registerSW from "./registerSW";
registerSW();
const root = createRoot(document.querySelector("#root"));
root.render(<App />);

31
web/src/registerSW.js Normal file
View File

@ -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;

View File

@ -16,7 +16,8 @@ export default defineConfig(({ mode }) => ({
react(),
VitePWA({
registerType: "autoUpdate",
injectRegister: "inline",
// see registerSW.js imported by index.jsx
injectRegister: null,
strategies: "injectManifest",
devOptions: {
enabled: true,
@ -25,7 +26,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) => ({