Building Our First PWA | Example Project

[@kazaakas]

There's quite a few good JS teachers on KZbin, but this guy's didactics are the best I've seen. Great business model too. Great basic introduction for free and reasonably priced Udemy course for in-depth stuff. Normally it annoys me if people refer to their paid courses, but your teaching skills are of such high level that I'll probably drop a few euro's and check it out soon!

[@academind]

I don't know what to say but a massive THANK YOU for your absolutely fantastic feedback! It honestly means a lot to me to read that you enjoy my teaching style. I indeed try to balance free and paid content. Just in case you're interested you can also find all our free and paid (at discounted prices) content on our website, it would be great to welcome you on board of a course :) academind.com/learn

[@kazaakas]

Thanks to you! Quite a bit of my current knowledge comes from your stuff. Probably wouldn't have bothered with Redux without your channel. Seems like you're good at gauging how someone with less knowledge about a subject than yourself would interpret such subject and what questions it would arise for them. Most important thing for good tutorials (next to simplicity) is timing WHEN to explain how something works and why it's important(!), I especially like how you do that!

[@stgoddv2525]

This guy Is one of the best teachers right now worldwide

[@academind]

Thank you so much Santiago, this honestly means a lot to me :)

[@aniljamwal2409]

You are really a Legend. Helped me with all my technical problems. Thanks a lot for sharing great stuff

[@academind]

Thanks so much for your wonderful words Anil, this means a lot to me :)

[@10trends57]

*The cool thing about this man is that, he doesn't expect that you know already about these things* :) (Y)

[@academind]

Thanks for your great feedback, happy to read that :)

[@manishfoodtechs]

Great !!! Happy to find Academind. Thankgod someone finally knows what a new learner want. Keep it up

[@academind]

Thanks so much for your fantastic feedback Manish, we'll try our best to keep it up :)

[@manishfoodtechs]

I bought your course on udemy. Its wonderful. After learning I will have questions for two major things: how pwa responses to WebRTC ( Let me learn and apply it first by my self) and how we can build a PWA of php site? I have a complete site as homepage index.php ( If you can answer about this index.php replacing / merging in place of index.html)

[@jonathanwilson95]

Just dropping by to say thanks. :) I have bought a few of your courses before, and am happy to see one on PWAs. I'll see you in your udemy course :P

[@erikos93]

Such a clear and simple introduction to PWA's. Thank you! :)

[@academind]

Happy to read that you like it Erikos, thank you for your comment!

[@JonBrookes]

Fantastic. Thanks for this intro to pwas and service worker. Very well structured and easy to follow. This is in contrast to the heavily buzz worded and hyped content out there on the same and makes both easily accessible. I already started on your udemy course. Cheers Max

[@academind]

Thank you very very much for your wonderful feedback and for your support Jon! It makes me really happy to read that you enjoyed the content here on KZbin and that you are also are on board of the Udemy course :)

[@darkestblue91]

Hey Max, seeing this video i remember when you made a course for a Node.js e-commerce with Handlebars rendering hohoo with that course in mind I started as a freelancer a similar project 3 years ago for a tourism company here in Costa Rica to sell tours, and now I have a promising career in Web development (I was a C# developer when i leave college), so thanks for all the courses you made, all these knowledge is really useful.

[@academind]

Thanks so much for sharing this Josué! Stories like this keep me motivated because it is so great to read that the videos can help you and others to change their job and maybe also to improve their lives :)

[@FunkyToe369]

Fantastic explanation. Made me excited for your course so I went and picked it up :)

[@academind]

That's awesome! Thank you so much for your support Evan, great to have you on board of the PWA course :)

[@jsonkody]

This is one of the most amazing features of near future :D Every page can now be app, and for more appy apps (but still without headaches) future brings us flutter for christmas, yay! :D

[@moghauptag]

Loved it, this is guy is the best web developer and guide.

[@academind]

YOU are the best Amogh, thanks so much for your amazing comment!

[@amithbhagat]

Excellent video 👍, it also touches on several other topics on the way.

[@academind]

Thank you Amit!

[@maggieserino2674]

Hi Max, thank you very much for this exercise, your lessons are the best. Have a good day.

[@academind]

