nextjs
Adding PWA
Go here:
https://ducanh-next-pwa.vercel.app/docs/next-pwa/getting-started
yarn add @ducanh2912/next-pwa && yarn add -D webpack
// next.config.js const withPWA = require("@ducanh2912/next-pwa").default({ dest: "public", }); module.exports = withPWA({ // Your Next.js config });
public/manifest.json:
{ "name": "My awesome PWA app", "short_name": "PWA App", "icons": [ { "src": "/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" }, { "src": "/icons/android-chrome-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#FFFFFF", "background_color": "#FFFFFF", "start_url": "/", "display": "standalone", "orientation": "portrait" }
pages/_app.js:
import type { AppProps } from "next/app"; import Head from "next/head"; export default function App({ Component, pageProps }) { return ( <> <Head> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>My awesome PWA app</title> <meta name="description" content="Best PWA app in the world!" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="mask-icon" href="/icons/mask-icon.svg" color="#FFFFFF" /> <meta name="theme-color" content="#ffffff" /> <link rel="apple-touch-icon" href="/icons/touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="152x152" href="/icons/touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/icons/touch-icon-iphone-retina.png" /> <link rel="apple-touch-icon" sizes="167x167" href="/icons/touch-icon-ipad-retina.png" /> <link rel="manifest" href="/manifest.json" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:url" content="https://yourdomain.com" /> <meta name="twitter:title" content="My awesome PWA app" /> <meta name="twitter:description" content="Best PWA app in the world!" /> <meta name="twitter:image" content="/icons/twitter.png" /> <meta name="twitter:creator" content="@DavidWShadow" /> <meta property="og:type" content="website" /> <meta property="og:title" content="My awesome PWA app" /> <meta property="og:description" content="Best PWA app in the world!" /> <meta property="og:site_name" content="My awesome PWA app" /> <meta property="og:url" content="https://yourdomain.com" /> <meta property="og:image" content="/icons/og.png" /> {/* add the following only if you want to add a startup image for Apple devices. */} <link rel="apple-touch-startup-image" href="/images/apple_splash_2048.png" sizes="2048x2732" /> <link rel="apple-touch-startup-image" href="/images/apple_splash_1668.png" sizes="1668x2224" /> <link rel="apple-touch-startup-image" href="/images/apple_splash_1536.png" sizes="1536x2048" /> <link rel="apple-touch-startup-image" href="/images/apple_splash_1125.png" sizes="1125x2436" /> <link rel="apple-touch-startup-image" href="/images/apple_splash_1242.png" sizes="1242x2208" /> <link rel="apple-touch-startup-image" href="/images/apple_splash_750.png" sizes="750x1334" /> <link rel="apple-touch-startup-image" href="/images/apple_splash_640.png" sizes="640x1136" /> </Head> <Component {...pageProps} /> </> ); }