SwUpdate in Angular | Check for update in Angular PWA | Progressive Web Apps Development
Вставка
- Опубліковано 2 тра 2020
- The SwUpdate service gives you access to events that indicate when the service worker has discovered an available update for your app and you can ask the user to update the same.
SwUpdate has three properties i.e. available, activated & isEnabled, you can use these events to notify the user to update the app. SwUpdate has two methods i.e. checkForUpdate and activateUpdate
#ServiceWorkers #AngularPwa #SwUpdate
GitHub: github.com/funOfheuristic/ang...
Progressive Web Apps Development: bit.ly/359BXpK
Angular Tutorial: bit.ly/2Tnwk1t
Dashboard with chart.js: bit.ly/3c9Jd85
All about Observable: bit.ly/2wVVnBl
All about Http call: bit.ly/2I3Zcqo
Angular Interview: bit.ly/2T67jZN
Application Development: bit.ly/398w7Gf
Upload File to server: bit.ly/3ccsjWd
Data Structure and algo: bit.ly/3c8b7Bh
Slack: bit.ly/2RXPcEK
You can support me on Patreon: / funofheuristic
Thanks for watching...
This PWA series is really helpful. Hope you got more subscribers. Thanks
Observable 'available' is depreciated for angular@13,
use 'versionUpdates' instead.
This video helped a lot, my friend. Thank you!
excellent work !! Thanks.
Great video. Thank you.
thank you very much this helped a lot
awesome!
This guy need more respect...
Thanks for sharing and please avoid creating subscriptions into another subscriptions!
Hi. Somehow for me after the first time, polling stops(for the checkforupdate method. What do you think could be the reason? Thanks in advance.
Good work. same i have implemented on my angular ver 11. but getting build errors with the pwa lib. Is this works only for PWA apps??
I run http-server on 8080 port and install the pwa app after these I was update the code , build and then again run http-server on port 8080 gives error port is already in use .what can i do for get updated version of app.
Just wondering if you set time interval of 8 hours, then in between of that 8 hours you uploaded changes to your frontend then upload to server, is there a way that it automatically listens to your changes and does not need to wait for that 8 hour interval to check for changes? Or the prompt will just pop up informing users to update?
Thanks this helped a lot.
On every refresh or reopen of the application the update check will going to run, but If the use is active of 8hr meas haven't kill ta app or haven close the tab then yes after 8hr(according to the code) the application will check for update, and it's a very rare scenario.
@@FunOfHeuristic Hi thanks for reply. So by any chance, is there a way that it will listen for my changes in server uploaded files without waiting for that 8 hour interval?
@@alvinyanson ya, you can send some push message like websockets or some thing else and run the check for update.
@@FunOfHeuristic Thanks. one last question since I've skipped one part of your pwa series which is push notification, does this fix my problem? Many thanks.
Hi Subrat, greetings from Serbia! I enjoyed watching your tutorial. However, when I replicate your code in my app I get weird behavior. Every time checkForUpdates is supposed to be called, it is not called only once, but the number of times it gets called grows exponentially (1, 2, 4, 8, 64, something like that). In other words, it is not that the function is called, then there is a 3 seconds break and then it is called again and so on. Instead, it is called once, then there is a break then it is called twice, etc. Do you have any idea what might be going on?
Thanks, do you checking in some interval?
@@FunOfHeuristic I check every 3 seconds / const timeInterval = interval(3000); I could post code here, if you wish.
Checking in such a interval is not a good option, because update in the side doesn't happened so frequently.
Update check happed on load of the application that is by default, try to add longer interval then a min.
Is there a way to save user entered data when app is offline and updating the server database when online?
Yes, use indexed DB
@@FunOfHeuristic Thanks for sharing :) Your videos are very easy to learn and understand.
Please check ua-cam.com/video/OkpWw7gbPtk/v-deo.html
Is there any way to make Angular App as Installable and should work only in Online mode?
I want to disable offline mode
Ya the simplest way is check the online or offline and act upon it
Can we get the 'update available' popup without reloading the page and without checking at regularly calling swUpdate.available at regular interval? Like may be using observer..
SwUpdate.available is an observable so you will get response when there is any change detected by the Service Worker.
What you need is checkForUpdate() as I explained in the video also
Fun Of Heuristic but checkforupdate needs to be called at regular interval to check for the update. I need a mechanism to automatically inform the application when an update is available without checking at regular interval.
How the browser will know there is an update in the server, so checkForUpdate make a call to the server and update the service worker file in background. Without calling server its not possible (because server has the updated file)
@@komaldua3233 if a use close the browser or the app and reopen angan the service worker will going to make a call to the server and then you available block will run ( for new update). So if you only want to update the view in the same session then only you need checkForUpdate or something else
Really helpful video Sir. Just one doubt where are you calling the checkUpdate() custom function which you defined to set time interval ? Are you calling it in ngOninit ?
Please do reply 🙏
At 9:16 why does it take a brief amount of time to load the popup
First the file will be fetched from the server if there is an update then it will trigger the alert, and this all happened after service worker initialisation, so it's taking bit time.
Hi, I'm facing same issue like stackoverflow.com/questions/63048665/ngsw-jsonngsw-cache-bust-failing-in-offline-mode-of-angular-8-pwa-application. can you explain why and can you give me fixes?
So the service worker is not registering for you? can you please let me know have you change anything related to service workers in your app module, and how you are running the app in local.
@@FunOfHeuristic I built the app by ng build --prod and run with http-server --port 8080 . I did update only ngsw-config.json file by adding dataGroups
@@aahafiz7 are you running http-server inside dist/appName, if yes then please let me know the error you are seeing in the console.
I could't understand your language :D