Merge pull request #23 from Haiti-Distributed-Healthcare-System/feature/pwa_setup_t13

[Feature] PWA Init  & Basic CI

.github/workflows/lighthouse.yml

@@ -0,0 +1,25 @@
+name: Build project and Run Lighthouse CI
+on: [push]
+jobs:
+  lhci:
+    name: Lighthouse CI
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js 10.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 10.x
+      - name: npm install, build
+        run: |
+          pushd pwa && npm install
+          npm run build && popd
+      - name: run Lighthouse CI
+        run: |
+          npm install -g @lhci/cli@0.3.x
+          lhci autorun || echo "LHCI failed!"
+      - name: Upload lighthouse report
+        uses: actions/upload-artifact@v1
+        with:
+          name: lighthouse
+          path: ./.lighthouseci

.github/workflows/pwa-tests.yml

@@ -0,0 +1,23 @@
+name: PWA Testing
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node Version ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: pushd pwa && npm install && popd
+      - run: pushd pwa && npm run build && popd
+      - run: pushd pwa && npm test && popd
+        env:
+          CI: true

.gitignore

@@ -0,0 +1 @@
+**/.lighthouseci/**

.lighthouserc.json

@@ -0,0 +1,11 @@
+{
+  "ci": {
+    "collect": {
+      "staticDistDir": "./pwa/build",
+      "numberOfRuns": 3
+    },
+    "upload": {
+      "target": "temporary-public-storage"
+    }
+  }
+}

pwa/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "hdhs.ts",
+  "name": "hdhs",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,

pwa/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "hdhs.ts",
+  "name": "hdhs",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

pwa/public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Healthcare Application for the Haiti Community Healthcare Initiative"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -26,8 +26,21 @@
     -->
     <title>React App</title>
   </head>
+
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <script>
+      // CODELAB: Register service worker.
+      if ("serviceWorker" in navigator) {
+        window.addEventListener("load", () => {
+          navigator.serviceWorker.register("/service-worker.js").then(reg => {
+            console.log("Service worker registered.", reg);
+          });
+        });
+      }
+    </script>
+
     <div id="root"></div>
     <!--
       This HTML file is a template.

pwa/public/manifest.json

@@ -1,25 +1,50 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "name": "CHI Haiti Distributed Healthcare System",
+  "short_name": "HDHS",
+  "background_color": "#3E4EB8",
+  "theme_color": "#2F3BA2",
+  "display": "standalone",
+  "start_url": ".",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "images/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
     },
     {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
+      "src": "images/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
     },
     {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
+      "src": "images/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
     }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
+  ]
+}

pwa/public/offline.html

@@ -0,0 +1 @@
+<div>OFFLINE</div>

pwa/public/service-worker.js

@@ -0,0 +1,16 @@
+// CODELAB: Add list of files to cache here.
+const FILES_TO_CACHE = ['./offline.html', './app.js'];
+
+self.addEventListener('install', event => {
+  const cache = await caches.open('test-static');
+  cache.addAll(FILES_TO_CACHE);
+});
+
+self.addEventListener('fetch', event => {
+  event.respondWith(checkCache(event.request));
+});
+
+async function checkCache(req){
+  const cacheResponse = await caches.match(req);
+  return cacheResponse || fetch(req);
+}

pwa/src/index.tsx

@@ -9,4 +9,4 @@ ReactDOM.render(<App />, document.getElementById('root'));
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.register();