Very happy to read that Maggie, thank you for your comment!

[@sandypierre]

Great tutorial really great i watch this and after just go to udemy to get the full course!!you're a great teacher Max everything is well explain ! thank you so much for your tuts!!

[@academind]

Thanks so much for sharing this sandy, so great to read that you like the project example! I'm also very happy to have you on board of the Udemy course. Have fun with it :)

[@tharunrocky14]

Pretty Awesome!! Thanks for your time and Knowledge!! Fantastic! =)

[@academind]

Thank YOU for your awesome comment Tharun, it's really great to read that you like the video!

[@reristavi]

I really missed you... :) Had entire summer full of work couldn't find time to watch you...

[@academind]

Great to have you back Revaz, we added "some" videos in the meantime :)

[@anishasistla5022]

amazing max!! really helped alot

[@john-vega]

Great video! Thank you! I have an html5 app I've been using for over a year that uses Firebase connected to Raspberry Pi with nodejs using openzwave controlling a USB zwave hub that controls a zwave dimmer connected to an LED bedroom lamp. Should be fun to convert it to PWA :)

[@JoeWong81]

Great walkthrough Max thanks

[@academind]

Happy to read that you like it Joe, thank you for your comment!

[@techtalk1652]

Great presentation...thank you

[@academind]

Thank YOU Anuranjan, I'm glad to hear you're enjoying it!

[@sebastiensimon7700]

Academind hey which program did you used to code the web app?

[@svenkrau4686]

Really nice tutorial. :) I love your videos. One Question about your Udemy-Course. Do you explane how login-function works offline? :) thank u

[@cecitorresmx]

Awesome explanation. Thanks a lot!

[@academind]

Thank YOU Ceci for your awesome comment!

[@sourishdutta9600]

You are just awesome!! I always follow your tutorial through your KZbin channel and udemy , Thank you so much.Please make a tutorial implementation of pwa in Angular 5.

[@academind]

Thank YOU for your great feedback Sourish! And many thanks for the suggestion!

[@shashikanthp3145]

Omg thank you so much... I have spent all day looking at so many blog posts, articles and stack overflow cuz I had one problem. The part at 15:25 was the solution.. service_worker file to be placed at the root..

[@abdillahsatari5053]

Fantastic explanation thank you so much... I got a lot of knowledge

[@academind]

Very happy to read that the video was helpful Abdillah, thank you!

[@OliverWieland1981]

Great tutorial. Though functionality seems not to work on my device when the device is offline. The app loads, but the page content doesn't change when I click it. Offline mode works fine on my desktop browser. I'm also having issues with updating cache I think... I've just started with this stuff so I'm sure i'll figure it out soon enough.

[@liwenchi3922]

the chrome console show: "Site cannot be installed: a 144px square PNG icon is required, but no supplied icon meets this requirement", and i can't address it.

[@shashikanthp3145]

Maybe you already solved this issue, but for other new comers who are having this issue... You need to have 4 icons of sizes: (96x96, 144x144, 256x256, 512x512) This is necessary to make icons and splash screen for your pwa, when you get the option to add it to your home screen

[@AndriiPeliak]

Server worker is really cool

[@umeshbachchani5399]

Hi Max. Can u please explain PWA for LARAVEL web app.

[@maskman4821]

However the project in your pwa course on udemy the pwa-gram has an icon(info) where we can manually uninstall the app in settings->application->installed menu on device.

[@felixjosemon]

Nice video. Could you make a video to upload PWAs to Playstore? You can use PWA2APK as well.

[@jethrosumague5320]

You have earned a new subscriber. Great tutorial men! It is clear and precise. I will buy one of your courses on udemy. By the way do you have a video on how to apply pwa on database driven web-apps? Thanks

[@ezekieladodo2499]

Your course on udemy i saw it but its 15 hours long. I dont have that time. Can you recommend something more basic and shorter to complete in like 5 hours?

[@andreallwood2127]

Excellent tutorial, very informative, simple ,easy to follow. Just awesome.

[@bubadibaka2974]

I got an error when i use npm start . The ip was on but the page isnt working ... Please help me . I really want to learn this

[@AdityaSingh-nx6xp]

Thank you very much

[@ZullyAlarcon0310]

