Talon
/
chat-with-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #165 from ZauberNerd/service-worker 

Add service worker and make PWA installable
main
Cogent Apps 2023-07-15 15:31:53 -07:00 committed by GitHub
parent 946190eb9d 36c1cb47c0
commit c75663bf90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 143 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/index.html
View File

@ -3,33 +3,24 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.com">
<link rel="preconnect" crossorigin="anonymous" href="https://cdnjs.cloudflare.com">
<link rel="preconnect" crossorigin="anonymous" href="https://cdn.jsdelivr.net">
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<!-- mobile app viewport --> <!-- mobile app viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="An open source ChatGPT app with a voice." /> <meta name="description" content="An open source ChatGPT app with a voice." />
<link rel="apple-touch-icon" href="/logo192.png" /> <link rel="apple-touch-icon" href="/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<!--
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Chat with GPT | Unofficial ChatGPT app</title> <title>Chat with GPT | Unofficial ChatGPT app</title>
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" /> <link rel="stylesheet" crossorigin="anonymous" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" />
<link rel="stylesheet" media="all" href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,300,500,700,800" /> <link rel="stylesheet" crossorigin="anonymous" media="all" href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,300,500,700,800" />
<link rel="stylesheet" media="all" href="https://fonts.googleapis.com/css?family=Fira+Code:100,400,300,500,700,800" /> <link rel="stylesheet" crossorigin="anonymous" media="all" href="https://fonts.googleapis.com/css?family=Fira+Code:100,400,300,500,700,800" />
<link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&display=swap" rel="stylesheet"> <link rel="stylesheet" crossorigin="anonymous" href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" <link rel="stylesheet" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC">
integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">
<link rel="stylesheet" href="/prose.css" /> <link rel="stylesheet" href="/prose.css" />
<link rel="canonical" href="https://www.chatwithgpt.ai" /> <link rel="canonical" href="https://www.chatwithgpt.ai" />
<style> <style>

4
app/package.json
View File

@ -69,6 +69,8 @@
"@vitejs/plugin-react": "^4.0.2", "@vitejs/plugin-react": "^4.0.2",
"babel-plugin-formatjs": "^10.5.3", "babel-plugin-formatjs": "^10.5.3",
"typescript": "^4.9.5", "typescript": "^4.9.5",
"vite": "^4.4.1" "vite": "^4.4.1",
"vite-plugin-pwa": "^0.16.4",
"workbox-window": "^7.0.0"
} }
} }

8
app/public/manifest.json
View File

