how to convert my next js app into a Progressive Web App
Answered
i_lost_to_loba_kreygasm posted this in #help-forum
Answered by risky
i say in just have metadata.json in /app and then not in metadata+public is easier
62 Replies
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)?@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)?
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
manifest:'/public/manifest.json'
};do you wanna see my manifest file ?
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)
hmm i got it when i made a really basic one
what does yours have
what do you mean ?
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
@risky whats the content
its just normal next js boilerplate code
@i_lost_to_loba_kreygasm do you wanna see my manifest file ?
yeah can i see it, and have you made the just
manifest:'/manifest.json'@risky yeah can i see it, and have you made the just `manifest:'/manifest.json'`
wait where should I put this property ?
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
manifest:'/manifest.json'
};nope still doesnt work
can you share the content of the manifest.json tho (it may need start_url or smth)
{
"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"
}oh that is basicly all i have ðŸ˜
and your using google chrome im guessing
firefox
oh thats the issue
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
I dont see it in twitter too
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)
😦
WHYYyyYy does it not work
do you wanna guide me from the start if its too much to ask ?
based on what you have said, you have done everything i did..
/** @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({
});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>
what does
localhost:3000/manifest.json show 👀it better be the same file
ohhh thats going to be because of your lib
wait I have 2 manifest files
they must be making the manifest file themself
which one do I delete ?
i think you should remove yours
no look one is in public folder and another is in app folder like you suggested
oh only have it on one place
not both public and app
i say in just have metadata.json in /app and then not in metadata+public is easier
Answer
which do I delte ?
the one in public
YAYYYYyYy
@i_lost_to_loba_kreygasm THANK YOU
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 ;()