How to turn your Angular App into a Progressive Web App!
HTML-код
- Опубликовано: 30 июл 2024
- Do you have an Angular App that you want to take to the next level? Well that next level is to make it a progressive web app. Angular makes it very easy to quickly upgrade your app to a pwa and set it up with the necessary service worker. The service worker allows your app to appear online even when offline, and cache all the data you need. Your PWA can be installed as a desktop app or mobile app and appear to look like a native app. Follow along so you don't miss how to upgrade your angular app, and drop a like on the video if you enjoy it!
Support Me On Patreon: / israelquiroz
Follow Me On TikTok: www.tiktok.com/@israelquiroz9...
All My Links Here: linktr.ee/israelquiroz
PWA Guide: angular.io/guide/service-work...
#angularprogressivewebapp #angularpwaapp #angularpwa
Timestamp
--------------------------
00:00 Intro
00:46 What are Progressive Web Apps?
02:00 The Default Angular Project
02:51 How To Update Your App Into a PWA
03:24 Explaining a possible bug you might run into
04:26 Explaining The PWA Files
07:58 How to run your PWA locally
09:15 Making my changes to my App
11:52 Adding our API data to DataGroups
13:07 Demo Of The Finished PWA 
Наука
Great video !!
Your Welcome!! :)
AND THANK YOU FOR BEING A SUB FOR 11 MONTHS! Crazy its been that long, I appreciate you!
Really good info. well presented. Quick question - what is difference between generating APK for android app installation using capacitor v/s creating icon on mobile device using this approach ?
I am trying this in my angular application.
1st application works fine with these. But doing the same in 2nd application with http-server, still points to the 1st application. Any idea how to fix this?
Hello, great video. While following the code with you, I can't see the dist/angularpwayt folder after building. It's just dist folder and I am running that in the integrated terminal and it's all working fine but when I go to application in the console the service worker tab is showing nothing and on getting offline as well I am getting the error. Is there anything I have missed?
its not a big deal just make sure you are pointing to the folder containing your build files thats the most important part, your dist folder files are your compiled app so the files in there are what matter not the path, that can always change, i hope that helps! and your welcome! :)
@@IsraelQuiroz thanks for the reply. I have done the same, but just one thing I am not able to get is why in the Application tab of inspect I am not seeing anything in the service workers. It's just emply.
@@user-pl2jt7yd3ngot it fixed?
@@user-pl2jt7yd3n Facing the same issue, did you figure out what was the issue?
You will get two links. Go to the secure link. After this you can check your service worker tab.
it just work with get request only ? iam try to set to post requests not work why?
because u cant send any data to the server without an internet connection, you would have to store the data locally and sync it once u have an internet connection again
@@squapix8312 Please I have ionic storage for storing offline changes. How do I sync the changes using a service worker?
Hi Israel! Thanks for the video. If anyone had the same bug as me, here's the solution: I tried installing PWA but I ran into a bug that says "NOT SUPPORTED: keyword "id", use "$id" for schema ID". So, I updated angular to the latest version as he said and also updated pwa to the latest version, using npm install @angular/pwa@latest and it worked for me.
ps: I tried just updating angular and installing pwa again like he said in the video, but it was not enough (they said I already had pwa installed even though I didn't have any of these files he mentioned), so I had to force pwa to the latest version.
Your Welcome Luanam1296! :)
and thank u so much for the thorough explanation of the bug and how u fixed it! i hope if someone else runs into that issue they can fix it with your help!