From c47b57e4bf1a5b40d87d27a36c431cfc97ebb3db Mon Sep 17 00:00:00 2001 From: m5r Date: Thu, 9 Jun 2022 00:33:38 +0200 Subject: [PATCH] cleanup stuff --- app/features/core/components/footer.css | 9 +- .../components/account/update-password.tsx | 2 + app/service-worker/cache-utils.ts | 100 ++---------------- app/service-worker/message.ts | 60 ----------- 4 files changed, 16 insertions(+), 155 deletions(-) diff --git a/app/features/core/components/footer.css b/app/features/core/components/footer.css index 993f4a9..4fbcee7 100644 --- a/app/features/core/components/footer.css +++ b/app/features/core/components/footer.css @@ -1,4 +1,7 @@ -.footer-ios { - margin-bottom: var(--safe-area-bottom); - padding-bottom: var(--safe-area-bottom); +@supports (-webkit-touch-callout: none) { + /* CSS specific to iOS devices */ + .footer-ios { + margin-bottom: var(--safe-area-bottom); + padding-bottom: var(--safe-area-bottom); + } } diff --git a/app/features/settings/components/account/update-password.tsx b/app/features/settings/components/account/update-password.tsx index 8b23442..4762774 100644 --- a/app/features/settings/components/account/update-password.tsx +++ b/app/features/settings/components/account/update-password.tsx @@ -47,6 +47,7 @@ const UpdatePassword: FunctionComponent = () => { tabIndex={3} error={actionData?.errors?.currentPassword} disabled={isSubmitting} + autoComplete="current-password" /> { tabIndex={4} error={actionData?.errors?.newPassword} disabled={isSubmitting} + autoComplete="new-password" /> diff --git a/app/service-worker/cache-utils.ts b/app/service-worker/cache-utils.ts index dc978eb..7afa412 100644 --- a/app/service-worker/cache-utils.ts +++ b/app/service-worker/cache-utils.ts @@ -54,94 +54,6 @@ export function cacheAsset(event: FetchEvent): Promise { const lastTimeRevalidated: Record = {}; export function cacheLoaderData(event: FetchEvent): Promise { - /*if (searchParams.get("_refresh") === "groot") { - console.debug("Serving refreshed data from network", url.pathname + url.search); - return event.preloadResponse - .then((preloadedResponse?: Response) => preloadedResponse || fetch(event.request.clone())) - .then((response) => - caches - .open(DATA_CACHE) - .then((cache) => cache.put(event.request, response.clone())) - .then(() => - response - .clone() - .json() - .then(({ json }) => console.debug("ddd", json?.phoneCalls?.[0]?.recipient)), - ) - .then(() => { - console.debug("returned latest", Date.now()); - return response; - }), - ) - .catch(() => { - console.debug("Serving data from network failed, falling back to cache", url.pathname + url.search); - return caches.match(url).then((response) => { - if (!response) { - return json( - { message: "Network Error" }, - { - status: 500, - headers: { "X-Remix-Catch": "yes", "X-Remix-Worker": "yes" }, - }, - ); - } - - response.headers.set("X-Remix-Worker", "yes"); - return response; - }); - }); - }*/ - - /*return caches.match(event.request, { cacheName: DATA_CACHE }).then((cachedResponse) => { - console.debug(`Serving data from ${cachedResponse ? "cache" : "network"}`, url.pathname + url.search); - cachedResponse?.headers.set("X-Remix-Worker", "yes"); - - const fetchPromise = event.preloadResponse - .then((preloadedResponse?: Response) => preloadedResponse || fetch(event.request.clone())) - .then((response) => - caches.open(DATA_CACHE).then((cache) => { - response.text().then(rrr => console.log(response.ok, url.pathname + url.search, rrr)); - if (!response.ok) { - return json( - { message: "Network Error" }, - { - status: 500, - headers: { "X-Remix-Catch": "yes", "X-Remix-Worker": "yes" }, - }, - ); - } - - cache.put(event.request, response.clone()); - const timestamp = lastTimeResponded[url.pathname + url.search]; - console.log("timestamp - Date.now()", Date.now() - timestamp); - - /!*if (timestamp && (Date.now() - timestamp > 10 * 1000)) { - console.debug("update UI with latest", Date.now()); - // we already returned the cached response - // we need to update the UI with the latest data - const message = { - type: "revalidateLoaderData", - // href: url.pathname + "?_refresh=groot", - }; - const channel = new BroadcastChannel("sw-messages"); - channel.postMessage(JSON.stringify(message)); - }*!/ - - return response; - }), - ); - - if (cachedResponse) { - console.debug("returned cached", Date.now()); - lastTimeResponded[url.pathname + url.search] = Date.now(); - } - return fetchPromise.then(response => { - console.debug("returned networked", Date.now()); - lastTimeResponded[url.pathname + url.search] = Date.now(); - return response; - }) - });*/ - const url = new URL(event.request.url); const path = url.pathname + url.search; @@ -158,8 +70,11 @@ export function cacheLoaderData(event: FetchEvent): Promise { return cachedResponse; } + const request = cachedResponse + ? new Request(event.request.clone(), { cache: "reload" }) + : event.request.clone(); const fetchPromise = event.preloadResponse - .then((preloadedResponse?: Response) => preloadedResponse || fetch(event.request.clone())) + .then((preloadedResponse?: Response) => preloadedResponse || fetch(request)) .then((response) => caches.open(DATA_CACHE).then((cache) => { if (!response.ok) { @@ -180,15 +95,16 @@ export function cacheLoaderData(event: FetchEvent): Promise { return; } + // otherwise, cache the new response + await cache.put(event.request, clonedResponse.clone()); + if (await areResponsesEqual(cached.clone(), clonedResponse.clone())) { // if what we have in the cache is up-to-date, we don't have to do anything console.debug("Responses are the same, no need to revalidate", path); + lastTimeRevalidated[path] = Date.now(); return; } - // otherwise, cache the new response - await cache.put(event.request, clonedResponse.clone()); - if (cachedResponse) { // and if we had returned a cached response // tell the UI to fetch the latest data diff --git a/app/service-worker/message.ts b/app/service-worker/message.ts index 0824cf0..9eec92d 100644 --- a/app/service-worker/message.ts +++ b/app/service-worker/message.ts @@ -1,5 +1,4 @@ import type { AssetsManifest } from "@remix-run/react/entry"; -import type { EntryRoute } from "@remix-run/react/routes"; import { ASSET_CACHE } from "./cache-utils"; @@ -15,8 +14,6 @@ async function handleSyncRemixManifest(event: ExtendableMessageEvent) { console.debug("Caching routes modules"); await cacheStaticAssets(event.data.manifest); - - // await cacheConversations(manifest); } async function cacheStaticAssets(manifest: AssetsManifest) { @@ -51,60 +48,3 @@ async function cacheStaticAssets(manifest: AssetsManifest) { }); } } - -/*async function cacheConversations(manifest: AssetsManifest) { - console.log("caching conversation"); - const cachePromises: Map> = new Map(); - const dataCache = await caches.open(DATA_CACHE); - const messagesResponse = await getMessagesResponse(); - if (!messagesResponse) { - console.log("rip never happened"); - return; - } - - const { json } = await messagesResponse.json(); - const recipients = Object.keys(json.conversations); - recipients.forEach((recipient) => cacheConversation(recipient)); - - await Promise.all(cachePromises.values()); - - function getMessagesResponse() { - const route = manifest.routes["routes/__app/messages"]; - const pathname = getPathname(route, manifest); - const params = new URLSearchParams({ _data: route.id }); - const search = `?${params.toString()}`; - const url = pathname + search; - return dataCache.match(url); - } - - function cacheConversation(recipient: string) { - const route = manifest.routes["routes/__app/messages.$recipient"]; - const pathname = getPathname(route, manifest).replace(":recipient", encodeURIComponent(recipient)); - const params = new URLSearchParams({ _data: route.id }); - const search = `?${params.toString()}`; - const url = pathname + search; - if (!cachePromises.has(url)) { - console.debug("Caching conversation with", recipient); - cachePromises.set( - url, - dataCache.add(url).catch((error) => { - console.debug(`Failed to cache data for ${url}:`, error); - }), - ); - } - } -}*/ - -function getPathname(route: EntryRoute, manifest: AssetsManifest) { - let pathname = ""; - if (route.path && route.path.length > 0) { - pathname = "/" + route.path; - } - if (route.parentId) { - const parentPath = getPathname(manifest.routes[route.parentId], manifest); - if (parentPath) { - pathname = parentPath + pathname; - } - } - return pathname; -}