Skip to content

Commit 560f5e1

Browse files
cm-ayfcm-ayf
authored
Merge pull request #237 from cm-ayf/vite-pwa
Vite pwa
2 parents f491078 + 3f677dc commit 560f5e1

13 files changed

+2367
-1236
lines changed

‎.github/dependabot.yml‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,6 @@ updates:
2323
patterns:
2424
- "prisma"
2525
- "@prisma/*"
26-
remix-pwa:
27-
patterns:
28-
- "@remix-pwa/*"
2926
typescript:
3027
patterns:
3128
- "typescript"

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
node_modules
22

33
/.cache
4+
/dev-dist
45
/build
56
.env
67

78
/.vercel
89
/.react-router
9-
/public/entry.worker.js
1010

1111
/test-results
1212
/playwright-report

‎app/components/Navigation.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,7 @@ import Toolbar from "@mui/material/Toolbar";
1212
import Typography from "@mui/material/Typography";
1313
import Box from "@mui/material-pigment-css/Box";
1414
import type { User } from "@prisma/client";
15-
import { useNetworkConnectivity } from "@remix-pwa/client";
16-
import { useCallback, useRef, useState } from "react";
15+
import { useCallback, useRef, useState, useSyncExternalStore } from "react";
1716
import {
1817
Link,
1918
useFetcher,
@@ -157,6 +156,22 @@ function SigninButton() {
157156
);
158157
}
159158

159+
// https://github.com/remix-pwa/monorepo/blob/6fa72a544991a59f8b384a733746a6ec65af75f5/packages/client/hooks/useNetworkConnectivity.ts#L17
160+
function useNetworkConnectivity() {
161+
return useSyncExternalStore(
162+
(onStoreChange) => {
163+
window.addEventListener("online", onStoreChange);
164+
window.addEventListener("offline", onStoreChange);
165+
return () => {
166+
window.removeEventListener("online", onStoreChange);
167+
window.removeEventListener("offline", onStoreChange);
168+
};
169+
},
170+
() => navigator.onLine,
171+
() => false,
172+
);
173+
}
174+
160175
function ConnectivityStatus() {
161176
const connectivity = useNetworkConnectivity();
162177
return connectivity ? <CloudDone /> : <CloudOff />;

‎app/entry.worker.ts‎

Lines changed: 0 additions & 73 deletions
This file was deleted.

‎app/root.tsx‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@ import "@mui/material-pigment-css/styles.css";
33
import Toolbar from "@mui/material/Toolbar";
44
import Container from "@mui/material-pigment-css/Container";
55
import type { User } from "@prisma/client";
6-
import { ManifestLink } from "@remix-pwa/manifest";
7-
import { installPWAGlobals } from "@remix-pwa/sw/install-pwa-globals";
86
import { Fragment, type PropsWithChildren } from "react";
97
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
10-
import { UAParser } from "ua-parser-js";
8+
import { pwaInfo } from "virtual:pwa-info";
9+
import { useRegisterSW } from "virtual:pwa-register/react";
1110
import type { Route } from "./+types/root";
1211
import { AlertProvider } from "./components/Alert";
1312
import Navigation from "./components/Navigation";
@@ -27,11 +26,9 @@ export const handle: Handle<typeof loader> = {
2726
};
2827

2928
const prefetchedLinks = new Set<string>();
30-
function handlePrefetchLinksOnSafari(head: HTMLHeadElement) {
31-
const parser = new UAParser();
32-
if (!parser.getBrowser().is("safari")) return;
33-
34-
const links = head.querySelectorAll<HTMLLinkElement>(`link[rel=prefetch]`);
29+
function handlePrefetchLinks() {
30+
const links =
31+
document.head.querySelectorAll<HTMLLinkElement>(`link[rel=prefetch]`);
3532
for (const link of links) {
3633
if (prefetchedLinks.has(link.href)) continue;
3734
prefetchedLinks.add(link.href);
@@ -40,22 +37,28 @@ function handlePrefetchLinksOnSafari(head: HTMLHeadElement) {
4037
}
4138

4239
export function Layout({ children }: PropsWithChildren) {
43-
installPWAGlobals();
4440
const title = useTitle();
4541
return (
4642
<html lang="ja">
47-
<head
48-
ref={(head) => {
49-
if (head) handlePrefetchLinksOnSafari(head);
50-
}}
51-
>
43+
<head>
5244
<meta charSet="utf-8" />
5345
<meta name="viewport" content="width=device-width, initial-scale=1" />
46+
<meta name="theme-color" content="#1976d2" />
47+
<link rel="manifest" href={pwaInfo?.webManifest.href} />
48+
{/* TODO: add icons
49+
<link rel="icon" href="/favicon.ico" />
50+
<link
51+
rel="apple-touch-icon"
52+
href="/apple-touch-icon.png"
53+
sizes="180x180"
54+
/>
55+
<link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF" />
56+
*/}
5457
<meta name="emotion-insertion-point" content="" />
55-
<ManifestLink href="/manifest.webmanifest" />
5658
<Meta />
5759
<Links />
58-
<title>{title}</title>
60+
<title>{title ?? "Comiacapay"}</title>
61+
<meta name="description" content="同人即売会用のレジアプリ" />
5962
</head>
6063
<body>
6164
{children}
@@ -70,7 +73,12 @@ function AppLayout({
7073
children,
7174
user,
7275
}: PropsWithChildren<{ user: User | undefined }>) {
73-
installPWAGlobals();
76+
useRegisterSW({
77+
onRegisteredSW() {
78+
handlePrefetchLinks();
79+
},
80+
});
81+
7482
const ButtomComponent = useHandleValue("ButtomComponent", Fragment);
7583
const maxWidth = useHandleValue("containerMaxWidth", "lg");
7684

‎app/routes/manifest[.webmanifest].ts‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

0 commit comments

Comments
 (0)