feat(pwa): enable basic pwa for app,

act as share target
ComposableWeb · Apr 20, 2020 · 3982029 · 3982029
1 parent 0bc77ef
commit 3982029
Show file tree

Hide file tree

Showing 28 changed files with 1,125 additions and 64 deletions.
diff --git a/packages/design-system/src/assets/svg/poolbase-icon.svg b/packages/design-system/src/assets/svg/poolbase-icon.svg
diff --git a/packages/poolbase-app/package.json b/packages/poolbase-app/package.json
@@ -34,9 +34,12 @@
     "firebase": "^7.7.0",
     "firebase-admin": "^8.9.2",
     "firebase-functions": "^3.3.0",
+    "formidable": "^1.2.2",
     "isomorphic-unfetch": "^3.0.0",
     "lodash": "^4.17.15",
     "next": "^9.3.2",
+    "next-compose-plugins": "^2.2.0",
+    "next-pwa": "^2.3.3",
     "next-transpile-modules": "^3.2.0",
     "puppeteer": "^2.1.1",
     "react": "^16.12.0",

diff --git a/packages/poolbase-app/src/app/next.config.js b/packages/poolbase-app/src/app/next.config.js
@@ -1,18 +1,23 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 'use strict';
 
 require('./env.js');
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const consola = require('consola');
 consola.withTag('app');
 consola.wrapConsole();
+const withPlugins = require('next-compose-plugins');
 const withTM = require('next-transpile-modules')(['design-system']);
-module.exports = withTM({
-  distDir: process.env.NODE_ENV === 'development' ? '.next' : '../../../../dist/app/functions/next',
+const withPWA = require('next-pwa');
+const distDir = process.env.NODE_ENV === 'development' ? '.next' : '../../../../dist/app/functions/next';
+const nextConfiguration = {
+  distDir,
   // Public, build-time env vars.
   // https://nextjs.org/docs#build-time-configuration
   env: {
     FIREBASE_AUTH_DOMAIN: process.env.FIREBASE_AUTH_DOMAIN,
     FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID,
     FIREBASE_PUBLIC_API_KEY: process.env.FIREBASE_PUBLIC_API_KEY,
   },
-});
+};
+module.exports = withPlugins([withTM, [withPWA, { dest: 'public' }]], nextConfiguration);
diff --git a/packages/poolbase-app/src/app/pages/_app.tsx b/packages/poolbase-app/src/app/pages/_app.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import App from 'next/app';
 import { ThemeProvider } from 'theme-ui';
 import '../utils/logger';
