Prechádzať zdrojové kódy

add serwiceworker template and swregistration for pwa

serg1557733 1 rok pred
rodič
commit
55992529b6

+ 11 - 0
frontend/public/index.html

@@ -13,6 +13,17 @@
 <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <!-- <script>
+        console.log('service worker start..', navigator)
+        if('serviceWorker' in navigator){
+            console.log('service worker started,..')
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('./service-worker.js')
+                    .then( reg => console.log('Success', reg.scope))
+                    .catch(err => console.log('Fail',err))
+            })
+        }
+    </script> -->
 </body>
 
 </html>

+ 8 - 8
frontend/src/components/chatPage/ChatPage.jsx

@@ -213,16 +213,16 @@ export const ChatPage = () => {
                                 socket.emit('userWriting');
                                 setMessage({message: e.target.value})}
                             } 
-                            onFocus={ e => {
-                                if (isTabletorMobile) {
-                                   e.target.className = 'focus' 
+                            // onFocus={ e => {
+                            //     if (isTabletorMobile) {
+                            //        e.target.className = 'focus' 
                                    
-                                } 
-                            }}
-                            onBlur={e=> {
-                                e.target.className = 'blur'
+                            //     } 
+                            // }}
+                            // onBlur={e=> {
+                            //     e.target.className = 'blur'
 
-                            }}
+                            // }}
                         
                         /> 
 

+ 1 - 1
frontend/src/components/chatPage/chatPage.scss

@@ -33,7 +33,7 @@
     display: flex;
     flex-grow:1;
     max-width: 100%;
-    height: 80vh;
+    height: 90vh;
     flex-direction: column;                 
 }
 

+ 2 - 0
frontend/src/index.js

@@ -4,6 +4,7 @@ import './index.css';
 import App from './App';
 import {Provider} from 'react-redux';
 import {store} from './store'
