Просмотр исходного кода

Merge pull request #146 from akash-joshi/develop

 Fix no_document_head warn in next.js & add offline support for PWA
Pouria Ezzati 7 лет назад
Родитель
Сommit
945549c2f1
5 измененных файлов с 41 добавлено и 24 удалено
  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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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));