Next PWA

apps/antalmanac/index.html

@@ -16,13 +16,9 @@
 
         <!-- HTML Meta Tags -->
         <meta charset="utf-8" />
-        <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
-        />
         <meta name="theme-color" content="#305db7" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style " content="black-translucent" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
         <meta
             name="keywords"
             content="UCI,Anteater,search,classes,Calendar,development,software,add courses,antalmanac,course,course planner"

apps/antalmanac/next.config.mjs

@@ -1,4 +1,11 @@
+import withPWA from 'next-pwa';
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {};
 
-export default nextConfig;
+export default withPWA({
+    dest: 'public',
+    register: true,
+    skipWaiting: true,
+    disable: process.env.NODE_ENV === 'development',
+})(nextConfig);

apps/antalmanac/package.json

@@ -52,6 +52,7 @@
         "moment": "^2.29.4",
         "moment-timezone": "^0.5.43",
         "next": "^15.3.1",
+        "next-pwa": "^5.6.0",
         "notistack": "^2.0.8",
         "posthog-js": "^1.236.1",
         "react": "^18.2.0",

apps/antalmanac/public/index.html

@@ -16,10 +16,6 @@
 
         <!-- HTML Meta Tags -->
         <meta charset="utf-8" />
-        <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
-        />
         <meta name="theme-color" content="#000000" />
         <meta
             name="keywords"

apps/antalmanac/src/app/layout.tsx

@@ -1,5 +1,5 @@
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 
 import AppThemeProvider from '$src/app/Theme';
 import './globals.css';
@@ -44,8 +44,12 @@ export const metadata: Metadata = {
     ],
 };
 
-export const viewport = {
+export const viewport: Viewport = {
     themeColor: '#305db7',
+    width: 'device-width',
+    initialScale: 1,
+    userScalable: false,
+    viewportFit: 'cover',
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

apps/antalmanac/src/app/manifest.ts

@@ -0,0 +1,56 @@
+import type { MetadataRoute } from 'next';
+
+import { BLUE } from '$src/globals';
+
+export default function manifest(): MetadataRoute.Manifest {
+    return {
+        id: 'https://antalmanac.com',
+        scope: 'https://antalmanac.com',
+        name: 'AntAlmanac',
+        description: 'A course exploration and scheduling tool for UCI Anteaters',
+        lang: 'en',
+        dir: 'ltr',
+        start_url: '/',
+        display: 'standalone',
+        theme_color: BLUE,
+        background_color: BLUE,
+        orientation: 'portrait',
+        categories: ['education', 'productivity', 'utilities'],
+        icons: [
+            {
+                src: '/icons/icon-192.png',
+                sizes: '192x192',
+                type: 'image/png',
+            },
+            {
+                src: '/icons/icon-512.png',
+                sizes: '512x512',
+                type: 'image/png',
+            },
+        ],
+        screenshots: [
+            // We should probably add nicer screenshots later
+            {
+                src: '/screenshots/desktop.png',
+                sizes: '1280x630',
+                type: 'image/png',
+                form_factor: 'wide',
+                label: 'Schedule and course search',
+            },
+            {
+                src: '/screenshots/mobile_calendar.png',
+                sizes: '750x1626',
+                type: 'image/png',
+                form_factor: 'narrow',
+                label: 'Calendar with schedule',
+            },
+            {
+                src: '/screenshots/mobile_classes.png',
+                sizes: '750x1626',
+                type: 'image/png',
+                form_factor: 'narrow',
+                label: 'Course search result',
+            },
+        ],
+    };
+}

apps/antalmanac/src/components/Header/Header.tsx

@@ -44,43 +44,46 @@ export function Header() {
         }
     }, [importedUser, session]);
     return (
-        <AppBar
-            position="static"
-            color="primary"
-            sx={{
-                height: 52,
-                padding: 1,
-                boxShadow: 'none',
-                backgroundColor: BLUE,
-            }}
-        >
-            <Box
+        <>
+            <AppBar
+                position="static"
+                color="primary"
                 sx={{
-                    display: 'flex',
-                    height: '100%',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
+                    height: 'calc(52px + env(safe-area-inset-top))',
+                    padding: 1,
+                    paddingTop: 'calc(1px + env(safe-area-inset-top))',
+                    boxShadow: 'none',
+                    backgroundColor: BLUE,
                 }}
             >
-                <Logo />
+                <Box
+                    sx={{
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                    }}
+                >
+                    <Logo />
 
-                <Stack direction="row">
-                    <Save />
-                    <Load />
-                    <Import key="studylist" />
-                    <Login />
-                    <AppDrawer key="settings" />
-                </Stack>
+                    <Stack direction="row">
+                        <Save />
+                        <Load />
+                        <Import key="studylist" />
+                        <Login />
+                        <AppDrawer key="settings" />
+                    </Stack>
 
-                <AlertDialog
-                    open={openSuccessfulSaved}
-                    title={`Schedule from "${importedUser}" has been saved to your account!`}
-                    severity="success"
-                    onClose={handleCloseSuccessfulSaved}
-                >
-                    NOTE: All changes made to your schedules will be saved to your Google account
-                </AlertDialog>
-            </Box>
-        </AppBar>
+                    <AlertDialog
+                        open={openSuccessfulSaved}
+                        title={`Schedule from "${importedUser}" has been saved to your account!`}
+                        severity="success"
+                        onClose={handleCloseSuccessfulSaved}
+                    >
+                        NOTE: All changes made to your schedules will be saved to your Google account
+                    </AlertDialog>
+                </Box>
+            </AppBar>
+        </>
     );
 }

