Build your First Angular PWA from Scratch (Angular 6 PWA Tutorial)

[@DesignCourse]

Be sure to subscribe now! My answer for today's question: Absolute, 100% yes. I haven't build a full production PWA, but I definitely plan on it some time in the near future. How about you?

[@tednivan1638]

A pwa using firebase would be awesome :)

[@ikezedev]

Yeah..... I would love to try it too. How do you get user to accept to put it on their device( add to their mobile apps)

[@AnkitSingh-go3nf]

can you give me source code of this

[@kobibentata]

Just a small, important note: At newer versions of NG, the command for building the app for production is: ng build --configuration production (--prod is no longer supported)

[@Vaishnavu_minaloor]

Yes, I found that mean while .

[@sebastiangug8284]

Man, just wanted to say your tutorials are awesome. I've seen so many people record themselves in a corner as part of the tutorial but make no use of that, the way you do it is useful and really ads to the experience. Great job!

[@streetchronicles5693]

Got asked to look into this at work. Looked pretty straight forward, and I was able to propose a solution, thanks for this!

[@UltraDraft]

I did make a PWA a few months ago and it turned out to be one of the best preforming apps I've ever did made

[@ashishmehradotdev]

Awesome tutorial on PWA. I will definitely be going to use it in my future Angular Projects. One more thing I want to mention is that there is no need to add service in providers array in the app.module.ts file because we already declared it as a root level service in data.service.ts.

[@XX-vu5jo]

Hoping you will be able to read and reply to this! You are by far the best tutor here. You are a gem in the community! please keep doing this and please do not stop on improving! you are helping so much specially the younger enthusiast....please do more and more time to time. I hope you'll be able to read this...

[@seanknowles4557]

It would be awesome to get a complete course, with a mobile-first responsive design, installable as an app on a mobile as a pwa that scales when viewing on a desktop (integrated with firestore). I would pay top dollar for a full course including the design phase that you normally include.

[@DesignCourse]

I've been thinking of doing a robust PWA course similar to this. Thanks.

[@seanknowles4557]

definitely has legs would be a quick early sign up for me would put the cash down already ;). Angular/google are really pushing pwa forward and some big companies are already utilizing the technology. If you decide to do a complete course I will pay for early access / incremental access etc on your site. PWAs are perfect for mvps and rapid prototyping for startup ideas. Awesome stuff, thanks for all the tutorials thus far, really appreciate the content and for your interaction here on the threads fingers crossed you hit the PWA area hard with an in-depth course.

[@KamelJabber1]

+1 for this idea

[@abhim7497]

+1 for the idea

[@pavels461]

Really good introduction, I'm waiting for a deeper explanation of PWA concept impatiently, especially via Angular framework.

[@uffecarlsson18]

Yes. I working on o booking app for a client.. and this is wery interesting with the offlline features.. great job once again.. You are awesome..

[@uffecarlsson18]

Its on Angular 6 and firebase as a backend and authentication.. Its great

[@tednivan1638]

Great video! Could you show how to add the pwa to a phone next to native apps?

[@toastedbagel2100]

I'm building a pwa currently for work and this is just what I needed

[@prasadnarayana7257]

How you added it to mobile screen

[@kefamutuma7402]

Been waiting for this vid on PWA literally

[@v.p22709]

I didn't know what pwa is, but I've just got a good introduction from your video

[@hernanbeatle]

Thanks for your new video, and for your efforts to show the concepts of what you are presenting. It's must be very annoying and time consuming all the testing with and without internet connection, and I guess that after a few hours of adding PWA, I would be messing up with some features, and I would become confused, whether the browser gave me the latest results, or whatever, or if I refreshed unconsciously. I think, that like everything, it's a matter of getting used to it. As for answering your question... I am building a site, and I was planning to use BehaviorSubject to bring a bunch of product items, and avoiding making an API call every time I ask for them... of course, if I refresh, the API will be called again. Maybe adding PWA to create a fully functional offline site might become very complex, and could be very expensive. I guess from a performance standpoint, and for the purpose of making your app faster, this is a great help with little effort.

[@GeorgeGomez]

Yes ive always wanted to, but never found the time. This video came out at the right time for me because I now have time

[@parthabh123123]

Thoroughly enjoyed it. Good work. Very nicely explained.

[@skokonyane]

Thanks for the tutorial. I can definitely see potential in this and am planning to try it out today. Again, wonderful tutorial, thanks.

[@taaratigadi7065]

Its very gud one... it’s awesome 😎 I started developing last week a new application with angular material.. now i wil turn that to pwa

[@JesperPDk]

