Build and Deploy a React PWA - Why Progressive Web Apps are the Future of the Web
HTML-код
- Опубликовано: 11 сен 2024
- ❗ IMPORTANT:
Become a PRO at JavaScript: bit.ly/MasterJ...
⭐Tabnine - www.tabnine.co...
In this video, you're going to learn how to build a #PWA using #React. After the application is built, I'm going to show you how you can deploy it and also publish it to a special PWA store! We'll create custom service workers and use a JSON Manifest. Stay tuned!
Progressive Web Apps provide you with a unique opportunity to deliver a web experience your users will love. Using the latest web features to bring native-like capabilities and reliability, Progressive Web Apps allow what you build to be installed by anyone, anywhere, on any device with a single codebase.
Unfortunately, as of now, the founders of the PWA store closed their website. You'll still be able to code along with this video and do everything just fine! 😊
📧 Join our JavaScript Mastery's Newsletter on Web Development, JavaScript & React to get exclusive programming guides, tips & tricks, and entire e-books: resource.jsmas...
📚 Materials/References:
GitHub Code (feel free to give it a star ⭐) - github.com/adr...
All materials (API link, API key, image src link, offline.htm, App.css): gist.github.co...
Logo.png: ibb.co/Y3yyW93
bg.jpg: ibb.co/7XgmzCw
💼 Business Inquiries: contact@jsmastery.pro
🌎 Find Me Here:
Discord Group: / discord
Instagram: / javascriptmastery
Twitter: / js_mastery
BuyMeACoffe: www.buymeacoff...
This was simply on point. Nothing else to say. From development to deployment, without creating any confusions. Good job friend 👍.Thanks
Thank you for such a nice comment! 😊
And “Just Like That“ we’ve the PWA video. This was really cool and informative. Thank you.
Glad you liked it!
I have been reading articles on progressive web apps for almost 5 days now, finding a reliable source to learn how to make them. And finally, you upload a video regarding the same. My saviour!
Glad to be here at just the right time!
@@javascriptmastery Can you perhaps suggest a few resources from where I can learn more about progressive web apps
Law of attraction
@@sagar-tt4ub learn about workbox
@Aravinthan Subramanian thanks a lot, man!
Wow!!! So I learnt and built a PWA in few hours "Just like that". You are really amazing
Thank you! 🙌
I'm so amazed i could create a PWA in hours, installed in my own phone and interact with it !! Thankyou so so muchhh
Glad you like it, great job!
love the fluency in your voice
Appreciate it!
I cannot believe I did the whole tutorial, installed the app on my phone and everything works! Amazing tutorial.
Amazing job!
Converted the Ecommerce application developed by taking inspiration from one of your tutorials into a PWA. Thanks for taking time to create this content. Explanation about service workers was on point!
Wooowwww. Hey I am React js developer. And was looking for PWA good resource from last 7 8 month. And Today I reached at your channel. What a great video it is! Just one word Increadible. And you mentioned that PWA site was a Cherry on A Cake. Worth to subscribe your channel. Found good thing in Covid-19 lockdown time. Thank you soooo much
The stuff you explain i have heard nobody else explain. How do you build and deploy an app easily? This guy explains it perfectly.
Awesome Tutorial. You covered so much within 1 hour
Glad you think so!
that's Amazing, honestly I like the video and I am so happy with result.
it is the first time for me to do PWA and I feel like I understand everything, cuz you made it so easy and I like the way you explain.
keep it up "__"
Great to hear!
This is amazing! Thanks for the effort you put into creating your videos.
For anyone who's wondering, the theme is named "One Dark"
How amazing you are, That's why you called your channel "JavaScript Mastery", B'coz it's taught by the Master.
Thanks!
@@javascriptmastery Hi, One question why your create-react-app folder structure is different then mine. index.html is different and I didn't have offline.html in it.
heck yeah man his discord is fire as well
After watching this video entirely, PWAs are obviously the future of the WEB. It's incredible the PWAs
I agree!
@@javascriptmastery I have a problem, I uploaded my back end code on heroku after few days it stopped working, it gave Application error if I try to access it any idea what might happen I later created another app same response
Completely agree. Been building PWAs for five years now.
Loved it, show, it could only continue, like for example: put it in the play store, in the apple store (I know it would be more complicated, but it could have something like that too) Congratulations !!!!!!!!!! - Brasil - Serra - Espirito Santo
Great idea! :)
I keep finding you videos when I look for new knowledg, so much learning I've done thanks to your channel. Thanks so much, Adrian!
service worker is still confusing to me but PWA looks really cool, thank you for tutorial!
I agree. Thanks! 😊
saw first time a PWA video, already motivated to convert all of my next projects in PWA
Great Job!!, Thank you so much for maintain a very simplicity, while teach and teach from very basic. :)
You're very welcome!
I could not understand PWA better!! Thank you so much :)
I will use Pwa in my next project. It was simpler than I thought. Thanks for your effort 🙏
Most welcome 😊
Nice tutorial, you are a really good teacher. I didn't know this could be done without using frameworks like React Native or other. :)
This is AWESOME!! I hope you make a todo list tutoria that sync data when it's connected to internet 🙏
Its awesome... thanks,.
I know this channel from telegram group.. this is first time i watch video in this channel but i love it. If in my country there are instructor like u, what a happy i am..
Thanks and welcome
I was really waiting for your video.
I'll watch it by tomorrow and will wait for other video 😅.
Thanks man.
Thanks!
and "Just like that" i have learnt the basics of PWA
Amazing! 😊
now i want to add the interactive map feature and this would be a killer app. i've built a few of your projects and am in your discord. Now am working on adding my own independent features to make them even better.
Thank you for helping me improve my skills homie. first time i've tried building PWAs. this was a great intro
Awesom, thanks!
this was whole lot of a different experience and i loved it.
thank you
Thanks so much for impacting my programming journey.
You are an eye opener. Keep up with your good works.
My pleasure!
Gorgeous presentation. Simple and sweet. Got everything on first watch. Thanks men
Glad you liked it!
I'm waiting for your on coming videos until now. Now you could released a new tutorial. I'm very happy with that.
It's here now, thank you! :)
I hope you can make a new tutorials what I requested last time which is about CRUD operations with using React and Firebase.
The way you explain things is amazingly educational. Thanks a lot for what you do.
Thank you, appreciate it!
The best video on PWA with react. Loved it!
Thank you!
That must have been the best tutorial I've ever seen! THank you so much!
This guy is doper than X Æ A-Xii's name. No kidding. This content is gold. Just a small thing man. If you answer this, it will be really helpful. Can I make a PWA using django backend and Svelte for frontend? Just a small answer will give me a lot of assurance and confidence.
I love this channel. JS mastery! You are really making me a pro. Thanks a lot and keep up with your good work.
Glad you enjoy it!
Thank so much for this. You're amazing. Was this video all edited and recorded in your MacBook Air?
Yes, exactly!
YoOoooooo man
You have talent to be a good teacher, your video is very informative
Thanks sir 👍👍👍
Terrific presentation for a "REACT/PWA Hello World". Clear and concise.
I would like to sum everything up in one word - BRILLIANT!!!
Thank you! Appreciate it!
JavaScript Mastery seriously man....as a creator I look up to achieving this quality in my video someday....really inspirational.
Really it's appreciable !! Loved it.....Your tone was too much sharp and clear....
Thanks!😊
Bro takes a thousand thanks. Very clear concepts, and lots of tools.
Thanks man, Thanks for every single minute you put on this tutorials to share with us on youtube :)
Within a minutes of video started I subscribed to channel.
great video, keep it up, expect more valuable resources.
thank you......................................"stay healthy, stay happy"
Thank you!
Keep these videos coming, they are really very informative. God bless u with more subscribers this year.
Man your tutorials are awesome
Amazing Bro, you're an amazing teacher! 🤩
Great tutorial. Thank you, you helped me create my own Progressive Web app.
Glad it helped!
Thanks for the video, I felt like you could have explained more on the service worker file like what is fetch, active, install etc. Definitely, it is very helpful to get started.
I agree, thanks!
Just amazing...! I really appreciate your work dude. Keep making such content👍🔥
Appreciate it! 😊
Excellent tutorial. Concise on what the objective is.
pwa part starts at 21:23
congrats AdrianHajdin
you are a very talented teacher and your content its like a engine of self improvment for us!
keep on like this!
keep on gaining subcribers and community , and build a course platform .
your content is different than the rest of the tutorials or courses
it is more.. complete , with all the deploy stuff
have a nice day!
Thank you Tomas for such a nice comment, appreciate it really much and I'm glad you're finding the value in the content that I produce. Have a nice day!
Hi, I watch your every react videos. I'm expecting an fully power packed react js course from you.
That's amazing, course is coming soon!
I made an simple weather app with react recently but haven't implemented PWA. I'll implement now. react-weather-app-kamal.netlify.app/
Amazed by the power of Progressive Web Application.Very nicely explained Sir
I'm not sure if the api has changed since this video was made, but I'm watching this in Sept 2021 and in order to see the city name (as shown at 18:10) I had to modify the search function a bit.
Instead of
const data = ...
setWeather(data)
I did:
const d = ...
setWeather(d.data)
this got it working after a bunch of other trys... ty good video a time stamp for service worker is needed though here you go 21:28
You have fantastic video and your explanation is so concise. Will you make a video on PWA with Next.js?
Great Tutorial! really appreciated your method of teaching. Clean cut!!!
I know PWA now and looking forward to your other tutorial videos. Subscribed 🙂.
Thank you, appreciate!
Great thank you very much for very simple to understand and apply tutorial .
I am new to React and PWS this tutorial helped me to understand basic of PWA and react .
Thanks a lot ! new to your channel subscribed !!!
Great stuff, as always. Actually learned some stuff apart from PWA. Keep up with great work!
Thanks, will do!
Great, Simple Tutorial, not confusing at all. Thanks a lot!!
Hope you always healthy, blessed, long life, thank you so much for free great tutorials 🙏
The best one I saw on PWA. Subscribed. Thank you.
Love your work buddy, your explanation as always are so clear
Can you please next time make a React project where you will use Redux ? I've been struggling with Redux for months now and i feel like you're the one from who i can really understand it
Thanks
Thanks, I have a few projects in preparation!
My PWA install button don't show in the navigation bar.
Where can I find this.
Great tutorial! I now have an understanding of how to create a PWA. However, I noticed that you did not really make it available offline. Could you please explain how to make a website available on cellular data, so it can still make requests to the API even though there is no wifi.
I wanted this from you. Thanks. You have a great explanation
Thanks!
First of all I must appreciate the awesome work you are doing and helping learners like myself to keep up with the new skills in demand.
Secondly, can we have a tutorial of PWA with localstorage (e.g., sqlite) which synchronize with a cloud storage (e.g., mysql). Users are able to perform CRUD seamlessly offline/online.
Whenever user goes online, the app syncs itself to the cloud storage.
It will be good to see the handling of possible conflicts, as data generated by multiple users, syncs on multiple devices.
Great tutorial. Yet while doing the lighthouse testing it kept giving a warning that Manifest didn't have a maskable icon.
I solved the problem by adding the following line in the manifest.jason file at line 9
"purpose": "any maskable"
thank you bro
Very Helpful content. Thanks dude lots of Love
i immediately subscribe.. i like your video, fluency, clear and simple
Welcome aboard!
This is one of the best tutorials I have ever seen. Nice work.
Wow, thanks!
Thankyou soooooo much for making this ! I was able to integrate my django with react finally after watching this. Kudos Kudos Kudos !!! Other tutorials are soo confusing , this is like the most simple and precise explanation I've seen. Love from India. ❤️
Amazing! 😊
If our web app has Backend with nodejs, express then this process will remain same or we have to do some extra work for pwa??
Simply superb! Thanks for this, brother. Stay blessed
Awesome and clear, best one on the youtube.
Wow, thanks!
Thank you for the video. This is a nice, simple, and informative one.
Watched it completely. Will try an idea for sure
Hats off....
Best explanation....
U r the best teacher 💐
Your code in vs code is looking pretty awesome. can you please share with us the font name and the vs code theme name?
this is so great !. would love to see more of PWA
Great to see you 😊
Thanks for watching! :)
So clear. Absolutely perfect. Thanks
Awsome. didnt know so many things were possible with react . Amazing video.
This is better than watching Netflix.
Thank you!
Great video, you earned a follower, by the way can you publish video about push notifications is it related to PWA as well right?
Thanks a lot brother.Iam very heartful to thanks you bro
So useful ! Thanks a lot and keep going ;)
Very helpful and simple to understand. Thanks a lot.
Thanks for this amazing video, god bless you
Glad you like it!
best tutrial for PWA without a doubt
Wow man!!! Absolutely spot on❤️👌
very good explanation. keep it up mate :)
Thanks a lot!
We love you 3000 times bro
Thanks!
to the point video no diversions the best video for pwa which i recommends to all
Awesome simple on point. Thanks for this 👍 waiting for the same pwa many more 💪😊
The very understandable speech! Thanks
Thanks!