A Progressive Web App setup with Push Notifications and Offline Mode
Click the button to clone this repository and deploy it on Vercel
Customize the site config at site-config.ts
Modifying values here will update your PWA config such as your Web Manifest, Metadata, and Generated Images
Change the app icon in custom-icon.tsx
This icon will be used to generate almost all of the PWA visual assets
Generate new Apple Splash Screens in public/splash_screens
We are using this free generator. This will give you a zip file containing a folder called splash_screens, which you can use to replace the existing folder.
The required PWA metadata is taken care of in the Manifest and the Metadata object in the Root Layout
We are generating most of the required PWA icons & images using Next.js Image Generation, which uses JSX and CSS to generate dynamic images. We are pulling in the custom svg from custom-icon.tsx and the config from site-config.ts. See the list of generated assets below:
- Icons (icon.tsx)
- Maskable Apple Icon (apple-icon.tsx)
- OpenGraph (opengraph-image.tsx)
The only assets not being auto-generated are the Apple Splash Screens.
Currently, Apple requires you to provide a static image for every device width/height that you want to support. As of now, we are using a free external generator and placing them in the public folder
Here is the free tool we used to generate the Apple Splash Screens. You can then drag them in place of the existing ones.
We are using next-pwa to take care of the main service worker functionality such as installing, updating, and caching. We are also including push notification logic located at worker/index.ts.
The usePushNotifications hook takes care of subscribing a user to push notifications using the web-push package
For demo purposes, the user's subscription is being saved to localstorage. It is recommended to save this in your database. See the snippet below for an example.
model User {
id String @id @default(cuid())
username String @unique
password String
pushSubscription Json?
}
VAPID Keys: (Required)
These allow the server to send push notifications to browser.
Generate these and put them in your .env file as shown below.
npx web-push generate-vapid-keys
VAPID_PUBLIC_KEY=BIUXugjBUcsYUvck9gKaHGEtSYbkZ5USN-xUnEt3VXnT1Dj98FuBhEMiSUBdR1KatIjwrAuQF04rKXEKBnoIjv8
VAPID_PRIVATE_KEY=0sXtucpaDfqQtIFDC3WZXZTdbjDSqrcBQ4J1DhTWEPA
We are using the default caching setup of next-pwa, which is to basically cache everything. View their documentation for customization options
When the user is in offline mode, they will be sent to this page
This example uses the pwa-install library for the installation prompt at installation-prompt.tsx , but this can be easily replaced by another implementation.
