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:
github.com/des...
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS weekly!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
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?

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

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

[@prasadnarayana7257]

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

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

[@tednivan1638]

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

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

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

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

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

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

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

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

[@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!

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

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

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

[@StijnHommes]

Instead of using PWA spam, you could also just develop a website. You don't need an app for everything. Especially when your app is fake There are literally NO BENEFITS to this crap. Every one of those things can be done with normal REAL native app development.

[@aptustec]

To answer your question: Yes, I'm eager to plan/develop a PWA. This video -> kzbin.info/www/bejne/n57EhXWuac-Vrbs gave me the motivation, and this your coursetro video gave me the kickstart will to start doing it! My aim is to have a PWA that has login, a lightweight local DB (maybe?), and push notifications. Don't know, maybe as I go along I will get more ideas! Thank you for your videos Gary!

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

[@pavels461]

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

[@goabego]

Most likely a dumb question for most, but how can a User install a PWA bypassing the app store? Ha... Silly me, I probably should have googled before asking this question. In any case, this link shows an example of how a PWA can be installed via Safari iOS. kzbin.info/www/bejne/f2TNhamNn519qLM

[@JM-hf9bl]

Anyone else with *ng add @angular/pwa* doing nothing with the error _Invalid rule result: Function()._ ? Use instead: *ng add @angular/pwa@0.6.8*

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

[@achrafg8858]

hello everyone I am in terminale and for my project of end of study I already create a website with symfony 3 now I have to change it into a Progressive web app who can help me (tutorial, blog, site ....) PS: it's my first Progressive web application

[@pranayamr]

Can I generate production build with both PWA/Service worker and App Shell both ? or this are separate features cannot be placed in one single production build. or yes i.e. can be generated can anyone please let me know how ?

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

[@fit_with_kumar]

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

[@nicolasc9244]

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

[@the_thinkster]

Awesome explanation. but i found absolutely no tutorials on how to exclude some JS files or a folder of JS files. i know i can use ! in pattern but its not working. even if i remove all the rules by default. its caching all.

[@muhammadsuhail7235]

Hi Gary Simon nice tutorial. Could you please help me to create tutorials as you Develop it. That would be a great help for me. Pica graphic solution

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

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

[@freedomcuts]

I couldn't find the http-server plugin used in the video, so I used www.npmjs.com/package/angular-http-server, hope I could help someone

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

[@diegocoding]

Excelent tutorial, regards from Venezuela!

[@skokonyane]

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

[@StijnHommes]

You don't need PWAs to have an app work in offline mode....

[@Vikingssongs]

Research Holochain start building guys :) yes!

