8000 added pwa capabilities · devel0/example-webapp-with-auth@f6a9827 · GitHub
[go: up one dir, main page]
Skip to content

Commit f6a9827

Browse files
devel0devel0
committed
added pwa capabilities
1 parent 76e41ca commit f6a9827

9 files changed

+488
-2
lines changed

‎readme.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
- Login / Logout / Reset lost password through email link
6464
- User manager with auth controller [edit user][3] to create, edit username, password, email, roles, disable
6565
- Light/Dark themes, Snacks
66+
- PWA capabilities ( installable w/chrome )
6667

6768
- Debugging
6869
- backend and frontend debugging in a solution from the same IDE

‎src/app/frontend/index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/app-icon.svg" />
6+
<!--
7+
manifest.json provides metadata used when your web app is installed on a
8+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
9+
-->
10+
<link rel="manifest" href="/manifest.json" />
611
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
712
<!-- <title>Vite + React + TS</title> -->
813
</head>

‎src/app/frontend/package-lock.json

Lines changed: 201 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/frontend/package.json

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,24 @@
2525
"react-draggable": "^4.4.6",
2626
"react-redux": "^9.1.2",
2727
"react-router-dom": "^6.23.1",
28-
"usehooks-ts": "^3.1.0"
28+
"usehooks-ts": "^3.1.0",
29+
"web-vitals": "^2.1.4",
30+
"workbox-background-sync": "^6.6.0",
31+
"workbox-broadcast-update": "^6.6.0",
32+
"workbox-cacheable-response": "^6.6.0",
33+
"workbox-core": "^6.6.0",
34+
"workbox-expiration": "^6.6.0",
35+
"workbox-google-analytics": "^6.6.1",
36+
"workbox-navigation-preload": "^6.6.0",
37+
"workbox-precaching": "^6.6.0",
38+
"workbox-range-requests": "^6.6.0",
39+
"workbox-routing": "^6.6.0",
40+
"workbox-strategies": "^6.6.0",
41+
"workbox-streams": "^6.6.0"
2942
},
3043
"devDependencies": {
3144
"@svgr/plugin-svgo": "^8.1.0",
45+
"@types/node": "^22.8.4",
3246
"@types/react": "^18.2.66",
3347
"@types/react-dom": "^18.2.22",
3448
"@typescript-eslint/eslint-plugin": "^7.2.0",

‎src/app/frontend/public/manifest.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"short_name": "example-webapp-with-auth",
3+
"name": "Example webapp with auth",
4+
"icons": [
5+
{
6+
"src": "app-icon.svg",
7+
"sizes": "48x48 72x72 96x96 128x128 256x256 512x512",
8+
"type": "image/svg+xml",
9+
"purpose": "any"
10+
}
11+
],
12+
"start_url": ".",
13+
"display": "standalone",
14+
"theme_color": "#000000",
15+
"background_color": "#ffffff"
16+
}

‎src/app/frontend/src/main.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import styled from '@emotion/styled'
99
import { MaterialDesignContent, SnackbarProvider } from 'notistack'
1010
import { red, green, orange, blue } from '@mui/material/colors'
1111

12+
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
13+
import reportWebVitals from './reportWebVitals';
14+
1215
document.title = APP_TITLE
1316

1417
const StyledMaterialDesignContent = styled(MaterialDesignContent)(() => ({
@@ -42,3 +45,13 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
4245

4346
// </React.StrictMode>,
4447
)
48+
49+
// If you want your app to work offline and load faster, you can change
50+
// unregister() to register() below. Note this comes with some pitfalls.
51+
// Learn more about service workers: https://cra.link/PWA
52+
serviceWorkerRegistration.unregister();
53+
54+
// If you want to start measuring performance in your app, pass a function
55+
// to log results (for example: reportWebVitals(console.log))
56+
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
57+
reportWebVitals();

‎src/app/frontend/src/reportWebVitals.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { ReportHandler } from 'web-vitals';
2+
3+
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4+
if (onPerfEntry && onPerfEntry instanceof Function) {
5+
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6+
getCLS(onPerfEntry);
7+
getFID(onPerfEntry);
8+
getFCP(onPerfEntry);
9+
getLCP(onPerfEntry);
10+
getTTFB(onPerfEntry);
11+
});
12+
}
13+
};
14+
15+
export default reportWebVitals;

0 commit comments

Comments
 (0)
0