Home Explore Help
Sign In
Vieraw
/
Kutt
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Merge pull request #146 from akash-joshi/develop

 Fix no_document_head warn in next.js & add offline support for PWA
Pouria Ezzati 7 years ago
parent
900ab027e1 ea4a203083
commit
945549c2f1
5 changed files with 41 additions and 24 deletions
Split View Show Diff Stats
  1. 4 0
      client/pages/_app.js
  2. 0 1
      client/pages/_document.js
  3. 29 0
      client/pages/offline.js
  4. 4 20
      server/offline/sw.js
  5. 4 3
      server/server.js

+ 4 - 0
client/pages/_app.js
View File 

@@ -1,4 +1,5 @@
 
 import App, { Container } from 'next/app';
 
+import Head from 'next/head';
 
 import React from 'react';
 
 import { Provider } from 'react-redux';
 
 import withReduxStore from '../with-redux-store';
 
@@ -8,6 +9,9 @@ class MyApp extends App {
 
     const { Component, pageProps, reduxStore } = this.props;
 
     return (
 
       <Container>
 
+        <Head>
 
+          <title>Kutt.it | Modern Open Source URL shortener.</title>
 
+        </Head>
 
         <Provider store={reduxStore}>
 
           <Component {...pageProps} />
 
         </Provider>

+ 0 - 1
client/pages/_document.js
View File 

@@ -25,7 +25,6 @@ class AppDocument extends Document {
 
         <Head>
 
           <meta charSet="utf-8" />
 
           <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 
-          <title>Kutt.it | Modern Open Source URL shortener.</title>
 
           <meta
 
             name="description"
 
             content="Kutt.it is a free and open source URL shortener with custom domains and stats."

+ 29 - 0
client/pages/offline.js
View File 

@@ -0,0 +1,29 @@
 
+import React, { Component } from 'react';
 
+import styled from 'styled-components';
 
+import BodyWrapper from '../components/BodyWrapper';
 
+
 
+const Wrapper = styled.h2`
 
+  font-size: 24px;
 
+  font-weight: 300;
 
+  position: absolute;
 
+  text-align: center;
 
+  top: 40vh;
 
+  padding-left: 10px;
 
+  padding-right: 10px;
 
+`;
 
+
 
+// eslint-disable-next-line react/prefer-stateless-function
 
+class OfflinePage extends Component {
 
+  render() {
 
+    return (
 
+      <BodyWrapper>
 
+        <Wrapper>
 
+          Please check your <b>internet connection</b> and try again. <br />
 
+          You are <b>offline</b> right now.
 
+        </Wrapper>
 
+      </BodyWrapper>
 
+    );
 
+  }
 
+}
 
+
 
+export default OfflinePage;

+ 4 - 20
server/offline/sw.js
View File 

@@ -2,35 +2,19 @@
 
 
 // eslint-disable-next-line no-restricted-globals
 
 self.addEventListener('install', event => {
 
-  const indexPage = new Request('index.html');
 
+  const offlinePage = new Request('/offline');
 
   event.waitUntil(
 
-    fetch(indexPage).then(response =>
 
-      caches.open('kutt-offline').then(cache => cache.put(indexPage, response))
 
+    fetch(offlinePage).then(response =>
 
+      caches.open('kutt-offline-v1').then(cache => cache.put(offlinePage, response))
 
     )
 
   );
 
 });
 
 
 // eslint-disable-next-line no-restricted-globals
 
 self.addEventListener('fetch', event => {
 
-  const updateCache = request =>
 
-    caches
 
-      .open('kutt-offline')
 
-      .then(cache => fetch(request).then(response => cache.put(request, response)));
 
-
 
-  event.waitUntil(updateCache(event.request));
 
-
 
   event.respondWith(
 
     fetch(event.request).catch(() =>
 
-      // Check to see if you have it in the cache
 
-      // Return response
 
-      // If not in the cache, then return error page
 
-      caches.open('kutt-offline').then(cache =>
 
-        cache.match(event.request).then(matching => {
 
-          const report =
 
-            !matching || matching.status === 404 ? Promise.reject(new Error('no-match')) : matching;
 
-          return report;
 
-        })
 
-      )
 
+      caches.open('kutt-offline-v1').then(cache => cache.match('/offline'))
 
     )
 
   );
 
 });

+ 4 - 3
server/server.js
View File 

@@ -70,6 +70,7 @@ app.prepare().then(() => {
 
   server.get('/terms', (req, res) => app.render(req, res, '/terms'));
 
   server.get('/report', (req, res) => app.render(req, res, '/report'));
 
   server.get('/banned', (req, res) => app.render(req, res, '/banned'));
 
+  server.get('/offline', (req, res) => app.render(req, res, '/offline'));
 
   server.get('/reset-password/:resetPasswordToken?', catchErrors(auth.resetPassword), (req, res) =>
 
     app.render(req, res, '/reset-password', req.user)
 
   );
 
@@ -79,9 +80,9 @@ app.prepare().then(() => {
 
 
   // Disabled service worker because of multiple requests
 
   // Resulting in duplicated visist count
 
-  // server.get('/sw.js', (_req, res) => {
 
-  //   res.sendFile(`${__dirname}/offline/sw.js`);
 
-  // });
 
+  server.get('/sw.js', (_req, res) => {
 
+    res.sendFile(`${__dirname}/offline/sw.js`);
 
+  });
 
 
   /* User and authentication */
 
   server.post('/api/auth/signup', validationCriterias, validateBody, catchErrors(auth.signup));