Imagine whether it's possible that you could make a video that shows how to quickly and easily get started with Angular +6 in Visual Studio Code?

[@SampathLokuge]

This is really awesome. Please continue this series. Cheers!

[@koukiadem]

Good Tutorial! why you didn't use ng serve ? why building and http-server ?

[@DesignCourse]

Good question. When developing your PWA app, it's perfectly fine to use 'ng serve' while developing (in fact that's preferable). But PWA functionality is only added when you build for production. I was simply demonstrating PWA functionality, thus had to keep building and starting a server.

[@koukiadem]

I get it .. Thank you Mr.Gary.. Love your Content.. Keep up the good work ♥

[@oxooxoxoxxoxx351]

​@@DesignCourse We can change this behaviour by configure the ServiceWorkerModule in the AppModule `imports` section like this: ServiceWorkerModule.register('ngsw-worker.js', { enabled: true }) (Sorry for my English)

[@ketanmohide306]

@@DesignCourse Can you also tell me how can I resolve CORS issue in pwa. I am calling my backend api which runs on 9010 port from pwa but not able to do that even after creating a proxy file which actually worked when i had a simple angular app last time.

[@diegocoding]

Excelent tutorial, regards from Venezuela!

[@sveinsoermo9883]

Yes, will start before the end of the year.

[@useryoutube8901]

Built a tic tac toe PWA following Fireship's tutorial. I want to try at least one more.

[@Ardiz133]

Yes, I need more PWA tutorial.

[@Bibbs420]

Thank you! This helped me a lot at building up my PWA.

[@nerdiloo9863]

Good one - and yep I intend to update some projects at work to pwa.

[@kiran59345]

Hey, hi guys, I'm new to programming. Can someone explain why there was no error at 18:44 ..?? Since the div element was not closed.

[@cheuk102]

Excelent video, very good explanation of PWA, Hope more videos like this, thanks!

[@mrr4181]

best video on the internet

[@navislogs8982]

This is going to really help me for my new app, Thanks a lot Gary

[@prasadnarayana7257]

can we have a video on PWA's and offline, adding it to mobile screen(android/IOS) using angular latest versions?

[@prasadnarayana7257]

If you have any paid courses related to this I'm ready to join. can we have a video on PWA's and offline, adding it to mobile screen(android/IOS) using angular latest versions?

[@80amnesia]

@16:15 ngOnInit() ... he's not inheriting OnInit on the --> "AppComponent implements OnInit" . How come it is working? I'm using ng 5, is this different in ng 6?

[@viveknegi7006]

Awesome, you presently it very well

[@adejuwonoshadipe8454]

am going to learn it more extensively and try it out Thanks, once again .

[@sagarjadhav5429]

Thanks ...have learned a lot of things from this videos.

[@Afghah]

Good stuff ... I've not made a PWA but I'm working on a project that might need it.

[@mukundhbhushan6709]

Great..... waiting for this ever since angular 6 was released

[@StijnHommes]

So why were you not waiting to learn how to build real native apps? Are you really THAT keen to get your users to download PWA spam?

[@mukundhbhushan6709]

@@StijnHommes Aren't you too late buddy. I commented this 3 years ago. I wanted to learn it, what's bothering you

[@RayCarneiro]

Are you using a Chroma Key to record this video? I see you were in your bedroom without any background and then your edited video looks great.

[@paulwade1123]

Hi Gary, Thanks for producing this tutorial. I've got my PWA Angular web app partially working, but the http-server doesn't handle other routes eg. /Home or /About. Your example works fine, as it only has one route defined, but my app has multiple routes. Any help appreciates. Regards, Paul

[@JamesSchram102045]

Yes PWA's are on my list of projects to do.

[@dinonppa1]

Can you do a tutorial on bootstrap studio?

[@OnTheSpurOfTheMoment]

I tried converting one of my applications to PWA but had issues with not being able to cache the Bootstrap CSS, Jquery and Bootstrap JS files. I also had CRUD operation using Firebase and that data I was not able to cache. I couldn't find a way to allow the user to add more data offline and then get it to sync when online. If you have any ideas I would surely like to hear about it. Thanks.

[@MahmoudAhmed-qu2wm]

Great, Will it a complete playlist? Thank you very much

[@heisdivuzki]

Can you do react js

[@nicolasc9244]

Hey love your content. Learning english and web things aswell, thanks you :)

[@AjayMandal-gz9si]

Hi Gary, love all your tutorials. Had a quick question, since you are an authority on this. We are planning to build a PWA solution. Question: Is there some unique/special design consideration during (UX/UI/ Branding) phase of planning a PWA that is different than a responsive web design one has to consider/include while building it out. Thank AJ

