Getting our offline story / load time legit

So at this stage we now have the conference app (or in your case, whatever awesome app you have built) running in our browser. If you have been learning about PWA's you will have heard about service workers and the awesome powers they have, but if you haven't you can read more about what they are and why they are essential for PWA's here http://blog.ionic.io/service-workers-revolution-against-the-network/.

Now that we have an understanding of why we need a service worker in our Ionic PWA I will show you just how easy it is to add a service worker to your Ionic app. If you open up your apps directory in your favorite editor (I recommend VSCode) and look in `src/index.html` you will see this code https://github.com/driftyco/ionic2-app-base/blob/master/src/index.html\#L17. This bit of commented out JavaScript is what it takes for you to register a service worker and get it running in the browser. To enable the service worker in your Ionic app un-comment that javascript and then when the app rebuilds and reloads in the browser you should see `service worker installed` in the console. To recap, we just enabled a service worker in our Ionic app, and now have all our resources cached and all we had to do to get to this point is uncomment code, told you this was gonna be easy!

You may be wondering how in the world we have made adding a service worker to your app so easy, well i will now tell you our secrets! We have integrated sw-toolbox https://github.com/GoogleChrome/sw-toolbox into the service worker that you get by default every time you start an Ionic app. This means that with just a few lines of code in `src/service-worker.js` we have done pre-caching of critical assets for you, along with dynamic caching of all other local assets. Because of how versatile this setup is, for the majority of PWA's it will work perfectly out of the box with no tweaking needed. Lets just say though that you do want to tweak it. Maybe you are calling an external api and want to be able to do some caching on it, or maybe you are pulling pictures from a server and want to cache those pictures, with our use of sw-toolbox in Ionic this is super easy! I highly recommend that if you need a custom service worker setup in your app that you check out the docs for sw-toolbox https://googlechrome.github.io/sw-toolbox/docs/releases/v3.2.0/tutorial-usage.html as they will walk you through exactly how to add these features to the service worker in your Ionic 2 app.

Now onto our web manifest!

results matching ""

    No results matching ""