apps/antalmanac/src/components/Header/SettingsMenu.tsx

@@ -256,7 +256,13 @@ function AppDrawer() {
                 anchor="right"
                 open={drawerOpen}
                 onClose={handleDrawerClose}
-                PaperProps={{ style: { borderRadius: '10px 0 0 10px' } }}
+                PaperProps={{
+                    style: {
+                        borderRadius: '10px 0 0 10px',
+                        paddingTop: 'env(safe-area-inset-top)',
+                        paddingBottom: 'env(safe-area-inset-bottom)',
+                    },
+                }}
                 variant="temporary"
             >
                 <Box style={{ width: isMobileScreen ? '300px' : '360px', height: '100%' }}>

apps/antalmanac/src/components/HelpMenu/HelpMenu.tsx

@@ -64,7 +64,7 @@ export function HelpMenu() {
         <Stack
             sx={{
                 position: 'fixed',
-                bottom: isMobile ? 65 : 16, // Magic number
+                bottom: `calc(${isMobile ? 65 : 16}px + env(safe-area-inset-bottom))`, // Magic number
                 right: 8,
             }}
             spacing={1}

apps/antalmanac/src/components/ScheduleManagement/ScheduleManagementTabs.tsx

@@ -66,7 +66,15 @@ export function ScheduleManagementTabs() {
     const { activeTab } = useTabStore();
 
     return (
-        <Paper elevation={0} variant="outlined" square sx={{ borderRadius: '4px 4px 0 0' }}>
+        <Paper
+            elevation={0}
+            variant="outlined"
+            square
+            sx={{
+                borderRadius: '4px 4px 0 0',
+                paddingBottom: 'env(safe-area-inset-bottom)',
+            }}
+        >
             <Tabs value={activeTab} indicatorColor="primary" variant="fullWidth" centered>
                 {scheduleManagementTabs.map((tab, index) => (
                     <ScheduleManagementTab key={tab.label} tab={tab} value={index} />

apps/antalmanac/src/routes/Home.tsx

@@ -16,7 +16,7 @@ import { useScheduleManagementStore } from '$stores/ScheduleManagementStore';
 
 function MobileHome() {
     return (
-        <Stack component="main" height="100dvh">
+        <Stack component="main" height="calc(100svh + env(safe-area-inset-top))">
             <Header />
             <ScheduleManagement />
         </Stack>