ServiceWorker Automation

Step 1 : Front End Maven Plugin

• At first we will use Front End Maven Plugin to install NodeJs for later automation on our service-worker.js. This plugin will let you use Node.js and its libraries in your build process without installing Node/NPM globally for your build system

            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.6</version>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <nodeVersion>v9.0.0</nodeVersion>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm generate</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <arguments>run-script generate ${project.build.finalName}</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

Step 2 : Package.json

• All npm packages contain a file, usually in the project root, called package.json - this file holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project's dependencies.

{
  "name": "GwtMaterialApp",
  "version": "0.0.1",
  "description": "Service worker generator",
  "main": "bin/sw-builder.js",
  "dependencies": {
    "handlebars": "^4.0.11"
  },
  "devDependencies": {},
  "scripts": {
    "generate": "node bin/sw-builder.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/GwtMaterialDesign/gwt-material.git"
  },
  "author": "kevzlou7979",
  "license": "Apache 2.0",
  "bugs": {
    "url": "https://github.com/GwtMaterialDesign/gwt-material/issues"
  },
  "homepage": "https://github.com/GwtMaterialDesign/gwt-material#readme"
}

Note that under scripts property - you must specify the generate phase and point to your sw.builder.js which we will discuss on Step 3.

Step 3 : Builder and Templates

• There are two main js files in order to generate our service-worker.js namely the sw-builder.js (To build our ServiceWorker js) and the sw-template (Our base template for the service worker) which are located under bin directory