Next.js Discord

Discord Forum

how to convert my next js app into a Progressive Web App

Answered
Siberian posted this in #help-forum
Open in Discord
Avatar
SiberianOP
I don't see this icon in address bar
Image
Answered by risky
i say in just have metadata.json in /app and then not in metadata+public is easier
View full answer

62 Replies

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