• AEM: Caching with Service Workers and Google’s Workbox Library

    google workbox logo

    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. If you have static assets that are rarely updated, why not cache them? 🙂

    There are many ways you can implement caching into your web application, in this article we will be using Service Workers. Service Workers 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.

    Google’s Workbox
    WorkBox is a JavaScript Library that simplifies and optimizes the code needed to implement caching within a Service Worker. A highly recommend anyone who isn’t familiar with Caching or Service Workers to check the Docs first before moving forward with WorkBox.

    This article is based off the assumption that you have an AEM 6.4 project setup. If you don’t have a project setup, check out this guide.

    After setting up your project, your folder structure should look similar to this:

    | — core/
    | — it.launcher/
    | — it.tests/
    | — pom.xml
    | — gulpfile.js
    | — README.md
    | — ui.apps/
    | — ui.content/

    Within a custom AEM component, we are going to add the required code to run our service worker. If you haven’t created a custom component, check out this guide.

    Within the ui.apps folder, find the projects clientlib-site folder, it should be in a similar location like the example below:

    aem clientlib-site folder structure

    In clientlib-site, the folder structure should look similar to this:

    aem clientlib-site folder structure

    In the JS Folder, let’s add a javascript file that will load our Service Worker whenever the site is loaded.

    aem js folder app.js

    Be sure to add the JavaScript file to the ClientLibs js.txt file so that it is compiled. Here is an example:

    aem ClientLibs js.txt file

    Next, let’s 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:

    | — {project-name}/
    | — — src/
    | — — — main/
    | — — — — content/
    | — — — — — jcr_root/
    | — — — — — — service-worker.js

    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. In your app.js file, add this block of code:

    aem app.js file adding ServiceWorker

    This block of code registers are Service Worker at the root of our project.

    In our service-worker.js file, add this block of code:

    aem service-worker.js add caching

    Lastly, since the Service Worker file needs to be included at the root of our project to properly function with WorkBox, we will need to add it in filter.xml so it can be packaged correctly.

    Find your filter.xml file at /ui.apps/{project_name}/src/main/content/META-INF/vault/filter.xml, and add the following :

    aem filter.xml file

    For more information on customizing your Maven Builds, check these Docs.

    Build your project with the following command (adjust to your local setup):

    mvn clean install -PautoInstallPackage -Daem.host=localhost -Daem.port=4502 -Dsling.user=admin -Dsling.password=admin -D skipTests=true

    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.

    AEM logger showing service worker caching js, css and images