Added ServiceWorkers and AnimationTransitionGroup v2.

CHANGELOG.md

@@ -1,6 +1,10 @@
 ## Webpack4 - React16.7 Templater App
 
 
+# 1.2.0
+ * Added ServiceWorkers in App.
+ * Added Added AnimationTransitionGroup v2 package for animation handling with example in Body Component.
+
 # 1.1.0
  * Improved App Structure.
  * Added Redux connected store in App.

package.json

@@ -185,6 +185,7 @@
     "react-redux": "^6.0.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
+    "react-transition-group": "^2.5.2",
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
     "redux-saga": "^0.16.2",

src/components/Body.js

@@ -1,7 +1,10 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+
 import styles from '../styles/index.scss';
 import buttonsStyles from '../styles/button.scss';
+import body from '../styles/body.scss';
 
 const FIRST_IMAGE_ID = 1;
 const SECOND_IMAGE_ID = 2;
@@ -39,7 +42,11 @@ class Body extends PureComponent {
     return (
       <div className={styles.body}>
         <button type='button' onClick={this._handleClick} className={buttonsStyles.button}>
-          <img className={styles.bodyImg} src={`../assets/${imageToShow}.png`} alt='main_img' />
+          <TransitionGroup className={body.animWrap}>
+            <CSSTransition classNames='mainImage' timeout={500} key={imageToShow}>
+              <img className={styles.bodyImg} src={`../assets/${imageToShow}.png`} alt='main_img' />
+            </CSSTransition>
+          </TransitionGroup>
         </button>
       </div>
     );

src/index.js

@@ -18,6 +18,16 @@ const renderError = error => {
   ReactDOM.render(<RedBox error={error} />, ENTRY_POINT);
 };
 
+// register serviceWorkers if available
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker
+    .register('./serviceWorker.js')
+    .then(registration => {
+      console.log('Excellent, registered with scope: ', registration.scope);
+    })
+    .catch(e => console.error('ERROR IN SERVICE WORKERS: ', e));
+}
+
 // This code is excluded from production bundle
 if (__DEV__) {
   // ========================================================

src/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "Templater",
-  "name": "Webpack4-React17 Templater",
+  "short_name": "CoConat",
+  "name": "CoConat Builder",
   "icons": [
     {
       "src": "favicon.ico",

src/serviceWorker.js

@@ -0,0 +1,36 @@
+// fetching required static data on load
+// self.addEventListener('install', e => {
+//   console.log(e, 'SW has been installed!')
+// })
+
+// self.addEventListener('fetch', function(event) {
+//   console.log(event,  'SWHAS BEEN FETCHED!!!')
+// })
+
+// notification
+self.addEventListener('push', function(event) {
+  if (Notification.permission === 'default') {
+    self.Notification.requestPermission().then(res => console.log(res));
+    console.log('The permission request was dismissed.');
+    return;
+  }
+
+  if (Notification.permission === 'denied') {
+    console.log(Notification.permission, "Permission wasn't granted. Allow a retry.");
+    return;
+  }
+
+  console.log('The permission request is granted!');
+
+  try {
+    event.waitUntil(
+      self.registration.showNotification((event && event.data && event.data.text()) || 'Some Notification Here!')
+    );
+  } catch (e) {
+    throw new Error(`Error in SW: ${e}`);
+  }
+});
+
+self.addEventListener('sync', function(event) {
+  console.log(event.tag, 'Sync is completed!!!');
+});

src/styles/body.scss

@@ -0,0 +1,28 @@
+.animWrap {
+  position: relative;
+}
+
+:global {
+  .mainImage-enter {
+    opacity: 0;
+    transition: all 500ms linear;
+    transform: translateX(50%);
+  }
+
+  .mainImage-enter-active {
+    opacity: 1;
+    transform: translateX(60%);
+  }
+
+  .mainImage-exit {
+    transition: opacity 500ms linear;
+    transform: translateX(-60%);
+    opacity: 1;
+  }
+
+  .mainImage-exit-active {
+    transition: all 500ms linear;
+    transform: translateX(-50%);
+    opacity: 0;
+  }
+}

yarn.lock

@@ -608,7 +608,7 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-transform-typescript" "^7.1.0"
 
-"@babel/runtime@^7.2.0":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.2.0.tgz#b03e42eeddf5898e00646e4c840fa07ba8dcad7f"
   dependencies:
@@ -4260,6 +4260,12 @@ dom-converter@~0.2:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^3.3.1:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dom-serializer@0, dom-serializer@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -10133,6 +10139,10 @@ react-is@^16.3.2, react-is@^16.6.3:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa"
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+
 react-redux@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-6.0.0.tgz#09e86eeed5febb98e9442458ad2970c8f1a173ef"
@@ -10167,6 +10177,15 @@ react-router@^4.3.1:
     prop-types "^15.6.1"
     warning "^4.0.1"
 
+react-transition-group@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.5.2.tgz#9457166a9ba6ce697a3e1b076b3c049b9fb2c408"
+  dependencies:
+    dom-helpers "^3.3.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+    react-lifecycles-compat "^3.0.4"
+
 react@^16.7.0:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381"