Skip to content

Commit

Permalink
Implement service worker using vite-plugin-pwa
Browse files Browse the repository at this point in the history
  • Loading branch information
ZauberNerd committed Jul 9, 2023
1 parent f9122c5 commit 36c1cb4
Show file tree
Hide file tree
Showing 11 changed files with 132 additions and 295 deletions.
31 changes: 11 additions & 20 deletions app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,24 @@

<head>
<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" />
<!-- mobile app viewport -->
<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="description" content="An open source ChatGPT app with a voice." />
<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>
<link rel="stylesheet" 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" 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" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css"
integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">
<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" crossorigin="anonymous" 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=Fira+Code:100,400,300,500,700,800" />
<link rel="stylesheet" crossorigin="anonymous" href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&display=swap">
<link rel="stylesheet" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC">
<link rel="stylesheet" href="/prose.css" />
<link rel="canonical" href="https://www.chatwithgpt.ai" />
<style>
Expand Down
4 changes: 3 additions & 1 deletion app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@
"@vitejs/plugin-react": "^4.0.2",
"babel-plugin-formatjs": "^10.5.3",
"typescript": "^4.9.5",
"vite": "^4.4.1"
"vite": "^4.4.1",
"vite-plugin-pwa": "^0.16.4",
"workbox-window": "^7.0.0"
}
}
21 changes: 0 additions & 21 deletions app/public/manifest.json

This file was deleted.

53 changes: 29 additions & 24 deletions app/src/components/pwa-notifications.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,37 @@
import { Button, Notification } from "@mantine/core";
import { useCallback } from "react";
import { useAppDispatch, useAppSelector } from "../store";
import { resetUpdate, selectUpdateAvailable } from "../store/pwa";
import { useRegisterSW } from "virtual:pwa-register/react";

export function InstallUpdateNotification() {
const updateAvailable = useAppSelector(selectUpdateAvailable);
const dispatch = useAppDispatch();
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 = useCallback(() => dispatch(resetUpdate()), [dispatch]);
const onClose = () => {
setOfflineReady(false);
setNeedRefresh(false);
};

const onUpdate = useCallback(async () => {
dispatch(resetUpdate());
const onUpdate = useCallback(async () => {
updateServiceWorker(true);
}, []);

const registration = await navigator.serviceWorker.getRegistration();
if (registration && registration.waiting) {
registration.waiting.postMessage({ type: "SKIP_WAITING" });
}

window.location.reload();
}, [dispatch]);

return updateAvailable ? (
<Notification title="Update available!" onClose={onClose}>
Click{" "}
<Button compact onClick={onUpdate}>
Update now
</Button>{" "}
to get the latest version.
</Notification>
) : null;
return needRefresh ? (
<Notification title="Update available!" onClose={onClose}>
Click{" "}
<Button compact onClick={onUpdate}>
Update now
</Button>{" "}
to get the latest version.
</Notification>
) : null;
}
6 changes: 0 additions & 6 deletions app/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { PersistGate } from 'redux-persist/integration/react';
import { AppContextProvider } from './core/context';
import store, { persistor } from './store';
import * as serviceWorkerRegistration from "./serviceworker-registration";
import { setUpdateAvailable } from "./store/pwa";

import ChatPage from './components/pages/chat';
import LandingPage from './components/pages/landing';
Expand Down Expand Up @@ -89,7 +87,3 @@ async function bootstrapApplication() {
}

bootstrapApplication();

serviceWorkerRegistration.register({
onUpdate: () => store.dispatch(setUpdateAvailable()),
});
43 changes: 0 additions & 43 deletions app/src/service-worker.ts

This file was deleted.

146 changes: 0 additions & 146 deletions app/src/serviceworker-registration.ts

This file was deleted.

2 changes: 0 additions & 2 deletions app/src/store/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import messageReducer from './message';
import settingsUIReducer from './settings-ui';
import sidebarReducer from './sidebar';
import uiReducer from './ui';
import pwaReducer from './pwa';

const persistConfig = {
key: 'root',
Expand All @@ -38,7 +37,6 @@ const store = configureStore({
ui: uiReducer,
settingsUI: settingsUIReducer,
sidebar: persistReducer<ReturnType<typeof sidebarReducer>>(persistSidebarConfig, sidebarReducer),
pwa: pwaReducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
Expand Down
30 changes: 0 additions & 30 deletions app/src/store/pwa.ts

This file was deleted.

1 change: 1 addition & 0 deletions app/src/vite-env.d.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
/// <reference types="vite-plugin-comlink/client" />
/// <reference types="vite-plugin-pwa/client" />
Loading

0 comments on commit 36c1cb4

Please sign in to comment.