What is PWA?
Progressive Web Applications (PWAs) are apps built with web technologies that we probably all know and love, like HTML, CSS...
For further actions, you may consider blocking this person and/or reporting abuse
created an account on this platform just to say Thank You
@3delton I'm so glad to hear that! Thank you for taking the time to create an account and share your appreciation.
Thanks a lot for the good post!
I have one question. According to the official document, the manifest.json should be in the root of app directory. but I keep failing to
next buildbecause of the file. so I want to try your method but before that, whats the difference between your method and the official document?@ffan0811
manifest.jsfile in the root of your app directory, you would need to set up your server to properly serve this file. This might involve configuring your server or using a server-side framework likeExpress.jsinNode.js.manifest.jsfile in the public folder, it will be served as a static file. In Next.js, any file inside the public directory is mapped to the root URL (/), sopublic/manifest.jswould be accessible athttp://localhost:3000/manifest.js. This is the simpler method and is generally recommended for static assets like the manifest file.In the context of a PWA, the manifest.js file needs to be accessible from the client-side, so it's typically placed in the public directory. This way, it can be easily linked in the HTML document's head section like so:
<link rel="manifest" href="/manifest.js">.thanks bro, it works for me!
yo bro thanks, but i want to ask something
this set up can provide offline mode? like moving to other page
@ramdhanstdi yeah, we can switch pages in offline mode. But API can't fetch on offline mode for sure. You should display an error message for that.
This is the think I hate about this package. They don't want to think in terms of offline-first, but it is literally the only way to do a PWA in Next.js
There is a package called next-offline but it hasn't been maintained in ages. I have to write something up if I actually figure this offline-first problem out. but right now it is frustrating.
Thank you! @sabbir_zz
I did all above steps, It works well on my system but when I push my code to the server for production , the project get 500 internal error. where is the problem ???
@arashcoder I think it's a deployment issue. Can you make sure you are deploying the project in a right way?
Bro I had a mistake thats was not related to the pwa at all . I was using “sharp” package for optimizing my images on production and that caused error 500 on the production . I removed the package and everything work as expected
Thank you for you r good documentation:)
it didn't work for me there was no service worker file or any other created with npm run build (in my case yarn run build)
Did you install next-pwa?
Thank you for the excellent post!
any suggestions for controlling splash screen? looking for resources on this...