how to convert my next js app into a Progressive Web App
Answered
Siberian posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
I don't see this icon in address bar
![Image](https://cdn.discordapp.com/attachments/1231811277240926208/1231811277442257047/image.png?ex=663850a6&is=6625dba6&hm=9ea592a83bc49b143855fdc43d2a7a1b879615f515dabe7e67677ac3d32cc0aa&)
Answered by risky
i say in just have metadata.json in /app and then not in metadata+public is easier
62 Replies
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
do you have a
manifest.json
or manifest.webmanifest
file in the root of app dir (or in public folder and then linking with metadata)?![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
manifest:'/public/manifest.json'
};
I have![Image](https://cdn.discordapp.com/attachments/1231811277240926208/1231841948856483881/image.png?ex=66386d37&is=6625f837&hm=d92a9ed7506e785927b29b6e3484d7f9b06ebcea41e140aa9c07b4ab343360b4&)
do you wanna see my manifest file ?
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
firstly, you can put the manifest in root of /app and not worry about adding to menifest
secondly, anything in /public is accessible in / (ie it would be just .manifest.json)
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
I still don't see the icon
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
hmm i got it when i made a really basic one
what does yours have
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
what do you mean ?
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
whats the content
like mine is very simple and worked for me: https://emailthing.xyz/manifest.webmanifest and i can see it at https://emailthing.xyz
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
its just normal next js boilerplate code
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
yeah can i see it, and have you made the just
manifest:'/manifest.json'
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
wait where should I put this property ?
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
manifest:'/manifest.json'
};
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
nope still doesnt work
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
can you share the content of the manifest.json tho (it may need start_url or smth)
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
{
"name": "My awesome PWA app",
"short_name": "PWA App",
"icons": [
{
"src": "192.jpg",
"sizes": "192x192",
"type": "image/jpg",
"purpose": "any maskable"
},
{
"src": "384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "512.jpg",
"sizes": "512x512",
"type": "image/jpg"
}
],
"theme_color": "#FFFFFF",
"background_color": "#FFFFFF",
"start_url": "/",
"display": "standalone",
"orientation": "portrait"
}
this is mine![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
oh that is basicly all i have ðŸ˜
and your using google chrome im guessing
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
firefox
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
oh thats the issue
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
HUH
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
firefox doesnt have pwa in that sense anymore
are you saying you see it in other sites?
as i have have not seen it recently on any sites
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
I dont see it in twitter too
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
yeah if you try chrome or edge, it should work
(sorry, i kinda assumed based on the screenshot and most use chrome these days, i use firefox but very minority)
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
still not there 😦
![Image](https://cdn.discordapp.com/attachments/1231811277240926208/1231845698215870556/image.png?ex=663870b5&is=6625fbb5&hm=11aa82256ba8e558fd6cc388ad8eff489f9cf20e5567d2acb80da4dd8c217937&)
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
😦
WHYYyyYy does it not work
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
do you wanna guide me from the start if its too much to ask ?
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
based on what you have said, you have done everything i did..
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
/** @type {import('next').NextConfig} */
import withPWAInit from "@ducanh2912/next-pwa";
const nextConfig = {};
const withPWA = withPWAInit({
dest: "public",
cacheOnFrontEndNav:true,
aggressiveFrontEndNavCaching:true,
reloadOnOnline:true,
disable: false,
register: true,
scope: "/app",
sw: "service-worker.js",
workboxOptions:{disableDevLogs:true}
});
export default withPWA({
});
here is my config file btw![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
hmm i have no idea if that would mess with things
if you open dev tools
and can you find the tag like this in >head>
![Image](https://cdn.discordapp.com/attachments/1231811277240926208/1231846758657556540/image.png?ex=663871b1&is=6625fcb1&hm=941308142602d1059ee09e85e653030fef8b276c3d1c2f718c17cd44fc2a7c6b&)
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
hol up
![Image](https://cdn.discordapp.com/attachments/1231811277240926208/1231847057942253578/image.png?ex=663871f9&is=6625fcf9&hm=b9fa95496ae146ab23574326a347e5b9ef0223b24522c68e3b265b6815664aa3&)
![Image](https://cdn.discordapp.com/attachments/1231811277240926208/1231847197402726461/image.png?ex=66274e9a&is=6625fd1a&hm=8ca736e1ce7a8b5223e604440c66287120b1cdda59f238aab0b3cc5aa77b265a&)
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
uhhhhh
what does
localhost:3000/manifest.json
show 👀it better be the same file
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
o.O
![Image](https://cdn.discordapp.com/attachments/1231811277240926208/1231847417968726076/image.png?ex=6638724f&is=6625fd4f&hm=7b360f47c077da791f779049fdc5c2ef67bf5da412177979d46eda081a58eae6&)
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
ohhh thats going to be because of your lib
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
wait I have 2 manifest files
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
they must be making the manifest file themself
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
which one do I delete ?
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
i think you should remove yours
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
no look one is in public folder and another is in app folder like you suggested
![Image](https://cdn.discordapp.com/attachments/1231811277240926208/1231847805614690335/image.png?ex=663872ab&is=6625fdab&hm=badbfe4590d70b8b855b96736708acfded90c45b0d5df1ef485f1fc33f884212&)
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
oh only have it on one place
not both public and app
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
i say in just have metadata.json in /app and then not in metadata+public is easier
Answer
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
which do I delte ?
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
the one in public
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
SiberianOP
OMG
FINALLY
THANK YOU
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
YAYYYYyYy
no problem, if you have some more pwa issues feel free to make another thread (i personally have only used it to make the new window and nothing else ;()