Advanced angular 7 PWA tutorial ( Part -1)

hello everyone in this week I will discuss about angular PWA using serviceworker this will be a series of video with some advanced topics in sort PWS stand for progressive web app which provides not only huge performance benefits but also some feature benefits like offline capabilities we will be using same application which we developed last week if you not check that video the link will be able on the top or in my channel so without any further ado let's get started I will first add the PWM module using ng add command it will basically install the required modules and also update few of the files for the initial configuration now let's check what all files has been added and modified in pack installation it's added the PWA module and the serviceworker module there is a new ng serviceworker JSON file has been added with some default configuration and you can see by default all the CSS J's and static asset will be added to cache based on this file in the angular 2 adjacent file you can see a new file called manifest dot web manifest configuration has been added and also serviceworker enabled as a kill switch in the source directory the manifest file has been added in the index dot HTML file manifest file added and also there is a no script tag added which will be visible if user t7 javascript in the browser inside asset folder a icon folder has been added with few icons image which will be used as an icon if someone added Europe in home screen in app module the service worker imported and initialized inside import declaration let's start the application and see it in action before that let's add a script in the package tradition to build our app with prot flag and he will run the app with HTTP server you can install the HTTP server by running NPM install HTTP server test G you let's run the app before opening the browser let's see the file inside this directory the ng SW file for registering the service worker and ng is w JSON file which is having your configuration now let's open the browser was the app is loaded go to the chrome dev tool application tab you can see the serviceworker is registered and running the file we added in the serviceworker configuration has been cast and ready now let's try the app while making it offline if you reference the browser you can see the app is still working except the data if you remember by default configuration is only having the static asset to be cast not the data written from web services all other assets return from serviceworker cache now let's close the server in the weather component HTML let's increase the version to 4.0 and start the server again first type the page will be served from cache and you will not see any changes as service worker is communicating with your server to check if there is any updated file but if you refresh the browser second time you can see the version is updated but how user will know that file has been updated and they need to install the opted let's implement that feature so user will notify that update is available and they can update in the component class constructor we will add service worker update next we will create a method with which will inform the browser about the update the first condition to check if the browser have support for serviceworker then we will subscribe to the available observable we will then create a confirmation dialog once user hit yes we will reload the browser using window dot location dot reload and then user will be able to see in the later latest version of the app now at this method inside ng on in it lifecycle hook you let's run the app again so once you refresh the app our latest code will be updated and ready now let's change our app version to 5.0 once you refresh the page wait for the confirmation dialog to appear once you click the yes the app will be updated with the latest version now let's add the service in case as well there is two different type of caching strategy available one is cast first a network last or performance and the second was is network first cast lot last which is same as freshness in this series we'll be working with the cast for strategy let's configure that in our in g SW configuration after acid groups we will add another groups called data groups I have given a name of weather API in the URL array I have added to API URL for our application in the Cask config block for strategy I have added performance which is cacif cast first a network last edit the message of one day for our case and the Mex is as 100 let's run the app to see it in action let's refresh the app and accept update now if you're offline you can see still the data is coming now try to change the location to see if it's still working you can see the data is not updating because browser only cares till the last update while the app was online and you can see some HTTP error while the service worker tried to get the data now let's make the app online again and try to change the location so once the data cam came back from the server the same will be cast again and if you go offline again now we will be able to see the location data also returns while you are offline you if you go to the cash storage you can see both the location where the data has been cast by the service worker in the next week video we'll dive deeper into more advanced part of PWA and see how the network fast and cashless strategy works and other interesting feature so stay tuned and goodbye

Channel: BlackBox Tech

Views: 17,548

Rating: 4.8009949 out of 5

Keywords: angular pwa advanced, advanced angular pwa, advanced angular pwa tutorial, angular 7 pwa tutorial, angular pwa, angular progressive web app, angular pwa push notification, angular offline app, pwa tutorial, pwa angular, angular advanced, pwa angular 7, angular advanced tutorial, advanced angular, angular 7 pwa, angular service worker, angular 7 advanced tutorial, angular 7 tutorial, angular advanced topics, advanced angular 7, angular pwa tutorial, angular 7 advanced, pwa

Id: f26hgzyGdHM

Length: 11min 4sec (664 seconds)

Published: Sat Feb 02 2019