-import { poolbaseTheme } from '../../../../design-system/src/theme';
+import { poolbaseTheme } from 'design-system/src/theme';
 
 class MyApp extends App {
   public render(): JSX.Element {

diff --git a/packages/poolbase-app/src/app/pages/_document.tsx b/packages/poolbase-app/src/app/pages/_document.tsx
@@ -38,6 +38,66 @@ export default class CustomDocument extends Document<CustomDocumentProps> {
         }}
       >
         <Head>
+          <meta charSet="utf-8" />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+          <meta
+            name="viewport"
+            content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
+          />
+          <meta name="description" content="All your information in one place" />
+          <meta name="keywords" content="bookmarks, groups, collaboration, search, information management" />
+          <title>Poolbase</title>
+
+          <meta name="theme-color" content="#1887ED" />
+          <meta name="mobile-web-app-capable" content="yes" />
+
+          <meta name="apple-mobile-web-app-title" content="Poolbase" />
+          <meta name="apple-mobile-web-app-capable" content="yes" />
+          <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+
+          <meta name="msapplication-navbutton-color" content="#1887ED" />
+          <meta name="msapplication-TileColor" content="red" />
+          <meta name="msapplication-TileImage" content="ms-icon-144x144.png" />
+          <meta name="msapplication-config" content="browserconfig.xml" />
+
+          <meta name="application-name" content="Poolbase" />
+          <meta name="msapplication-tooltip" content="All your informnation in one place" />
+          <meta name="msapplication-starturl" content="/" />
+
+          <meta name="msapplication-tap-highlight" content="no" />
+
+          <meta name="full-screen" content="yes" />
+          <meta name="browsermode" content="application" />
+
+          <meta name="nightmode" content="enable" />
+
+          <meta name="viewport" content="uc-fitscreen=yes" />
+
+          <meta name="layoutmode" content="fitscreen" />
+
+          <meta name="screen-orientation" content="portrait" />
+          <link href="/images/icons/icon16.png" rel="icon" type="image/png" sizes="16x16" />
+          <link href="/images/icons/icon32.png" rel="icon" type="image/png" sizes="32x32" />
+          <link href="/images/icons/icon48.png" rel="icon" type="image/png" sizes="48x48" />
+
+          <link href="/images/icons/icon32.png" rel="apple-touch-icon" />
+          <link href="/images/icons/icon76.png" rel="apple-touch-icon" sizes="76x76" />
+          <link href="/images/icons/icon120.png" rel="apple-touch-icon" sizes="120x120" />
+          <link href="/images/icons/icon152.png" rel="apple-touch-icon" sizes="152x152" />
+
+          <link href="/images/icons/touch-icon-start-up-320x480.png" rel="apple-touch-startup-image" />
+
+          <link href="/images/icons/poolbase-icon.svg" rel="mask-icon" size="any" color="red" />
+
+          <link href="/images/icons/icon192.png" rel="icon" sizes="192x192" />
+          <link href="/images/icons/icon128.png" rel="icon" sizes="128x128" />
+
+          <link href="/images/icons/favicon.ico" rel="shortcut icon" type="image/x-icon" />
+
+          <link href="/images/icons/icon57.png" rel="apple-touch-icon-precomposed" sizes="57x57" />
+          <link href="/images/icons/icon72.png" rel="apple-touch-icon" sizes="72x72" />
+
+          <link href="/manifest.json" rel="manifest" />
           <script
             id="__MY_AUTH_USER_INFO"
             type="application/json"

diff --git a/packages/poolbase-app/src/app/pages/add-url.tsx b/packages/poolbase-app/src/app/pages/add-url.tsx
@@ -3,6 +3,7 @@ import { jsx, Styled } from 'theme-ui';
 import { useState, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { NextPage } from 'next';
+import { useRouter } from 'next/router';
 
 import withAuthUser from '../utils/pageWrappers/withAuthUser';
 import PageLayout from '../components/PageLayout';
@@ -19,11 +20,11 @@ interface Datum {
 }
 
 const AddUrlPage: NextPage<{}> = () => {
+  const router = useRouter();
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
   const { register, handleSubmit } = useForm();
-  console.table(data);
   const onSubmit = async (data): Promise<void> => {
     try {
       setLoading(true);
@@ -50,7 +51,7 @@ const AddUrlPage: NextPage<{}> = () => {
       <form onSubmit={handleSubmit(onSubmit)}>
         {error ? <h3 className="error">{error}</h3> : null}
         <label htmlFor="url">URL</label>
-        <input name="url" required ref={register} />
+        <input name="url" value={router.query.url ? router.query.url : ''} required ref={register} />
         <button disabled={loading}>{loading ? 'Loading...' : 'Add URL'}</button>
       </form>
       {data.map(

diff --git a/packages/poolbase-app/src/app/pages/api/share-url.ts b/packages/poolbase-app/src/app/pages/api/share-url.ts
@@ -0,0 +1,34 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import formidable from 'formidable';
+import { auth } from 'firebase-admin';
+import admin, { firestore } from '../../../functions/initFirebase';
+import commonMiddleware from '../../utils/middleware/commonMiddleware';
+
+const handler = async (
+  req: NextApiRequest & { session?: { decodedToken: auth.DecodedIdToken; token: string } },
+  res: NextApiResponse
+): Promise<void> => {
+  const form = formidable();
+  await form.parse(req, async (err, fields) => {
+    if (err) {
+      return;
+    }
+    const urlData = {
+      ...fields,
+      created: admin.firestore.FieldValue.serverTimestamp(),
+      status: 'new',
+      processed: {},
+    };
+    // Push the new url into Cloud Firestore using the Firebase Admin SDK.
+    console.info(urlData, req.session);
+    return await firestore.collection('pages').add(urlData);
+  });
+
+  res.end();
+};
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+};
+export default commonMiddleware(handler);
diff --git a/packages/poolbase-app/src/app/public/images/icons/favicon.ico b/packages/poolbase-app/src/app/public/images/icons/favicon.ico
diff --git a/packages/poolbase-app/src/app/public/images/icons/icon120.png b/packages/poolbase-app/src/app/public/images/icons/icon120.png
diff --git a/packages/poolbase-app/src/app/public/images/icons/icon128.png b/packages/poolbase-app/src/app/public/images/icons/icon128.png
diff --git a/packages/poolbase-app/src/app/public/images/icons/icon144.png b/packages/poolbase-app/src/app/public/images/icons/icon144.png
diff --git a/packages/poolbase-app/src/app/public/images/icons/icon152.png b/packages/poolbase-app/src/app/public/images/icons/icon152.png
diff --git a/packages/poolbase-app/src/app/public/images/icons/icon16.png b/packages/poolbase-app/src/app/public/images/icons/icon16.png
diff --git a/packages/poolbase-app/src/app/public/images/icons/icon19.png b/packages/poolbase-app/src/app/public/images/icons/icon19.png
diff --git a/packages/poolbase-app/src/app/public/images/icons/icon192.png b/packages/poolbase-app/src/app/public/images/icons/icon192.png
diff --git a/packages/poolbase-app/src/app/public/images/icons/icon32.png b/packages/poolbase-app/src/app/public/images/icons/icon32.png
diff --git a/packages/poolbase-app/src/app/public/images/icons/icon38.png b/packages/poolbase-app/src/app/public/images/icons/icon38.png
diff --git a/packages/poolbase-app/src/app/public/images/icons/icon384.png b/packages/poolbase-app/src/app/public/images/icons/icon384.png
diff --git a/packages/poolbase-app/src/app/public/images/icons/icon48.png b/packages/poolbase-app/src/app/public/images/icons/icon48.png
diff --git a/packages/poolbase-app/src/app/public/images/icons/icon512.png b/packages/poolbase-app/src/app/public/images/icons/icon512.png
diff --git a/packages/poolbase-app/src/app/public/images/icons/icon57.png b/packages/poolbase-app/src/app/public/images/icons/icon57.png
diff --git a/packages/poolbase-app/src/app/public/images/icons/icon72.png b/packages/poolbase-app/src/app/public/images/icons/icon72.png
diff --git a/packages/poolbase-app/src/app/public/images/icons/icon76.png b/packages/poolbase-app/src/app/public/images/icons/icon76.png
diff --git a/packages/poolbase-app/src/app/public/images/icons/icon96.png b/packages/poolbase-app/src/app/public/images/icons/icon96.png
diff --git a/packages/poolbase-app/src/app/public/images/icons/poolbase-icon.svg b/packages/poolbase-app/src/app/public/images/icons/poolbase-icon.svg
diff --git a/packages/poolbase-app/src/app/public/manifest.json b/packages/poolbase-app/src/app/public/manifest.json
@@ -0,0 +1,61 @@
+{
+  "name": "poolbase",
+  "short_name": "poolbase",
+  "theme_color": "#1887ED",
+  "background_color": "#2d3748",
+  "display": "browser",
+  "orientation": "portrait",
+  "Scope": "/",
+  "start_url": "/",
+  "share_target": {
+    "action": "/add-url",
+    "method": "GET",
+    "params": {
+      "title": "title",
+      "url": "url"
+    }
+  },
+  "icons": [
+    {
+      "src": "images/icons/ico72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/ico96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "splash_pages": null
+}
diff --git a/packages/poolbase-app/src/functions/initFirebase.ts b/packages/poolbase-app/src/functions/initFirebase.ts
@@ -3,7 +3,8 @@ import * as admin from 'firebase-admin';
 const app = admin.apps.length === 0 ? admin.initializeApp() : admin.app();
 const firestore = admin.firestore(app);
 const storage = admin.storage();
-const bucket = storage.bucket();
+const bucket = storage.bucket(process.env.FIREBASE_STORAGEBUCKET);
+const auth = admin.auth(app);
 
-export { app, firestore, storage, bucket };
+export { app, firestore, storage, bucket, auth };
 export default admin;