Merge pull request #1 from GwtMaterialDesign/release_2.3

Release 2.3

README.md

@@ -1,16 +1,16 @@
 # gwt-material-pwa-archetype
 PWA (Progressive Web App) + GMD Archetype
 
-# Current Version - 2.1.1
+# Current Version - 2.3.0
 ### Includes
 - Updated GWT Version to 2.8.2
 - Updated GWTP Version to 1.5.3
-- Updated GMD Version to 2.1.1
+- Updated GMD Version to 2.3.0
 
 # Usage:
 1. Download the archetype
 2. From the download folder, install the archetype in your local Maven repo by running this command: <code>mvn clean install</code>
-3. Create a new project by running the following command in a folder of your choice: <code>mvn archetype:generate -DarchetypeGroupId=com.github.gwtmaterialdesign -DarchetypeArtifactId=gwt-material-pwa-archetype -DarchetypeVersion=2.1.1</code>
+3. Create a new project by running the following command in a folder of your choice: <code>mvn archetype:generate -DarchetypeGroupId=com.github.gwtmaterialdesign -DarchetypeArtifactId=gwt-material-pwa-archetype -DarchetypeVersion=2.3</code>
 4. Follow the prompts
 
         mvn clean install archetype:update-local-catalog
@@ -19,15 +19,15 @@ PWA (Progressive Web App) + GMD Archetype
 
         mvn archetype:generate -DarchetypeGroupId=com.github.gwtmaterialdesign \
           -DarchetypeArtifactId=gwt-material-pwa-archetype \
-          -DarchetypeVersion=2.1.1
+          -DarchetypeVersion=2.3.0
 
 4. Follow the prompts. That's it!
 
 5. Optionally you could specify all the parameters in the command line instead of following the prompts:
 
         mvn archetype:generate -DarchetypeGroupId=com.github.gwtmaterialdesign \
           -DarchetypeArtifactId=gwt-material-pwa-archetype \
-          -DarchetypeVersion=2.1.1 \
+          -DarchetypeVersion=2.3.0 \
           -DgroupId=your.company.domain \
           -Dpackage=your.company.domain.myapp \
           -DartifactId=your-project \
@@ -39,7 +39,7 @@ PWA (Progressive Web App) + GMD Archetype
         mvn archetype:generate -DarchetypeGroupId=com.github.gwtmaterialdesign 
          -DarchetypeArtifactId=gwt-material-pwa-archetype 
          -DarchetypeRepository=https://oss.sonatype.org/content/repositories/snapshots/
-         -DarchetypeVersion=2.2-SNAPSHOT
+         -DarchetypeVersion=2.3-SNAPSHOT
      
 # Test/Run
 

gwt-test/pom.xml

@@ -36,7 +36,7 @@
         <gwt.version>2.8.2</gwt.version>
         <gwtp.version>1.6</gwtp.version>
         <gin.version>2.1.2</gin.version>
-        <gwt-material.version>2.1.1</gwt-material.version>
+        <gwt-material.version>2.3.0</gwt-material.version>
 
         <maven.compiler.source>1.8</maven.compiler.source>
         <maven.compiler.target>1.8</maven.compiler.target>

pom.xml

@@ -4,12 +4,12 @@
     <parent>
         <artifactId>gwt-material-parent</artifactId>
         <groupId>com.github.gwtmaterialdesign</groupId>
-        <version>2.1.1</version>
+        <version>2.3.0</version>
     </parent>
 
     <groupId>com.github.gwtmaterialdesign</groupId>
     <artifactId>gwt-material-pwa-archetype</artifactId>
-    <version>2.1.1</version>
+    <version>2.3.0</version>
     <packaging>jar</packaging>
 
     <distributionManagement>

src/main/resources/META-INF/maven/archetype-metadata.xml

@@ -40,7 +40,7 @@
             <defaultValue>${groupId}</defaultValue>
         </requiredProperty>
         <requiredProperty key="gwt-material-version">
