Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ Make bundled web app a PWA #570

Merged
merged 4 commits into from
Jan 25, 2025
Merged

✨ Make bundled web app a PWA #570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0338693
wip: doesnt work
aaronleopold Jan 24, 2025
d306f63
it works!
aaronleopold Jan 24, 2025
a6184ac
messing around with empty state
aaronleopold Jan 24, 2025
5f6365c
fix asset resolution
aaronleopold Jan 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions apps/server/src/routers/spa.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,6 @@ pub(crate) fn mount(app_state: AppState) -> Router<AppState> {
let dist_path = Path::new(&app_state.config.client_dir);

Router::new()
// FIXME: figure out why this doesn't work... The workaround is yucky stinky
// .route_service(
// "/favicon.ico",
// ServeFile::new(dist_path.join("favicon.ico")),
// )
.route(FAVICON, get(favicon))
.nest_service(ASSETS, ServeDir::new(dist_path.join("assets")))
.nest_service(DIST, ServeDir::new(dist_path))
Expand Down
1 change: 1 addition & 0 deletions apps/web/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
dev-dist
3 changes: 2 additions & 1 deletion apps/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"tailwindcss": "^3.4.3",
"typescript": "^5.4.5",
"vite": "^4.5.3",
"vite-plugin-tsconfig-paths": "^1.4.1"
"vite-plugin-tsconfig-paths": "^1.4.1",
"vite-plugin-pwa": "^0.21.1"
}
}
36 changes: 34 additions & 2 deletions apps/web/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,41 @@
max-width: 8rem;
}
</style>
<link rel="icon" type="image/icon" href="/assets/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" type="image/icon" href="/assets/favicon.ico" />
<link
rel="icon"
type="image/png"
href="/assets/favicon-16x16.png"
sizes="16x16"
purpose="any"
/>
<link
rel="apple-touch-icon image_src"
type="image/png"
href="/assets/favicon-180x180-apple-touch-icon.png"
sizes="180x180"
/>
<link
rel="apple-touch-icon image_src"
type="image/png"
href="/assets/favicon-192x192.png"
sizes="192x192"
purpose="maskable"
/>
<link
rel="apple-touch-icon image_src"
type="image/png"
href="/assets/favicon-512x512.png"
sizes="512x512"
purpose="maskable"
/>

<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
<meta name="theme-color" content="#161719" media="(prefers-color-scheme: dark)" />
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
</head>
<body>
<div id="root">
Expand Down
43 changes: 42 additions & 1 deletion apps/web/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'
import tsconfigPaths from 'vite-plugin-tsconfig-paths'

// https://www.npmjs.com/package/vite-plugin-node-polyfills
Expand All @@ -16,7 +17,47 @@ export default defineConfig({
define: {
pkgJson: { name, version },
},
plugins: [react(), tsconfigPaths()],
plugins: [
react(),
tsconfigPaths(),
VitePWA({
registerType: 'autoUpdate',
devOptions: {
enabled: true,
},
workbox: {
maximumFileSizeToCacheInBytes: 5 * 1024 * 1024, // 5MB
},
outDir: '../dist/assets/',
base: '/assets/',
// TODO(pwa): Add more manifest definitions for better overall experience
manifest: {
id: 'stump',
name: 'Stump PWA',
short_name: 'Stump',
theme_color: '#161719',
icons: [
{
src: '/assets/favicon-16x16.png',
sizes: '16x16',
type: 'image/png',
},
{
src: '/assets/favicon-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: '/assets/favicon-512x512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any maskable',
},
],
},
manifestFilename: './manifest.webmanifest',
}),
],
publicDir: '../../../packages/browser/public',
root: 'src',
server: {
Expand Down
Binary file added packages/browser/public/assets/favicon-16x16.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/browser/public/assets/favicon-192x192.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/browser/public/assets/favicon-512x512.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/browser/public/assets/favicon-apple-touch-icon-180x180.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 23 additions & 18 deletions packages/browser/src/scenes/home/NoLibraries.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,26 +12,31 @@ export default function NoLibraries() {

return (
<div className="flex flex-1 flex-col items-center justify-center">
<img
src="/assets/svg/mountain.svg"
alt="Construction illustration"
className="mx-auto h-72 w-1/2 shrink-0 object-scale-down sm:h-96"
/>

<div className="mx-auto flex max-w-lg flex-col space-y-2 text-center">
<Heading className="text-3xl font-extrabold md:text-4xl">{t(getKey('heading'))}</Heading>
<Text size="lg">
{t(getKey('messagePrefix'))}.{' '}
{t(getKey(`message.${canCreateLibrary ? 'create' : 'wait'}`))}
</Text>

{canCreateLibrary && (
<div className="flex items-center justify-center space-x-2">
<ButtonOrLink href={paths.libraryCreate()} variant="primary" className="mt-4">
{t(getKey('links.create'))}
<div>
<img
src="/assets/svg/mountain.svg"
alt="Construction illustration"
className="mx-auto h-auto w-3/5 object-scale-down sm:-my-1 sm:w-1/2 sm:px-2"
/>

<div className="mx-auto flex max-w-lg shrink-0 flex-col space-y-1.5 text-center">
<Heading className="text-2xl font-bold md:text-3xl">{t(getKey('heading'))}</Heading>
<Text className="text-base sm:text-lg">
{t(getKey(`message.${canCreateLibrary ? 'create' : 'wait'}`))}
</Text>

<div className="flex items-center justify-center space-x-2 pt-3">
{canCreateLibrary && (
<ButtonOrLink href={paths.libraryCreate()} variant="secondary">
{t(getKey('links.create'))}
</ButtonOrLink>
)}

<ButtonOrLink href={paths.settings()} variant="ghost">
{t(getKey('links.settings'))}
</ButtonOrLink>
</div>
)}
</div>
</div>
</div>
)
Expand Down
3 changes: 2 additions & 1 deletion packages/i18n/src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1737,7 +1737,8 @@
"wait": "Once libraries are created, they'll be displayed here"
},
"links": {
"create": "Create library"
"create": "Create library",
"settings": "Go to settings"
}
},
"pagination": {
Expand Down
Loading
Loading