Hello Max, thanks for the video. Have you any tutorial about Angular Universal or how i can use ng-seed/universal?

[@prithwirajdutta3827]

Amazing, thankyou.

[@chrisly27]

I built a PWA for WordPress site which words properly in android but not in iOS. How can I go around? - Does PWA works in iOS?

[@edgarsanchez1019]

amazing video, i can't understand some things, but is an amazing video

[@academind]

Happy to hear that, thanks so much! If you want to dive much deeper, the course which is linked in the description should be really helpful :)

[@amitkumar-jw5ci]

Hi max , such a nice video. Can you please help me out to setup the architecture of node js with service worker. It means what will be the project root.. how my node api will be place and where will be the service worker place.

[@academind]

Unfortunately, I offer not coaching, consulting or mentoring at the moment, hence I can't help with this, sorry :/

[@luizmeier]

Excellent!

[@adriannlara]

sos el mejor! saludos.

[@lcd11001]

Thanks for you tutorial! I tested by cache manifest.json & sw.js from service worker script. Then I removed them out of code. But the cache storage still cache these files. How can I force refresh cache storage whenever sw.js updated?

[@mohebnia]

that was cool. thank you

[@academind]

Very happy to read that Milad, thank you so much!

[@harish9108]

Awesome!!

[@bornpahadi276]

Hi MAX thanks for the great tutorial, I just want to know how i can use SW with node express framework ? I means the project structure and all.

[@user-fg8nl3zg2h]

hello sir. how we can push notification send iOS via PWA. If it's not possible. it mean this is not good for user engaging. push notification is main key any online business revenue.

[@rk12rohit]

thnx for this vedio, Can u tell how to automatically add the add to home screen popup. In my case it's showing error, service worker does not successfully serve the manifest's start url. plz help.

[@JohnWeland]

Max! Awesome video as always. I decided to couple this with the "meetups" course you did. I am using that course to build a job tracker (add a job (with customer details) and edit it's status. I am noticing that vuejs only likes the manifest if its in the "/static" folder. However the manifest "start_URL" doesn't like anything I throw at it. Always returning "Site cannot be installed: the start URL in manifest is not valid" when I click add to home screen in the developer tools. Thoughts?

[@devilmanscott]

Yes, because the framework tries by combine all your files into a few, so you have to put it in a folder that's being complied, the app.js files is the only file actively being complied, minus static, though there's a decent trick, get a webpack-manifest plugin and place it in the build folder of Vue and point it to your manifest folder, you just have to add it to the base webpack file.

[@JohnWeland]

actually I found I was typing "start_URL" but "start_url" works fine. the service worker on the other hand loads and I can see it in the browser but if I go back to the manifest and click add to home screen I get Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest that is even using vue init pwa which supposedly is setup with webpack to have the manifest and service worker in the proper place and accounted for/referenced.

[@devilmanscott]

Well, I haven't check it out yet, normally just add it myself, because I kinda built my own, so I don't have to rely on frameworks. But go to the builds folder, it's a bit of a jumble, but check if it's aimed properly at your service workers and manifest, also remember this is open source, so bugs are to be expected. also just for shits and giggles build your project and check the dist folder, because webpack server keeps it invisible so it's more annoying to debug because you have to chrome dev tools.

[@maskman4821]

Dear Max, after I installed the app on my device, I found that there is no info(icon) on settings->application menu where we can uninstall app, is something missing???

[@saifullahrahman]

how to host this to github

[@0.h.a.n.0]

Hello, Thanks for the Exact explanation. I want to launch my website to PWA. I will be very grateful could you please tell me How can I do that on my live WordPress website. Unfortunately, I couldn't find the index.html file. Thanks a lot Hossein

[@academind]

To be honest, I never built a PWA with Wordpress, but the following article seems helpful: wpmobilepack.com/blog/building-progressive-web-apps-top-wordpress/

[@0.h.a.n.0]

Ok I'll try Thanks a lot

[@dheerajmantena3307]

Max can you please make a course or addon to (PWA) at udemy to develop an PWA application using google polymer with web components (webcomponent.org , materialdesign.io) , Thank you Max...

[@-NayanjyotiPegu]

Add to home screen is not shown in manifest,someone please help me out

[@need1e_chess]

can u explain app.js what it will be with node,express js project

[@webscaffolder6602]

great stuff...

[@academind]

Thank you, happy to read that you like the video!

[@brayonpi]

Very good the video! I have difficulty installing on my site, how do I open www.example.com instead of www.example.com:3000?

[@TheR3dbeard]

Hey Max. Have you ever had the possibility to check out NativeScript? It can be used to create iOS and Android apps. If so, what do you think about it?

[@JBuchmann]

TheR3dbeard An in depth course on that seems right up his alley, since it also can use Angular. I was planning on learning it, but the main series in Udemy has lackluster reviews. I saw Max had a good Ionic course in Udemy so I proceeded to forget Nativescript and go with Ionic instead. But if he had a Nativescript course, I'd definitely get it!

[@academind]

I know NativeScript, but haven't worked a lot with it to be honest. Hence a course isn't very likely in the near future, sorry.

[@Shadow01Net]

great tutorial bro, are you going to do a electron + vue + material-ui tut any soon ?

[@academind]

Thanks for the great feedback - I got no near-term plans for that to be honest. :/

[@johnnydriesen7575]

Like that combination.

[@muzammilrafay4348]

firebase functions not working Billing account not configured. can any body help me?? firebase functions not working.

[@GP-ur8xl]

hello,please I want to know about is it nature to build a pwa and use mysql database? and how?

[@hiteshchoudhary3412]

Hey Max, please build complete firebase udemy series?

[@yousefal-hadhrami7853]

22:32 Actiwate, +2 GMT spotted :D

[@codewithvivek1]

Can you please create a progressive web app with php or Laravel? That would be helpful :)