[@AdamsTaiwan]

Yes, am planning on doing it with Vue.js.

[@eddiejaoude]

Angular is awesome 👍. PWA rocks 🤓

[@ermirb4216]

great work, I would suggest to try live-server package for server, no need to restart it. automatically detects the changes.

[@kenvng]

Running into another issue. So when I was trying to add the PWA functionality with 'ng add @angular/pwa' and got this message 'Maximum call stack size exceeded'. How do I fix this? Thanks

[@kenvng]

SOLVED: so in the last problem i installed NPM globally and version was mismatch between global and local so I have to update the local as well: npm install --save-dev @angular/cli@latest npm install This was done inside the local/project folder.

[@ashishsharma-tj6dg]

I have been learning this for a while but when it comes to real world app which requires SEO than we don't know whether this gonna work exactly the same or not. Please make a video on real word SEO in angular.

[@johnho8413]

Great. I think I can rewrite my mobile app written in Xamarin using Angular and PWA.

[@MohammadAbouBasha]

why don't you use ng serve directly? instead of running a separate webserver. ng serve is smart enough that it rebuild and refreshes the browser if you update the code? or did you intentionly do that because you want to use it as a production code, I'm not sure if ng serve can run in production mode!

[@rossanabenati8859]

Good work!

[@konasandeep]

what is the best technology to create a application which should support web and also should support a s a mobile app..with single code base

[@fit_with_kumar]

Thanks a lot for the video .i learn new thing and this was my first PWA app :-P

[@krishnareddykonduri4280]

I want one video for social media sharing with image and content

[@FangerZero]

I've been attempting to add PWA to my current Angular 8 application. I was able to easily add service workers, but adding things likes "Add to Home Screen", "Background Sync", and "Push Notifications" are proving difficult. Even trying to get it to work on my Mobile Phone is a pain to test.

[@prasadnarayana7257]

Ya even I'm feeling it, It's little difficult to find answers related to PWA angular questions. Did you made any progress in PWA using Angular?

[@landonrivers]

how do you make a button to download/install the PWA?

[@Cookie_Wookie_7]

I have built several PWAs before but this is my first one with angular

[@kumarrahul728]

Hello Gary, I loved the way you teach us however there is one question in my mind , So we use PWA just to cached the API data so that when Internet goes off user can see the last fetched data on their screen actually they just think that internet is still present.. what about If I want to do CRUD operation.. Could I updated the data during not internet and when internet comes back data automatically updated with API ???? Could It be possible?

[@AshsOdyssey]

Nope . This concept is only to view cached data. That's it 🤗

[@borisb.7235]

Have the exact same question, man. Did u finally figure it out?

[@badtwin82]

I use PWA in my latest two angular projects and, with workbox, also in another project I'm currently working on

[@gaurishrane9818]

Amazing Really Awesome Presentation

[@tabaicanking3701]

thanks man for this awesome tutorial but can you make the similar tutorial in vue js. thanks in advance bro

[@DesignCourse]

Yes, shortly.

[@tabaicanking3701]

thanks bro

[@a.bx000]

What languages and libraries must I learn to be able to create PWAs?

[@JohnathanHendrix]

Can you use cacheConfig on the assetGroups? I'm trying to resolve lighthouse issue with how long some files in my assetGroups are cached.

[@sumitchowdhury7255]

Awesome tutorial... btw can you tell me one thing... if I generate a manifest.json and simply add it into index.html page of my angular project.... it will work or not....?

[@kenvng]

I was un-able to http-server. Everything good so far until this point. I got an error message: 'http-server' is not recognized as an internal or external command, operable program or batch file. Am i missing something? Can you give me a tip on install what I am missing? Thanks

[@kenvng]

Found the answer: NPM needs to be install globally with the following command: npm install -g http-server

[@saritanair6707]

Can we create pwa with angular version 4?

[@bwfrieds]

The lighthouse score for chuckpwa is 46?

[@themindstorm9947]

Hey, I was wondering if you could help me with this: I put '/favicon.ico. in ngsw-config.json, and it shows up in the application cache (I see it in the chrome developer tools), but in the offline mode, it doesn't show up as the favicon. I there something wrong in the JSON below? { "index": "/index.html", "assetGroups": [{ "name": "app", "installMode": "prefetch", "resources": { "files": [ "/favicon.ico", "/index.html", "/*.css", "/*.js" ] } }, { "name": "assets", "installMode": "lazy", "updateMode": "prefetch", "resources": { "files": [ "/assets/**" ] } }] } Thanks!

[@edwinabraham6705]

How do we debug NGSW?