-            <defaultValue>2.1.1</defaultValue>
+            <defaultValue>2.3.0</defaultValue>
         </requiredProperty>
     </requiredProperties>
     <fileSets>

src/main/resources/archetype-resources/bin/sw-builder.js

@@ -13,7 +13,9 @@ const rootFolder = 'target/' + buildFolderName;
 const fs = require('fs');
 var Handlebars = require('handlebars');
 
-var filesToCache = [];
+var filesToCache = [
+    "/"
+];
 
 browseAllFilesInDirectory(rootFolder);
 
@@ -23,14 +25,14 @@ function browseAllFilesInDirectory(folder) {
 
     fs.readdirSync(folder).forEach(fileName => {
         const resource = folder + "/" + fileName;
-        if (exceptions.indexOf(fileName) < 0) {
-            if (fileName.match(filesRegExp)) {
-                filesToCache.push(resource.replace(rootFolder + "/", ""));
-            } else if (fs.lstatSync(resource).isDirectory()) {
-                browseAllFilesInDirectory(resource);
-            }
+    if (exceptions.indexOf(fileName) < 0) {
+        if (fileName.match(filesRegExp)) {
+            filesToCache.push(resource.replace(rootFolder + "/", ""));
+        } else if (fs.lstatSync(resource).isDirectory()) {
+            browseAllFilesInDirectory(resource);
         }
-    });
+    }
+});
 }
 
 var swData = {
@@ -43,9 +45,9 @@ fs.readFile("bin/sw-template.js", "utf8", (error, data) => {
         console.log("Unable to read template file");
     }
     var template = Handlebars.compile(data);
-    var serviceWorkerJs = template(swData);
+var serviceWorkerJs = template(swData);
 
-    fs.writeFile(rootFolder + "/service-worker.js", serviceWorkerJs, (error) => {
-        console.log("Successfully generated service worker service-worker.js in " + rootFolder);
-    });
+fs.writeFile(rootFolder + "/service-worker.js", serviceWorkerJs, (error) => {
+    console.log("Successfully generated service worker service-worker.js in " + rootFolder);
+});
 });

src/main/resources/archetype-resources/bin/sw-template.js