[@academind]

Thanks for the suggestion, I'll note it :)

[@hbela1000]

Five stars, thanks.

[@academind]

Thanks so much for your fantastic support!

[@chrischappell7643]

wonderful, max, you'handsome XD

[@academind]

Thanks a lot ;)

[@SaleemJafarChitrali]

Hey Can we follow the same steps for react?

[@hiteshchoudhary3412]

Please build complete Facebook JavaScript sdk series on udemy, because your are best in JavaScript Max?

[@academind]

Wow, that's awesome to hear, thanks so much! I got many course ideas actually and I'll put this on the list, too. Can't promise anything though.

[@hiteshchoudhary3412]

Hi Max, till now no one created series on Facebook JavaScript sdk in whole internet, having changes to create success as your pwa series?

[@parwindersingh2322]

Hi I have one query Regarding make Manifest.json dynamic I am making a Add To Home Screen using PWA. if i set static start_url in Manifest.json its working fine. but I want to get it working for as a dynamic URL of same website (EX: www.example.com/PRODUCT_NAME ). So that user can create short-cuts as many they want based on Product name , Please have a look on screen-short : prntscr.com/oej48u I do not have a clue on how to make this work and if it is even possible. Thanks In Advance

[@krupal1982]

i had to change 'http-server -c-1 -p 8081' to 'http-server -c-1' to work.Is that Ok?

[@shepherdmakara2106]

Can you create a progressive web app with php or Laravel?

[@academind]

Yes, you can add PWA features to any kind of web app - including Laravel.

[@ilhamsaputrajati9767]

how to show the add to home screen on mobile ?

[@hssgacecraig]

cant find the remote devices men helppp

[@Irnovi27]

i like your tutorial

[@academind]

Thank you! Awesome to hear that!

[@AndriiPeliak]

awesome

[@academind]

Thanks Andrij!

[@StijnHommes]

Apps should not be installed to the homescreen. They should go to the app drawer. However, PWAs (aka fake apps) should not be allowed to install at all.

[@kartalturhan]

Hello Chris O'Dowd.

[@academind]

Hello Kartal :)

[@mahendranishaddammah]

Wow very helpful ... Thank :)

[@academind]

That's great to hear - thanks so much Mahendra!

[@vikrantavishwakarma3281]

how do i get my website data on app. can u make video on it.

Sadly support is still crappy on iOS.

[@LaugeMP]

Yay, First comment

[@lordfighterx622]

PWAs are amazing

[@academind]

Great to read that you like them, I'm also really excited about PWAs :)