Skip to main content
This guide walks you through using the template which uses Next.js, Serwist (offline capabilities), and Thirdweb embedded wallet to build a Progressive Web Application (PWA) on Monad.

​
Prerequisites

​
Setup

  1. Clone the repository:
  2. cd into the project directory:
  3. Install dependencies:
  4. Create a .env.local file in the root directory:
  5. Start adding your environment variables to the .env.local file:
    If you lost your Thirdweb Client ID, you can find it in the Thirdweb dashboard.
  6. Generate VAPID keys for web push notifications:
    Copy the generated keys to your .env.local file (replace the placeholder values from step 5).
  7. Running the Application: Development Mode:
    The application will be available at http://localhost:3000. Production Mode: For full PWA functionality (including install prompts):

​
Folder structure of the template

​
Changing the app name

  • Edit public/manifest.json:
    • Change the name and short_name fields
  • Run npm run build to update the app

​
Notification Setup

To receive push notifications from this app, you need to enable notifications in your browser and/or system settings.

​
Browser Settings

  1. Click the lock icon 🔒 in the address bar
  2. Set “Notifications” to “Allow”
  3. Or go to Settings → Privacy and security → Site Settings → Notifications
  1. Click the shield icon 🛡️ in the address bar
  2. Turn off “Enhanced Tracking Protection” for this site (if needed)
  3. Allow notifications when prompted
  4. Or go to Settings → Privacy & Security → Permissions → Notifications
  1. Go to Safari → Settings → Websites → Notifications
  2. Find your site and set it to “Allow”

​
System Settings

  1. System Preferences → Notifications & Focus
  2. Find your browser and ensure notifications are enabled
  3. Check “Allow notifications from websites” in browser settings
  1. Settings → System → Notifications & actions
  2. Ensure your browser can send notifications
  3. Check browser notification settings
  1. Settings → Notifications → [Your Browser]
  2. Enable “Allow Notifications”
  3. Also enable in browser settings
  1. Settings → Apps → [Your Browser] → Notifications
  2. Enable notifications
  3. Check browser notification permissions

​
Backend Integration Required

SendNotification.tsx requires backend implementation:
  • Save subscription data when users subscribe (see TODO comments in code)
  • Delete subscription data when users unsubscribe
  • Implement /notification endpoint to send actual push notifications
  • Use web-push library or similar for server-side notification delivery

​
Customizing Notification Content

To customize your push notification content, edit app/notification/route.ts and modify the title, message, icon, and other properties in the sendNotification call.

​
Modifying the App Icon & Splash Screen

​
App Icons

Replace the icon files in the public/icons/ directory with your custom icons:
  • icon-512x512.png - Main app icon (512×512px)
  • android-chrome-192x192.png - Android icon (192×192px)
  • apple-touch-icon.png - iOS home screen icon (180×180px)
Also update the favicon:
  • public/favicon.ico - Browser favicon
  • app/favicon.ico - Next.js app favicon

​
Splash Screen

Splash screens are automatically generated from your app icon and theme colors defined in public/manifest.json. To customize:
  1. Update the theme_color and background_color in public/manifest.json
  2. Ensure your main icon (icon-512x512.png) represents your brand
  3. Run npm run build to apply changes
Use tools like PWA Asset Generator to create all required icon sizes from a single source image.

​
Deploying to Vercel

​
Using Vercel Dashboard

  1. Connect your repository:
    • Push your code to GitHub
    • Visit vercel.com and import your repository
  2. Configure environment variables:
    • In your Vercel project dashboard, go to Settings → Environment Variables
    • Add the same variables from your .env.local:
  3. Deploy: Vercel will automatically build and deploy your app
  4. Update Thirdweb settings: In your Thirdweb dashboard, add your Vercel domain (e.g., your-app.vercel.app) to the allowed origins
PWA features (install prompts, offline support, push notifications) work automatically on HTTPS domains like Vercel deployments.

​
Using Vercel CLI

Alternatively, deploy using the Vercel CLI:
  1. Install Vercel CLI:
  2. Login to Vercel:
  3. Deploy:
    Follow the prompts to configure your project.
  4. Add environment variables:
    Or you can go to the Vercel dashboard and add the environment variables there.
  5. Redeploy with environment variables:

​
Learn more