[@luisg.sandoval2046]

I'm planning on building one

[@AnilSahu-zx6wk]

Yes i am very interseted in pwa application but due to some error i leave in middle every time.

[@pratikvaity6833]

Is there any other method to make it work in an Ionic App??

[@luarbballa2534]

Hello there. Thank you for explaining how to use PWA but can you also explain how to remove it ? Both from project and from the browsers that loaded this service worker ? Thank you

[@sundarraj9384]

its informative.. Thanks man

[@maq2977]

If You can I will please to explain more about the PWA Notifications (like facebook, tinder and more has) because firebase doesn't explain it very well :/

[@colleen.in.motion4787]

Anyone else having issues with the SwUpdate? Neither the span or the update automatically works for me

[@omarezzine9554]

screenshot for your code ?

[@nerdiloo9863]

Did you get it work now?

[@dharmeshsharma]

I have simple confusion and i'm just start first angular application. I have already developed one application in MVC C# so i want to upgrade this application into Angular. Now i have html page design which is full jquery based like sliders, menus, jqueryui datepickers and many areas where jquery is using. now how to use these pages in same with angular to develop other components. please guide me

[@Vaishnavu_minaloor]

great tutorial

[@trishanvassan3745]

Hi when I 'http-server -o' from my dist folder it opens up my web browser with this error 'ERR_INVALID_REDIRECT' - Please do help me with this

[@Enothrin]

npm install -g http-server@0.9.0 i hope this helps

[@gp_2024_mmm]

Awesome tutorial! Thank you.

[@manjunathrm7633]

Updated the dataGroup for the API. But the API is not getting cached and getting 504 error for API and also webmanifest. Can anybody please share your suggestions?

[@ukaszsmigielski8648]

Why bother with updates.activateUpdate() stuff when you could use 'ng serve' command instead of 'http-server -o' and app would reload automatically when you change the source code?

[@gp_2024_mmm]

I couldn't get updating to work with the code in the tutorial, so tried $ng serve -o, which does update the page, but when I use it and look at Chrome dev tools --> Service Workers --> Application, I found that ngsw-worker.js is not listed under the domain that the page is being served. When I use $http-server -o, like in the video, then ngsw-worker.js is listed under the domain that the page is being served, but I can't get the updates working.

[@anishsrivastav3324]

thanks a lot make some more vidoeos on pwa

[@sagarjoshi8444]

can I develop PWA using Angular 7 + asp.net core REST api ??

[@1blubinator]

yes you can

[@testaptus5508]

I am trying this in localhost it is not showing me , when i clicked offline it is showing no internet i am using angular 6 please help

[@DiscoverPakistanShorts]

please tell me, it's possible how we send data/request from offline PWA ( progressive web app ) to MongoDB or any other live server. or PWA is used for only retrieving data from services

[@rakeshnayak2072]

Hi I am working on Angular 7 and tried to implement PWA to my website. when i run the http-server -o command, it opened 127.0.0.1:8082 with following error. How to fix. This page isn’t working 127.0.0.1 sent an invalid response. ERR_INVALID_REDIRECT

[@omarezzine9554]

same here but check localhost:[port]/index.html this should make it (still not the most convenient way, just a workaround)

[@Enothrin]

install an older version like 0.9.0 "npm install -g http-server@0.9.0 "

[@RABWA333]

Thanks for this tutorial. Can I buld small ERP app for a company using angular and firebase database ? Or can I use local data base ? OT WILL HAVE 10 users . Any suggestions will be appreciated

[@Skaxarrat]

Newest PWA versions don't work when trying to installing them, returning an "Invalid rule result: Function()" error. Instead of installing 0.7.1 or 0.7.1, install the same version as the tutorial with ng add @angular/pwa@0.6.8

[@seanknowles4557]

your the best!! lol, was going to ask you for this!

[@UltraDraft]

Notification squaad!!! 🔥🔥🔥🔥

[@mahmudzaman9107]

Hi, Thank you for the brief tutorial of PWA. I am trying to build some mobile chatbot app which might be based on angular. but it's back end will be python. My python file will call different models and give some results. The problem is: i dont want to call API end point based solution. Mostly these are done through flask where python are deployed to form API. Instead i want the python files will be deployed offline along with the front end. From PWA tutorial, you have mentioned a cached web call, which is not optimal here. Because i really need to call python files and get real reply offline. Do you know any solution for this problem?

[@PreetJashan88]

Sir i tried it first then service workers get registered but when i tried with second link that is generated with http-server and network IP address... Service workers is not working with that link IP:8080

[@Breaak7]

fking great tutorial as always dude, thank you so much from sudamerica !