+import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 
 ReactDOM.render(
     <Provider store={store}> 
@@ -12,3 +13,4 @@ ReactDOM.render(
         ,document.getElementById('root')
 );
 
+serviceWorkerRegistration.register();

+ 72 - 0
frontend/src/service-worker.js

@@ -0,0 +1,72 @@
+// /* eslint-disable no-restricted-globals */
+
+// // This service worker can be customized!
+// // See https://developers.google.com/web/tools/workbox/modules
+// // for the list of available Workbox modules, or add any other
+// // code you'd like.
+// // You can also remove this file if you'd prefer not to use a
+// // service worker, and the Workbox build step will be skipped.
+
+// import { clientsClaim } from 'workbox-core';
+// import { ExpirationPlugin } from 'workbox-expiration';
+// import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+// import { registerRoute } from 'workbox-routing';
+// import { StaleWhileRevalidate } from 'workbox-strategies';
+
+// clientsClaim();
+
+// // Precache all of the assets generated by your build process.
+// // Their URLs are injected into the manifest variable below.
+// // This variable must be present somewhere in your service worker file,
+// // even if you decide not to use precaching. See https://cra.link/PWA
+// precacheAndRoute(self.__WB_MANIFEST);
+
+// // Set up App Shell-style routing, so that all navigation requests
+// // are fulfilled with your index.html shell. Learn more at
+// // https://developers.google.com/web/fundamentals/architecture/app-shell
+// const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
+// registerRoute(
+//   // Return false to exempt requests from being fulfilled by index.html.
+//   ({ request, url }) => {
+//     // If this isn't a navigation, skip.
+//     if (request.mode !== 'navigate') {
+//       return false;
+//     } // If this is a URL that starts with /_, skip.
+
+//     if (url.pathname.startsWith('/_')) {
+//       return false;
+//     } // If this looks like a URL for a resource, because it contains // a file extension, skip.
+
+//     if (url.pathname.match(fileExtensionRegexp)) {
+//       return false;
+//     } // Return true to signal that we want to use the handler.
+
+//     return true;
+//   },
+//   createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
+// );
+
+// // An example runtime caching route for requests that aren't handled by the
+// // precache, in this case same-origin .png requests like those from in public/
+// registerRoute(
+//   // Add in any other file extensions or routing criteria as needed.
+//   ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst.
+//   new StaleWhileRevalidate({
+//     cacheName: 'images',
+//     plugins: [
+//       // Ensure that once this runtime cache reaches a maximum size the
+//       // least-recently used images are removed.
+//       new ExpirationPlugin({ maxEntries: 50 }),
+//     ],
+//   })
+// );
+
+// // This allows the web app to trigger skipWaiting via
+// // registration.waiting.postMessage({type: 'SKIP_WAITING'})
+// self.addEventListener('message', (event) => {
+//   if (event.data && event.data.type === 'SKIP_WAITING') {
+//     self.skipWaiting();
+//   }
+// });
+
+// // Any other custom service worker logic can go here.

+ 139 - 0
frontend/src/serviceWorkerRegistration.js

@@ -0,0 +1,139 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://cra.link/PWA
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    window.location.hostname === '192.168.0.107' ||
+      // [::1] is the IPv6 localhost address.
+      window.location.hostname === '[::1]' ||
+      // 127.0.0.0/8 are considered localhost for IPv4.
+      window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
+  );
+  
+
+  export function register(config) {
+    console.log('registering..', navigator)
+    if ('serviceWorker' in navigator) {
+      // The URL constructor is available in all browsers that support SW.
+      const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+      if (publicUrl.origin !== window.location.origin) {
+        // Our service worker won't work if PUBLIC_URL is on a different origin
+        // from what our page is served on. This might happen if a CDN is used to
+        // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+        return;
+      }
+  
+      window.addEventListener('load', () => {
+        const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+        console.log(swUrl, config)
+        if (isLocalhost) {
+          // This is running on localhost. Let's check if a service worker still exists or not.
+          checkValidServiceWorker(swUrl, config);
+  
+          // Add some additional logging to localhost, pointing developers to the
+          // service worker/PWA documentation.
+          navigator.serviceWorker.ready.then(() => {
+            console.log(
+              'This web app is being served cache-first by a service ' +
+                'worker. To learn more, visit https://cra.link/PWA'
+            );
+          });
+        } else {
+          // Is not localhost. Just register service worker
+          registerValidSW(swUrl, config);
+        }
+      });
+    }
+  }
+  
+  function registerValidSW(swUrl, config) {
+    navigator.serviceWorker
+      .register(swUrl)
+      .then((registration) => {
+        registration.onupdatefound = () => {
+          const installingWorker = registration.installing;
+          if (installingWorker == null) {
+            return;
+          }
+          installingWorker.onstatechange = () => {
+            if (installingWorker.state === 'installed') {
+              if (navigator.serviceWorker.controller) {
+                // At this point, the updated precached content has been fetched,
+                // but the previous service worker will still serve the older
+                // content until all client tabs are closed.
+                console.log(
+                  'New content is available and will be used when all ' +
+                    'tabs for this page are closed. See https://cra.link/PWA.'
+                );
+  
+                // Execute callback
+                if (config && config.onUpdate) {
+                  config.onUpdate(registration);
+                }
+              } else {
+                // At this point, everything has been precached.
+                // It's the perfect time to display a
+                // "Content is cached for offline use." message.
+                console.log('Content is cached for offline use.');
+  
+                // Execute callback
+                if (config && config.onSuccess) {
+                  config.onSuccess(registration);
+                }
+              }
+            }
+          };
+        };
+      })
+      .catch((error) => {
+        console.error('Error during service worker registration:', error);
+      });
+  }
+  
+  function checkValidServiceWorker(swUrl, config) {
+    // Check if the service worker can be found. If it can't reload the page.
+    fetch(swUrl, {
+      headers: { 'Service-Worker': 'script' },
+    })
+      .then((response) => {
+        // Ensure service worker exists, and that we really are getting a JS file.
+        const contentType = response.headers.get('content-type');
+        if (
+          response.status === 404 ||
+          (contentType != null && contentType.indexOf('javascript') === -1)
+        ) {
+          // No service worker found. Probably a different app. Reload the page.
+          navigator.serviceWorker.ready.then((registration) => {
+            registration.unregister().then(() => {
+              window.location.reload();
+            });
+          });
+        } else {
+          // Service worker found. Proceed as normal.
+          registerValidSW(swUrl, config);
+        }
+      })
+      .catch(() => {
+        console.log('No internet connection found. App is running in offline mode.');
+      });
+  }
+  
+  export function unregister() {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.ready
+        .then((registration) => {
+          registration.unregister();
+        })
+        .catch((error) => {
+          console.error(error.message);
+        });
+    }
+  }