{"id":305,"date":"2019-08-26T11:49:43","date_gmt":"2019-08-26T18:49:43","guid":{"rendered":"https:\/\/www.mavice.com\/blog\/?p=305"},"modified":"2020-12-17T17:16:59","modified_gmt":"2020-12-18T01:16:59","slug":"aem-caching-with-service-workers-and-googles-workbox-library","status":"publish","type":"post","link":"https:\/\/www.mavice.com\/blog\/aem-caching-with-service-workers-and-googles-workbox-library\/","title":{"rendered":"AEM: Caching with Service Workers and Google\u2019s Workbox Library"},"content":{"rendered":"\n
\"google<\/figure><\/div>\n\n\n\n

Caching\n has become a norm in pretty much all modern web applications. Caching \nstatic assets improves the load time of web applications by reducing the\n calls that it needs to make to retrieve resources, and by also reducing\n network congestion. If you have static assets that are rarely updated, \nwhy not cache them? \ud83d\ude42<\/p>\n\n\n\n

There are many ways you can implement caching into your web application, in this article we will be using Service Workers. Service Workers<\/a> run in the background within its own script, separate from a web page. Including caching, there are many features that are implemented with Service Workers, such as: Push Notifications, Background Sync, and storing data in the browsers IndexedDB.<\/p>\n\n\n\n

Google\u2019s Workbox
<\/strong>WorkBox<\/a> is a JavaScript Library that simplifies and optimizes the code needed to implement caching within a Service Worker. A highly recommend anyone who isn\u2019t familiar with Caching or Service Workers to check the Docs<\/a> first before moving forward with WorkBox.<\/p>\n\n\n\n

This\n article is based off the assumption that you have an AEM 6.4 project \nsetup. If you don\u2019t have a project setup, check out this guide<\/a>.<\/p>\n\n\n\n

After setting up your project, your folder structure should look similar to this:<\/p>\n\n\n\n

testapp\/\n| \u2014 core\/\n| \u2014 it.launcher\/\n| \u2014 it.tests\/\n| \u2014 pom.xml\n| \u2014 gulpfile.js\n| \u2014 README.md\n| \u2014 ui.apps\/\n| \u2014 ui.content\/<\/code><\/pre>\n\n\n\n
Within\n a custom AEM component, we are going to add the required code to run \nour service worker. If you haven\u2019t created a custom component, check out\n this guide<\/a>.<\/p>\n\n\n\n
Within the ui.apps folder, find the projects clientlib-site folder, it should be in a similar location like the example below:<\/p>\n\n\n\n
\"aem<\/figure><\/div>\n\n\n\n
In clientlib-site, the folder structure should look similar to this:<\/p>\n\n\n\n
\"aem<\/figure><\/div>\n\n\n\n
In the JS Folder, let\u2019s add a javascript file that will load our Service Worker whenever the site is loaded.<\/p>\n\n\n\n
\"aem<\/figure><\/div>\n\n\n\n
Be sure to add the JavaScript file to the ClientLibs js.txt file so that it is compiled. Here is an example:<\/p>\n\n\n\n
\"aem<\/figure><\/div>\n\n\n\n
Next, let\u2019s add a Service Worker JS file to our project. Our service-worker.js file will be located inside of the content folder within ui-apps. Here is an example of what the folder structure might look like:<\/p>\n\n\n\n
ui-apps\/\n| \u2014 {project-name}\/\n| \u2014 \u2014 src\/\n| \u2014 \u2014 \u2014 main\/\n| \u2014 \u2014 \u2014 \u2014 content\/\n| \u2014 \u2014 \u2014 \u2014 \u2014 jcr_root\/\n| \u2014 \u2014 \u2014 \u2014 \u2014 \u2014 service-worker.js<\/code><\/pre>\n\n\n\n
Great! Now that we have our files in place, lets add the code for our  Service Worker. For the purpose of this article, I will provide you with  the necessary code for the Service Worker. You can find the Getting  Started information for Workbox here<\/a>. In your app.js file, add this block of code:<\/p>\n\n\n\n
\"aem<\/figure><\/div>\n\n\n\n
This block of code registers are Service Worker at the root of our project.<\/p>\n\n\n\n
In our service-worker.js file, add this block of code:<\/p>\n\n\n\n
\"aem<\/figure><\/div>\n\n\n\n
Lastly,\n since the Service Worker file needs to be included at the root of our \nproject to properly function with WorkBox, we will need to add it in \nfilter.xml so it can be packaged correctly.<\/p>\n\n\n\n
Find your filter.xml file at \/ui.apps\/{project_name}\/src\/main\/content\/META-INF\/vault\/filter.xml, and add the following :<\/p>\n\n\n\n
\"aem<\/figure><\/div>\n\n\n\n
For more information on customizing your Maven Builds, check these Docs<\/a>.<\/p>\n\n\n\n
Build your project with the following command (adjust to your local setup):<\/p>\n\n\n\n
mvn clean install -PautoInstallPackage -Daem.host=localhost -Daem.port=4502 -Dsling.user=admin -Dsling.password=admin -D skipTests=true<\/code><\/pre>\n\n\n\n
Now, whenever you have a component that loads the categories that is defined in your content.xml for clientlib-site, it will load the service worker and begin caching JS, CSS, and Images.<\/p>\n\n\n\n
\"AEM<\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"
Caching  has become a norm in pretty much all modern web applications. Caching  static assets improves the load time of web applications by reducing the  calls that it needs to make to retrieve resources, and by also reducing  network congestion.<\/p>\n","protected":false},"author":2,"featured_media":366,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[15,10,21,24,22,20,23],"_links":{"self":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/305"}],"collection":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/comments?post=305"}],"version-history":[{"count":4,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/305\/revisions"}],"predecessor-version":[{"id":394,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/305\/revisions\/394"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/media\/366"}],"wp:attachment":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/media?parent=305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/categories?post=305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/tags?post=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}