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!
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...
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.
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.
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.
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.
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
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?
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 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.
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.
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 :/
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
@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?
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.
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?
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!
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
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
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....?
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 ?
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
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?
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.
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!
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
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.
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?
I can't find an answer anywhere so far: Which core iOS functionalities can PWAs access? For example can I make an iOS PWA that creates flashes, vibrates and/or takes photos with the camera?
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
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
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?
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.
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
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
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 .
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!
Got asked to look into this at work. Looked pretty straight forward, and I was able to propose a solution, thanks for this!
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
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...
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.
Really good introduction, I'm waiting for a deeper explanation of PWA concept impatiently, especially via Angular framework.
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
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.
I'm building a pwa currently for work and this is just what I needed
How you added it to mobile screen
Great video!
Could you show how to add the pwa to a phone next to native apps?
Thanks for the tutorial. I can definitely see potential in this and am planning to try it out today. Again, wonderful tutorial, thanks.
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
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
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
Been waiting for this vid on PWA literally
Thank you! This helped me a lot at building up my PWA.
Thoroughly enjoyed it. Good work. Very nicely explained.
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, will start before the end of the year.
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?
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!
This is going to really help me for my new app, Thanks a lot Gary
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
Yes, I need more PWA tutorial.
Good one - and yep I intend to update some projects at work to pwa.
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?
Built a tic tac toe PWA following Fireship's tutorial. I want to try at least one more.
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
This is really awesome. Please continue this series. Cheers!
Great, Will it a complete playlist?
Thank you very much
am going to learn it more extensively and try it out Thanks, once again .
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.
great work, I would suggest to try live-server package for server, no need to restart it. automatically detects the changes.
Good stuff ... I've not made a PWA but I'm working on a project that might need it.
Excelent tutorial, regards from Venezuela!
Yes, am planning on doing it with Vue.js.
Hey love your content. Learning english and web things aswell, thanks you :)
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.
best video on the internet
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
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.
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 :/
Yes PWA's are on my list of projects to do.
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
I have built several PWAs before but this is my first one with angular
@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 ...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
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.
Angular is awesome 👍. PWA rocks 🤓
Great. I think I can rewrite my mobile app written in Xamarin using Angular and PWA.
Awesome, you presently it very well
Can you use cacheConfig on the assetGroups? I'm trying to resolve lighthouse issue with how long some files in my assetGroups are cached.
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?
What languages and libraries must I learn to be able to create PWAs?
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?
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!
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
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
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
Can you do a tutorial on bootstrap studio?
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....?
Thanks a lot for the video .i learn new thing and this was my first PWA app :-P
I use PWA in my latest two angular projects and, with workbox, also in another project I'm currently working on
thanks man for this awesome tutorial but can you make the similar tutorial in vue js. thanks in advance bro
Yes, shortly.
thanks bro
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 ?
how do you make a button to download/install the PWA?
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
Hello sir i am looking for a tutorial on MYSQL with Angular & Node.js ,So can you please post a video
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?
Nope . This concept is only to view cached data. That's it 🤗
Have the exact same question, man. Did u finally figure it out?
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.
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!
The lighthouse score for chuckpwa is 46?
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
Is there any other method to make it work in an Ionic App??
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 we create pwa with angular version 4?
Can you do react js
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?
Yes i am very interseted in pwa application but due to some error i leave in middle every time.
I can't find an answer anywhere so far: Which core iOS functionalities can PWAs access? For example can I make an iOS PWA that creates flashes, vibrates and/or takes photos with the camera?
All these things are possible with simple html web apis like:
developer.mozilla.org/en-US/docs/Web/API/Vibration_API
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
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
I want one video for social media sharing with image and content
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?
I'm planning on building one
Amazing Really Awesome Presentation
Good work!
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
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?
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.
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
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?
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
any tried latest ngx-rocket ? created pwa and all the starter app plumbing for you...
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