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

Today's Question: Have you or are you planning on building a PWA?
-- In this Angular 6 PWA tutorial, I'm going to show you how to create a PWA (Progressive Web App) based on Angular 6. PWA's are awesome, in that they allow your apps to work offline, and they bypass the app stores; users can install them on their home screens! Hang tight, as I will be covering more PWA related content soon.

Github project for this lesson:

Let's get started!

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[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?

[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)

[sebastiangug]

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!

[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.

[seanknowles]

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.

[streetchronicles]

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

[XX-vujo]

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...

[pavels]

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

[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

[skokonyane]

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

[toastedbagel]

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

[tednivan]

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

[sveinsoermo]

Yes, will start before the end of the year.

[v.p]

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

[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?

[uffecarlsson]

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..

[Cookie_Wookie_]

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

[richardaginga]

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