[@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!

[@Cookie_Wookie_7]

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

[@sagarjoshi8444]

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

[@1blubinator]

yes you can

[@pavanshirguppi5261]

If someone is watching pwa for the first time. this is piece of video not for them. very bad.

[@lifeofaaravsutar]

It doesn't work with Asp.net MVC application

[@spkktr]

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

[@aayushsingh8885]

Make a pwa by using only vanilla JavaScript once

[@AmayzinOne]

I’m making a PWA now for fun. However, I’ve found service workers to be pretty annoying Lolol

[@krishnareddykonduri4280]

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

[@Shl0kk]

Why don't you use 'ng serve' during this 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

[@kamranhamid9175]

if anyone faces issues while adding pwa to your project make sure you have @angular/cli version 6.0.8 and @angular/pwa version 0.6.8

[@SandeepSaini-tr9sv]

Its 2021 and i came here for pwa😄

[@guozhang7002]

Wonderful tutorial , I followed your video step by step and got problems. After execute the 'ng add @angular/pwa' command, my outputs as follows are different from the results of your video. my job environment: Angular CLI: 6.1.3 Node: 10.8.0 OS: win32 x64 Angular: 6.1.2 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router Package Version ----------------------------------------------------------- @angular-devkit/architect 0.7.3 @angular-devkit/build-angular 0.7.3 @angular-devkit/build-optimizer 0.7.3 @angular-devkit/build-webpack 0.7.3 @angular-devkit/core 0.7.3 @angular-devkit/schematics 0.7.3 @angular/cli 6.1.3 @angular/pwa 0.7.3 @ngtools/webpack 6.1.3 @schematics/angular 0.7.3 @schematics/update 0.7.3 rxjs 6.2.2 typescript 2.7.2 webpack 4.9.2 run, C:\Users\zhang\angularApps\demoNgPwa001>ng add @angular/pwa Installing packages for tooling via npm. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + @angular/pwa@0.7.4 added 3 packages from 1 contributor, updated 1 package and audited 29132 packages in 75.678s found 14 vulnerabilities (9 low, 5 high) run `npm audit fix` to fix them, or `npm audit` for details Installed packages for tooling via npm. Path "/ngsw-config.json" already exist. ( in your video, the output listed the files created in each directory) Checked the project files: find the 'manifest.json' under 'node_modules\@angular\pwa\pwa\files oot' folder find the 'ngsw-config.json' under 'node_modules\@schematics\angular\service-worker\files' (the location of key files for pwa are different from that in the video ) test shown that the app did not has pwa functionalities I appreciate it for any helps

[@saritanair6707]

Can we create pwa with angular version 4?

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

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

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

[@amadeusbm]

Thank, everything work in ths course, even now, when current versions of angular\pwa do not work. I have questions - how to install to web site? I build ng b --prod --base-href /jokes/, and copy build on https site into subfolder jokes. Application works when it is online, but not when service worker is offline. Got this error: i.imgur.com/cQlQEC5.png Need change some config? Thank you.

[@sivasankarchimata1882]

Hello sir i am looking for a tutorial on MYSQL with Angular & Node.js ,So can you please post a video with crud operation MYSQL with ANGULAR & NODE.JS

[@Breaak7]

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

[@eddiejaoude]

Angular is awesome 👍. PWA rocks 🤓

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

[@sundarraj9384]

its informative.. Thanks man

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

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

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

[@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 :/

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

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

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

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

[@manjunathamj3452]

Nice but can it run it ip address

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

[@mosmo618]

I'm working in a big insurance organization, so NO, they have no reason to create offline app, P. S It's hell because of security and privacy the net is strict so npm not working

[@streetchronicles5693]

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

[@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!

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

[@cheuk102]

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

[@danielleblanc256]

Now every app I run with http-server, loads the PWA I made with this tutorial. I've tried to unregister the service worker to no avail. Any ideas?

[@arunp9437]

How to clear cache automatically when deploy new changes in angular. Getting error when deploy new build . Old data comes instead of my change Give me some solution sir

[@sivasankarchimata1882]

Hello sir i am looking for a tutorial on MYSQL with Angular & Node.js ,So can you please post a video

[@johnho8413]

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

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

[@lucasmicheleto2722]

For those who had an error, use "ng add @angular/pwa@0.6.8" instead

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

[@v.p22709]

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

[@Afghah]

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

[@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 "

[@egbertmarkgraaff151]

any tried latest ngx-rocket ? created pwa and all the starter app plumbing for you...

[@qwiglydee]

why do you call it "from scratch"?you just used angular code out of the box.

[@richardaginga8901]

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

[@landonrivers]

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

[@parthabh123123]

Thoroughly enjoyed it. Good work. Very nicely explained.

[@edwinabraham6705]

How do we debug NGSW?

[@mrr4181]

best video on the internet

[@mikhailoboichuk153]

Great tutorial! But these STUPID jokes...:D

[@heisdivuzki]

Can you do react js

[@oluwatoyosioyelayo7569]

Thanks for the tutorial. But I have a bit of an issue here. On page load, service worker is registered successfully, but on page reload I get error 504

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

[@MahmoudAhmed-qu2wm]

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