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?
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)
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!
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.
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...
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.
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.
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.
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?
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?
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.
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.
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!
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
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
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.
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 ?
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
To answer your question: Yes, I'm eager to plan/develop a PWA. This video -> ua-cam.com/video/imaTBx4jbwY/v-deo.html 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!
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 :/
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
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.
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.
@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?
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.
@@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)
@@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.
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
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
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
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!
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
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
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?
A pwa using firebase would be awesome :)
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)
can you give me source code of this
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)
Yes, I found that mean while .
Got asked to look into this at work. Looked pretty straight forward, and I was able to propose a solution, thanks for this!
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!
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
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.
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...
I'm building a pwa currently for work and this is just what I needed
How you added it to mobile screen
Really good introduction, I'm waiting for a deeper explanation of PWA concept impatiently, especially via Angular framework.
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.
I've been thinking of doing a robust PWA course similar to this. Thanks.
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.
+1 for this idea
+1 for the idea
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..
Its on Angular 6 and firebase as a backend and authentication.. Its great
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
I didn't know what pwa is, but I've just got a good introduction from your video
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
Thanks for the tutorial. I can definitely see potential in this and am planning to try it out today. Again, wonderful tutorial, thanks.
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.
Been waiting for this vid on PWA literally
Yes, will start before the end of the year.
Thoroughly enjoyed it. Good work. Very nicely explained.
Thank you! This helped me a lot at building up my PWA.
This is going to really help me for my new app, Thanks a lot Gary
This is really awesome. Please continue this series. Cheers!
Built a tic tac toe PWA following Fireship's tutorial. I want to try at least one more.
best video on the internet
can we have a video on PWA's and offline, adding it to mobile screen(android/IOS) using angular latest versions?
Yes, I need more PWA tutorial.
I have built several PWAs before but this is my first one with angular
Yes, am planning on doing it with Vue.js.
Excelent tutorial, regards from Venezuela!
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?
Excelent video, very good explanation of PWA, Hope more videos like this, thanks!
Good one - and yep I intend to update some projects at work to pwa.
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?
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
Awesome, you presently it very well
Yes PWA's are on my list of projects to do.
Good stuff ... I've not made a PWA but I'm working on a project that might need it.
am going to learn it more extensively and try it out Thanks, once again .
For those who had an error, use "ng add @angular/pwa@0.6.8" instead
Thanks ...have learned a lot of things from this videos.
Great..... waiting for this ever since angular 6 was released
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?
@@StijnHommes Aren't you too late buddy. I commented this 3 years ago. I wanted to learn it, what's bothering you
Great video!
Could you show how to add the pwa to a phone next to native apps?
What languages and libraries must I learn to be able to create PWAs?
Hey love your content. Learning english and web things aswell, thanks you :)
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?
Great. I think I can rewrite my mobile app written in Xamarin using Angular and PWA.
Angular is awesome 👍. PWA rocks 🤓
its informative.. Thanks man
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.
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.
Good work!
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.
great work, I would suggest to try live-server package for server, no need to restart it. automatically detects the changes.
great tutorial
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!
Amazing Really Awesome Presentation
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
I'm planning on building one
I use PWA in my latest two angular projects and, with workbox, also in another project I'm currently working on
Can you use cacheConfig on the assetGroups? I'm trying to resolve lighthouse issue with how long some files in my assetGroups are cached.
Awesome tutorial! Thank you.
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
npm install
-g http-server@0.9.0 i hope this helps
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
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.
Can we create pwa with angular version 4?
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 ?
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
To answer your question: Yes, I'm eager to plan/develop a PWA. This video -> ua-cam.com/video/imaTBx4jbwY/v-deo.html 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!
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 :/
Thanks a lot for the video .i learn new thing and this was my first PWA app :-P
Great, Will it a complete playlist?
Thank you very much
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
really thanks, man 🍺
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
AWESOME VIDEO!!!!!
I want one video for social media sharing with image and content
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.
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?
Big thank to you my friend :D
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.
Can you do react js
@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?
Thanks so much! really helpful
Good Tutorial! why you didn't use ng serve ? why building and http-server ?
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.
I get it .. Thank you Mr.Gary.. Love your Content.. Keep up the good work ♥
@@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)
@@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.
Yes I am going to create a pwa
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
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
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
can I develop PWA using Angular 7 + asp.net core REST api ??
yes you can
Thank you for very good video
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
Found the answer: NPM needs to be install globally with the following command: npm install -g http-server
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!
Can you do a tutorial on bootstrap studio?
Anyone else having issues with the SwUpdate? Neither the span or the update automatically works for me
screenshot for your code ?
Did you get it work now?
fking great tutorial as always dude, thank you so much from sudamerica !
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
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
same here but check localhost:[port]/index.html this should make it (still not the most convenient way, just a workaround)
install an older version like 0.9.0 "npm install
-g http-server@0.9.0
"
Yes i am very interseted in pwa application but due to some error i leave in middle every time.
wonderful tutorial
Ajani put the video speed on 50x and knows this to be true... It's totally true.
your the best!! lol, was going to ask you for this!
Is there any other method to make it work in an Ionic App??
Notification squaad!!!
🔥🔥🔥🔥