@ -1,8 +0,0 @@
{
"short_name": "Chat with GPT",
"name": "Chat with GPT",
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

2
app/src/components/page.tsx
View File

@ -4,6 +4,7 @@ import { useChatSpotlightProps } from '../spotlight';
import { LoginModal, CreateAccountModal } from './auth-modals'; import { LoginModal, CreateAccountModal } from './auth-modals';
import Header, { HeaderProps, SubHeader } from './header'; import Header, { HeaderProps, SubHeader } from './header';
import MessageInput from './input'; import MessageInput from './input';
import { InstallUpdateNotification } from './pwa-notifications';
import SettingsDrawer from './settings'; import SettingsDrawer from './settings';
import Sidebar from './sidebar'; import Sidebar from './sidebar';
import AudioControls from './tts-controls'; import AudioControls from './tts-controls';
@ -90,6 +91,7 @@ export function Page(props: {
<SettingsDrawer /> <SettingsDrawer />
<LoginModal /> <LoginModal />
<CreateAccountModal /> <CreateAccountModal />
<InstallUpdateNotification />
</Main> </Main>
</Container> </Container>
</SpotlightProvider>; </SpotlightProvider>;

37
app/src/components/pwa-notifications.tsx 100644
View File

@ -0,0 +1,37 @@
import { Button, Notification } from "@mantine/core";
import { useCallback } from "react";
import { useRegisterSW } from "virtual:pwa-register/react";
export function InstallUpdateNotification() {
const {
offlineReady: [_, setOfflineReady],
needRefresh: [needRefresh, setNeedRefresh],
updateServiceWorker,
} = useRegisterSW({
onRegistered(r) {
console.log("SW Registered:", r);
},
onRegisterError(error) {
console.log("SW registration error", error);
},
});
const onClose = () => {
setOfflineReady(false);
setNeedRefresh(false);
};
const onUpdate = useCallback(async () => {
updateServiceWorker(true);
}, []);
return needRefresh ? (
<Notification title="Update available!" onClose={onClose}>
Click{" "}
<Button compact onClick={onUpdate}>
Update now
</Button>{" "}
to get the latest version.
</Notification>
) : null;
}

2
app/src/store/index.ts
View File

@ -31,8 +31,6 @@ const persistMessageConfig = {
storage, storage,
} }
const store = configureStore({ const store = configureStore({
reducer: { reducer: {
message: persistReducer<ReturnType<typeof messageReducer>>(persistMessageConfig, messageReducer), message: persistReducer<ReturnType<typeof messageReducer>>(persistMessageConfig, messageReducer),

1
app/src/vite-env.d.ts vendored
View File

@ -1 +1,2 @@
/// <reference types="vite-plugin-comlink/client" /> /// <reference types="vite-plugin-comlink/client" />
/// <reference types="vite-plugin-pwa/client" />

90
app/vite.config.js
View File

@ -1,5 +1,6 @@
import react from "@vitejs/plugin-react"; import react from "@vitejs/plugin-react";
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import { VitePWA } from "vite-plugin-pwa";
export default defineConfig(() => { export default defineConfig(() => {
return { return {
@ -14,10 +15,11 @@ export default defineConfig(() => {
}, },
build: { build: {
outDir: "build", outDir: "build",
target: "es2020" target: "es2020",
sourcemap: true,
}, },
esbuild: { esbuild: {
target: "es2020" target: "es2020",
}, },
resolve: { resolve: {
alias: { alias: {
@ -38,6 +40,90 @@ export default defineConfig(() => {
], ],
}, },
}), }),
VitePWA({
registerType: "autoUpdate",
includeAssets: ["favicon.ico", "lang/*.json"],
manifest: {
short_name: "Chat with GPT",
name: "Chat with GPT",
start_url: ".",
display: "standalone",
theme_color: "#000000",
background_color: "#ffffff",
icons: [
{
src: "logo192.png",
type: "image/png",
sizes: "192x192",
},
{
src: "logo512.png",
type: "image/png",
sizes: "512x512",
},
],
},
workbox: {
runtimeCaching: [
{
urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
handler: "CacheFirst",
options: {
cacheName: "google-fonts-cache",
expiration: {
maxEntries: 10,
maxAgeSeconds: 60 * 60 * 24 * 365,
},
cacheableResponse: {
statuses: [0, 200],
},
},
},
{
urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
handler: "CacheFirst",
options: {
cacheName: "gstatic-fonts-cache",
expiration: {
maxEntries: 10,
maxAgeSeconds: 60 * 60 * 24 * 365,
},
cacheableResponse: {
statuses: [0, 200],
},
},
},
{
urlPattern: /^https:\/\/cdnjs\.cloudflare\.com\/.*/i,
handler: "CacheFirst",
options: {
cacheName: "cloudflare-js-cdn",
expiration: {
maxEntries: 10,
maxAgeSeconds: 60 * 60 * 24 * 365,
},
cacheableResponse: {
statuses: [0, 200],
},
},
},
{
urlPattern: /^https:\/\/cdn\.jsdelivr\.net\/.*/i,
handler: "CacheFirst",
options: {
cacheName: "jsdelivr-cdn",
expiration: {
maxEntries: 10,
maxAgeSeconds: 60 * 60 * 24 * 365,
},
cacheableResponse: {
statuses: [0, 200],
},
},
},
],
},
}),
], ],
}; };
}); });