Convert Next.js 14+ App to PWA (Progressive web app) | What is PWA and its Benefits

In this video, you will first get overview of project what we will be building. Then, I will show you how to create next.js 14 project and configure it so it can be converted into pwa (progressive web app). I will test pwa app with practical examples on desktop browser and mobile devices as well.
Finally I will explain you the benefits of PWA.
00:07 Demo of next.js 14 PWA app (what is PWA)
04:17 Create a new next.js 14 project
05:47 Learn Next.js 14 Tutorials
06:16 Install npm package for next PWA
07:10 Configure next.js project with PWA
14:25 Test next.js for PWA
18:45 Fix theme color error
19:57 Benefits of PWA
#nextjs14 #progressivewebapps #nextjstutorial
Follow Whatsapp Channel:
whatsapp.com/c...
React tutorials:
• React.js Tutorials
JavaScript Tutorials and Projects:
• JavaScript Tutorial an...
Angular Tutorials:
• Angular 16 Life Cycle ...
Angular 16 Crash Course For Begineers:
• Angular 16 Crash Course
Tech Tutorials - Random:
• Postman Tutorial - Tes...
Complete Next.js 13 Tutorials: • Next.js 13 Tutorials -...
Next.js 14 Tutorials:
• Next.js 14 Tutorials -...
Node Express MongoDB Bootcamp: • Build REST API with No...
ChatGPT Tutorials: • ChatGPT
Join our facebook group:
/ 996305460498149
Contact us for development services:
/ umair-jameel-24aa5368

[@abuzaryaseen474]

Amazing after spending the whole day reading different articles, finally implemented it with the help of your tutorial

[@mohammadghiasi2204]

It was great. Thank you very much ❤

[@maskman4821]

awesome, next topic: turn nextjs 14 app into android apk with capacitor && turn nextjs 14 app into windows app with electronjs ❤

[@ProgrammingwithUmair321]

Sure 🥳

[@VoceBR97]

Can you make a video explaining how to create a service-worker? for example to intercept data coming from a database, api. And save them in cache to make it a little more dynamic?

[@EzaDev]

Thank you for the tutorial, Indians are the best with their tricks

[@solomonsunday5537]

Thanks a lot for this lecture, please can you also show us how to prompt a user to update the PWA app when there is an update?

[@swire1571]

set reloadOnline in next.config.js. so it will automatically reload the cache

[@rheavictor7]

Really cool video, thanks for this!

[@vinaybhadre4664]

Awesome buddy ✨
Really help tutorial

[@liebespaar93]

i have problem
Content is not sized correctly for the viewportThe viewport size of 436px does not match the window size of 412px.
how can i fix it?

[@muhammadalifdanielbinmohdh3188]

how do i make the theme color and background color dynamic using tailwind or next theme

[@krystianwojtowicz9305]

No supplied icon is at least 144 px square in PNG, SVG or WebP format, with the purpose attribute unset or set to "any"

[@tejasivanarayanaprathipati4356]

It is beacause of the icons.
Try following these steps..
1. Open any website which converts photos into different sizes icons
2. Download those icons (Must download 144*144 sized icon)
3. Copy those icons(png type) to public
4. now in manifest.json file change the path of the images
5. Include 144*144 size icon also

[@dileepparmar1514]

thank you so much sir, how can i use it in other computer?

[@kacperkepinski4990]

i still dont know when to change id...., it was very unclear for me

[@TemmyCodingLifestyle]

Thank you. Does that mean the app has a kind of notification system with sound, and it's installed on mobile. will the sound notification work?

[@ProgrammingwithUmair321]

Yes,
If you have notifications implemented.

[@izz_h]

Awesome tutorial

[@z1982_]

Thanks you! But you don't really show offline support in details

[@GajendranMegajolla]

thanks for the effort

[@idkanythinganymoree]

Instant sub

[@Enigma237x]

Please would this work exactly for Nextjs app thar is not using src directory?

[@burgerxxiii]

Same procedure. I didn't do anything differently for mine to work

[@Enigma237x]

Yeah mine just work. But I was having issues with the images, kept giving errors at the lighthouse but I used this site Pwa builder and it is working now

[@burgerxxiii]

can you share the link of the PWA builder?@@Enigma237x

[@krystianwojtowicz9305]

i have files but i dont have download icon

[@shubhamrawat9596]

ThankU ❤

[@khaitrung28]

Oh @ducanh/next-pwa, I'm so proud that the author of this package is a Vietnamese ❤

[@KhanGaming-ls5ue]

Bro another Urdu channel

[@carchutogimenez8539]

Hi! Awesome tutorial, thank you!
According to the author, for new projects we should use Serwist.
It would be great if you have the time to do a tutorial using Serwist

[@MushfiqFeed]

Thank you man. After spending 2 days at last it has been done. I was facing problem at node js 20.10 then downgrade it to 18.19

[@chrisbitoy7272]

Why make mountain out of a rock, why not use the code from the makers of `next-pwa`:
```
const withPWA = require('next-pwa')({
dest: 'public'
})
module.exports = withPWA({
// next.js config
})
``` - plain and simple.

[@qwkl2450]

That's what i thought... Why is he using another library instead of the more famous "next-pwa"

[@piratestuart2917]

where is link broo ?

[@ziyabnajeeb]

Good work brother, only one thing, u r also able to send and receive notifications on the devices with pwa...

[@ilmioiosottoilletto]

Any idea on how to cache request done by server components?

[@pavlotsyhanok4843]

legend!!!!

[@dayanr.5950]

What happens when you have an app with several urls that contains params? I get error

[@whyisthiscodenotworking]

amazing video
easiest tutorial ! thx bro

[@АлександрМальков-ц8я]

Thanks a lot, it's perfectly done! PWA, Next.js

[@annielow9294]

Thanks bro, great explanations

[@almeale317]

Thanks man!

[@nexthero2616]

Nice bro

[@Paul-kn4xz]

Bro! You're awesome! 🤜🏻🤛🏻