NextJS
This example assumes you’re using npx create-next-app@latest (NextJS) to scaffold your project.
Steps
1. Open layout.tsx at the root directory, then it will look like
layout.tsx
import type { Metadata } from 'next';
import './globals.css';
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang='en'>
<body>{children}</body>
</html>
);
}2. Modify layout.tsx with your configuration
layout.tsx
import type { Metadata } from 'next';
import './globals.css';
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang='en'>
<head>
<link
rel='manifest'
href='https://transcodes_cdn_url/01JWW55QK8Z4MFK9S0RG6527C6/manifest.json'
/>
<script
type='module'
src='https://transcodes_cdn_url/01JWW55QK8Z4MFK9S0RG6527C6/webworker.js'
></script>
</head>
<body>{children}</body>
</html>
);
}3. Create sw.js and place in the /public
sw.js
importScripts(
'https://transcodes_cdn_url/01JWW55QK8Z4MFK9S0RG6527C6/serviceworker.js'
);4. It should look like this
5. Now, you can Transcodes PWA is activated successfully
Last updated on