Implement PWA functionality (#455)

* implement PWA functionality

* disable tweet button when offline

* just remove tweet button instead

components/Button.js

@@ -10,6 +10,7 @@ export default props => (
       color: props.color,
       border: `1px solid ${props.color}`
     }}
+    disabled={props.disabled}
   >
     <span>{props.title}</span>
     <style jsx>

components/Editor.js

@@ -46,7 +46,8 @@ class Editor extends React.Component {
       ...DEFAULT_SETTINGS,
       loading: true,
       uploading: false,
-      code: props.content
+      code: props.content,
+      online: true
     }
 
     this.save = this.save.bind(this)
@@ -61,6 +62,9 @@ class Editor extends React.Component {
     this.resetDefaultSettings = this.resetDefaultSettings.bind(this)
     this.getCarbonImage = this.getCarbonImage.bind(this)
     this.onDrop = this.onDrop.bind(this)
+
+    this.setOffline = () => this.setState({ online: false })
+    this.setOnline = () => this.setState({ online: true })
   }
 
   componentDidMount() {
@@ -68,8 +72,17 @@ class Editor extends React.Component {
     this.setState({
       ...getState(localStorage),
       ...this.props.initialState,
-      loading: false
+      loading: false,
+      online: Boolean(window && window.navigator && window.navigator.onLine)
     })
+
+    window.addEventListener('offline', this.setOffline);
+    window.addEventListener('online', this.setOnline);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('offline', this.setOffline);
+    window.removeEventListener('online', this.setOnline);
   }
 
   componentDidUpdate() {
@@ -238,7 +251,7 @@ class Editor extends React.Component {
               resetDefaultSettings={this.resetDefaultSettings}
             />
             <div className="buttons">
-              {this.props.tweet && (
+              {this.props.tweet && this.state.online && (
                 <Button
                   className="tweetButton"
                   onClick={this.upload}

components/Meta.js

@@ -37,6 +37,7 @@ export default () => {
         <meta name="og:image" content="/static/banner.png" />
         <meta name="theme-color" content="#121212" />
         <title>Carbon</title>
+        <link rel='manifest' href='/static/manifest.json' />
         <link rel="shortcut icon" href="/static/favicon.ico" />
         <link rel="stylesheet" href="/_next/static/style.css" />
         <link

next.config.js

@@ -1,3 +1,4 @@
 const withCSS = require('@zeit/next-css')
-/* Without CSS Modules, with PostCSS */
-module.exports = withCSS()
+const withOffline = require('next-offline')
+
+module.exports = withOffline(withCSS())

package.json

@@ -37,6 +37,7 @@
     "morphmorph": "^0.1.0",
     "ms": "^2.0.0",
     "next": "^6.0.3",
+    "next-offline": "^2.9.0",
     "now-logs": "^0.0.7",
     "puppeteer": "1.4.0",
     "react": "16.3.*",

server.js

@@ -1,3 +1,4 @@
+const path = require('path')
 const express = require('express')
 const morgan = require('morgan')
 const bodyParser = require('body-parser')
@@ -45,6 +46,8 @@ app
       server.use(morgan('tiny'))
     }
 
+    const filePath = path.join(__dirname, '.next', 'service-worker.js')
+    server.get('/service-worker.js', (req, res) => app.serveStatic(req, res, filePath))
     // api endpoints
     server.post('/twitter', bodyParser.json({ limit: '5mb' }), require('./handlers/twitter'))
     server.post('/image', bodyParser.json({ limit: '5mb' }), wrap(imageHandler))

static/manifest.json

@@ -0,0 +1,18 @@
+{
+  "name": "Carbon",
+  "short_name": "Carbon",
+  "background_color": "#121212",
+  "theme_color": "#121212",
+  "description": "Carbon is the easiest way to create and share beautiful images of your source code.",
+  "display": "standalone",
+  "start_url": "/",
+  "icons": [{
+    "src": "/static/brand/icon.png",
+    "type": "image/png",
+    "sizes": "448x448"
+  }, {
+    "src": "/static/brand/logo-square.png",
+    "type": "image/png",
+    "sizes": "1024x1024"
+  }]
+}