Service workers are one of the foundational components of PWAs. In this video, explore how service workers operate and learn about their features.
- [Instructor] PWA stands for Progressive Web Application and this is a new paradigm that enables web application to act like native mobile applications and be installable via a browser and be available on the home screen. The Progressive Web App paradigm is made possible by a magic feature called a service worker. Now the service worker is a feature that's available in the browser. Let's go ahead and understand how the service worker does its magic. A service worker is a feature of a browser that sits on the client side. You get to use a service worker by creating a Java script file with all the logic needed for it and registering it. It has its own independent lifecycle to your application but it's also domain specific to your application. Now on the client side, you have your app's code as well working you with side by side. However, on the server side, you have your databases, servers, APIs, and all those great stuff. When you make a request from your web application, that request first hits the service worker if you have a service worker attached to your Progressive Web App. Now the service worker decides what to do with that request. So if it's a request that is fresh, let's say for example you tried to access a specific image and the service worker does not have a record of that particular request, the service worker would then go ahead and push that request to the server. Now traditional web applications don't have this service worker so the request just simply goes from your application straight to the server side. Now when your server processes this request, the server then returns the response to your application. But before it hits your application, the service worker would intercept this request. Now at this point, the service worker can decide to cache that request or just simply pass it onto the user application. This is what makes service worker special. The next time you try to access a specific asset, the service worker might have already cached that and instead of sending you to the server side, the service worker can then return that specific asset to you. This way, your user experience is much quicker as you get your assets returned to you almost instantly. This also means that your service worker can cache everything necessary for your application to work, meaning that your application can work offline. There are other things that work hand with hand with the service worker like the manifest JSON which we're going to see in future videos. That also provides a great user experience for your users when working with your Progressive Web Application. Now let's have a recap of some of the core features of the service worker. First of all, the service worker is a client-side proxy so it sits on the client side. So that means the service worker code is shipped alongside your application as well. Another thing that is really important is that the service worker has an isolate lifecycle from your application. This means the service worker can still be active while you even close your application. These allow for features like push notifications and background sync and background network requests. Now the service worker is domain specific which means that for a specific domain, say Facebook.com, you can have one service worker there that's specific to that. Now at the time of recording this video, there are already some ongoing conversations to make service workers work across different domains, but this is still not finalized. Another great thing that a service worker provides you with is ability to store data. It provides you great storage APIs like IndexedDB that allow you to have almost unlimited storage access.
- Setting up a development environment
- Scaffolding an Ionic app
- Using Ionic DevApp
- Working with Cordova
- Configuring for Android and iOS
- Running a mobile app on an emulator
- Using Ionic Appflow
- Updating Ionic apps with Deploy
- Converting Ionic apps to PWAs
- Testing on a mobile device
- Setting up Firebase Hosting
- Using Capacitor on the web
- Using Electron for desktop deployment