@@ -3,19 +3,18 @@ var cacheName = '{{cacheName}}';
 var filesToCache = [  {{#each filesToCache}}
 '{{.}}'{{#unless @last}},{{/unless}}
     {{/each}}
-        ,'service-worker.js'
     ];
 
+
 /**
  * The install event is your chance to cache everything you need before being able to control clients. The promise you
  * pass to event.waitUntil() lets the browser know when your install completes, and if it was successful.
  */
-self.addEventListener('install', function (e) {
-    console.log('[ServiceWorker] Install');
+self.addEventListener('install', e => {
     e.waitUntil(
-        caches.open(cacheName).then(function (cache) {
-            console.log('[ServiceWorker] Caching app shell');
-            return cache.addAll(filesToCache);
+        caches.open(cacheName).then(cache => {
+            return cache.addAll(filesToCache)
+                .then(() => self.skipWaiting());
         })
     );
 });
@@ -24,16 +23,20 @@ self.addEventListener('install', function (e) {
  * Once your service worker is ready to control clients and handle functional events like push and sync, you'll get an
  * activate event. But that doesn't mean the page that called .register() will be controlled.
  */
-self.addEventListener('activate', function (e) {
-    console.log('[ServiceWorker] Activate');
-    e.waitUntil(
-        caches.keys().then(function (keyList) {
-            return Promise.all(keyList.map(function (key) {
-                console.log('[ServiceWorker] Removing old cache', key);
-                if (key !== cacheName) {
-                    return caches.delete(key);
-                }
-            }));
+self.addEventListener('activate', event => {
+    event.waitUntil(
+        caches.keys().then(function(cacheNames) {
+            return Promise.all(
+                cacheNames.map(function(oldCache) {
+                    if (oldCache !== cacheName) {
+                        console.log('ServiceWorker : Deleting old cache:', oldCache);
+                        return caches.delete(oldCache);
+                    }
+                })
+            );
+        }).then(function() {
+            console.log('ServiceWorker : Claiming clients for version', cacheName);
+            return self.clients.claim();
         })
     );
 });
@@ -42,113 +45,18 @@ self.addEventListener('activate', function (e) {
  * It contains information about the fetch, including the request and how the receiver will treat the response.
  * It provides the event.respondWith() method, which allows us to provide a response to this fetch.
  */
-self.addEventListener('fetch', function (e) {
-    console.log('[ServiceWorker] Fetch', e.request.url);
-    e.respondWith(
-        caches.match(e.request).then(function (response) {
-            return response || fetch(e.request);
-        })
-    );
-});
-
-/**
- * Will listen to any push event comming from native push or fcm push services.
- * This will also provide you a Notification UI build from the JSON Payload provided before sending the message.
- */
-self.addEventListener('push', function (event) {
-    console.log("Service Worker Push Received");
-    var json = event.data.json();
-    // The Notification Data which contains all required parameters to display a notification ui.
-    var data = JSON.parse(json.data.model);
-    var title = data.title;
-
-    const options = {
-        body: data.body,
-        icon: data.icon,
-        image: data.image,
-        badge: data.badge,
-        vibrate: data.vibrate,
-        sound: data.sound,
-        actions: data.actions,
-        dir: data.dir,
-        tag: data.tag,
-        data: data.payload,
-        requireInteraction: data.requireInteraction,
-        renotify: data.renotify,
-        silent: data.silent,
-        timestamp: data.timestamp
-    }
-
-    event.waitUntil(self.registration.showNotification(title, options));
-});
-
-/**
- * When a user clicks on a notification they usually expect to be taken directly to where they can get more
- * information about the notification. We also add a functionality wherein we will check if the data.url is
- * available then we will redirect the user to that url else we will just close the notification.
- */
-self.addEventListener('notificationclick', function (event) {
-    var notification = event.notification;
-    var data = event.notification.data;
-    var action = event.action;
-
-    if (action === 'close') {
-        notification.close();
+self.addEventListener('fetch', event => {
+    if (event.request.method !== 'GET') {
+        /* If we don't block the event as shown below, then the request will go to
+           the network as usual.
+        */
+        return;
     }
-    // Define your action callbacks below.
-});
-
-/**
- * If the user dismisses the notification through a direct action on the notification
- * (such as a swipe in Android), it raises a notificationclose event inside the service worker.
- *
- * Note: If the user dismisses all notifications then, to save resources, an event
- * is not raised in the service worker.
- */
-self.addEventListener('notificationclose', function (event) {
-    // For now we dont have any useful usecase to define
-    // atm when notification was closed.
-});
-
-/**
- * This is a listener for the service-worker.js to listen to any Client messages.
- */
-self.addEventListener('message', function (event) {
-    var data = event.data;
-    if (data == 'skipWaiting') {
-        self.skipWaiting();
-    }
-    // Define any custom messaging below by calling sendMessageToAllClients(message).
-});
-
-/**
- * This function will allow to send a messa2ge to specific client.
- * If you want to send to all opened client instances call  #sendMessageToAllClients
- */
-function sendMessageToClient(client, message) {
-    return new Promise(function (resolve, reject) {
-        var messageChannel = new MessageChannel();
-
-        messageChannel.port1.onmessage = function (event) {
-            if (event.data.error) {
-                reject(event.data.error);
-            } else {
-                resolve(event.data);
-            }
-        };
-
-        client.postMessage(message, [messageChannel.port2]);
-    });
-}
-
-/**
- * This function will allow the service-worker.js to send a message to any opened client's channel
- * (Take not that each client will be referenced to any opened browser / tab instances.
- */
-function sendMessageToAllClients(message) {
-    clients.matchAll().then(clients => {
-        clients.forEach(client => {
-            sendMessageToClient(client, message);
+    event.respondWith(
+    caches.open(cacheName)
+        .then(cache => cache.match(event.request, {ignoreSearch: true}))
+        .then(response => {
+            return response || fetch(event.request);
         })
-    })
-}
+    );
+});

src/main/resources/archetype-resources/pom.xml

@@ -36,7 +36,7 @@
         <gwt.version>2.8.2</gwt.version>
         <gwtp.version>1.6</gwtp.version>
         <gin.version>2.1.2</gin.version>
-        <gwt-material.version>2.1.1</gwt-material.version>
+        <gwt-material.version>2.3.0</gwt-material.version>
 
         <maven.compiler.source>1.8</maven.compiler.source>
         <maven.compiler.target>1.8</maven.compiler.target>

src/main/resources/archetype-resources/src/main/java/client/resources/ResourceLoader.java → src/main/resources/archetype-resources/src/main/java/client/application/AppDarkThemeLoader.java

@@ -2,7 +2,7 @@
  * #%L
  * GwtMaterial
  * %%
- * Copyright (C) 2015 - 2017 GwtMaterialDesign
+ * Copyright (C) 2015 - 2020 GwtMaterialDesign
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,14 +17,14 @@
  * limitations under the License.
  * #L%
  */
-package ${package}.client.resources;
+package ${package}.client.application;
 
-import javax.inject.Inject;
+import ${package}.client.resources.AppResources;
+import gwt.material.design.client.theme.dark.DarkThemeLoader;
 
-public class ResourceLoader {
-    @Inject
-    ResourceLoader(AppResources appResources) {
-        appResources.normalize().ensureInjected();
-        appResources.style().ensureInjected();
+public class AppDarkThemeLoader extends DarkThemeLoader {
+
+    public AppDarkThemeLoader() {
+        super(AppResources.INSTANCE.appDarkCss());
     }
 }

src/main/resources/archetype-resources/src/main/java/client/application/ApplicationPresenter.java

@@ -19,15 +19,20 @@
  */
 package ${package}.client.application;
 
+import ${package}.client.resources.AppResources;
 import com.google.gwt.event.shared.GwtEvent;
+import com.gwtplatform.mvp.client.annotations.ContentSlot;
+import com.gwtplatform.mvp.client.proxy.RevealContentHandler;
+import com.google.gwt.dom.client.StyleInjector;
 import com.google.inject.Inject;
 import com.google.web.bindery.event.shared.EventBus;
 import com.gwtplatform.mvp.client.Presenter;
 import com.gwtplatform.mvp.client.View;
-import com.gwtplatform.mvp.client.annotations.ContentSlot;
 import com.gwtplatform.mvp.client.annotations.ProxyStandard;
 import com.gwtplatform.mvp.client.proxy.Proxy;
-import com.gwtplatform.mvp.client.proxy.RevealContentHandler;
+import gwt.material.design.addins.client.dark.AddinsDarkThemeLoader;
+import gwt.material.design.client.theme.dark.CoreDarkThemeLoader;
+import gwt.material.design.client.theme.dark.DarkThemeManager;
 
 public class ApplicationPresenter
         extends Presenter<ApplicationPresenter.MyView, ApplicationPresenter.MyProxy> {
@@ -47,4 +52,18 @@ interface MyProxy extends Proxy<ApplicationPresenter> {
             MyProxy proxy) {
         super(eventBus, view, proxy, RevealType.Root);
     }
+
+    @Override
+    protected void onBind() {
+        super.onBind();
+
+        // Dark Theme Mode
+        DarkThemeManager.get()
+            .register(new CoreDarkThemeLoader())
+            .register(new AddinsDarkThemeLoader())
+            .register(new AppDarkThemeLoader())
+            .load();
+
+        StyleInjector.inject(AppResources.INSTANCE.appCss().getText());
+    }
 }