PWA : Service Worker Automation

Architecture

Project Root 
  |-- bin
      |-- sw-builder.js
      |-- sw-template.js
  |-- src
  |-- package.json
  |-- pom.xml

Step 1 : Front End Maven Plugin

• Open your pom.xml and add 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 js files that we need 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.

By default the service worker generates all caches with all files with types html|css|js|gif|png|jpeg

Step 4 : Once everything is setup you may now proceed installing your application by running this command:

mvn clean install

Once done installing the sw-builder.js will generate now your service-worker.js located in your target directory

Sample generated service-worker.js

Running your project

mvn gwt:codeserver

And that's it, every time you package or install your project it will generate a brand new service worker into your app and GMD allows to receive any updates and prompt the user that they have a new cache update and the app will tell the user that they need to refresh the app.