Step 2 | Add JS responsible about SW

src/main/java/org/vaadin/java_pwa/MyUI.java

@@ -2,6 +2,7 @@
 
 import javax.servlet.annotation.WebServlet;
 
+import com.vaadin.annotations.JavaScript;
 import com.vaadin.annotations.Theme;
 import com.vaadin.annotations.VaadinServletConfiguration;
 import com.vaadin.server.VaadinRequest;
@@ -20,6 +21,7 @@
  * overridden to add component to the user interface and initialize non-component functionality.
  */
 @Theme("mytheme")
+@JavaScript("vaadin:https://js/app.js")
 public class MyUI extends UI {
 
  @Override

src/main/webapp/VAADIN/js/app.js

@@ -0,0 +1,26 @@
+if ('serviceWorker' in navigator) {
+ navigator.serviceWorker.register('../sw.js', { scope: '/' }).then((reg) => {
+ if (reg.installing) {
+ console.log('Service worker installing');
+ } else if(reg.waiting) {
+ console.log('Service worker installed');
+ } else if(reg.active) {
+ console.log('Service worker active');
+ }
+
+ }).catch((error) => {
+ console.log('Registration failed with ' + error); // Registration failed
+ });
+
+ // Communicate with the service worker using MessageChannel API.
+ function sendMessage(message) {
+ return new Promise((resolve, reject) => {
+ const messageChannel = new MessageChannel();
+ messageChannel.port1.onmessage = function(event) {
+ resolve(`Direct message from SW: ${event.data}`);
+ };
+
+ navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2])
+ });
+ }
+}