En este tutorial vamos a aprender a crear una aplicacion web progresiva o Progressive Web App (PWA) usando Nextjs como Framework frontend.
¿Qué es una PWA?
Estas son algunas webs donde puedes generar el manifest facilmente:
Creación de una aplicación de Nextjs
npx create-next-app nextjs-pwa-tutorial
con las siguientes opciones:
√ Would you like to use TypeScript? Yes
√ Would you like to use ESLint? Yes
√ Would you like to use Tailwind CSS? Yes
√ Would you like to use `src/` directory? Yes
√ Would you like to use App Router? (recommended) Yes
√ Would you like to customize the default import alias (@/*)? No
Generadore de Manifest
https://www.simicart.com/manifest-generator.html/
Descarga el Zip con los iconos y el manifest y coloca los archivos en la carpeta public
Y en cuentao al archivo manifest.webmanifest, vamos a cambiar el nombre a manifest.json
npm i next-pwa
Luego vamos a alterar el archivo next.config.js
/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')
const nextConfig = {
...withPWA({
dest: "public",
register: true,
skipWaiting: true,
sw: "/sw.js",
})
}
module.exports = nextConfig
Finalmente vamos a añadir en el Root Layout lo siguiente para poder leer el manifest:
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
manifest: "/manifest.json",
icons: {
apple: "/icon.png",
},
themeColor: "#000000",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}