Chalarangelo

self.addEventListener('activate', function(e) {
  e.waitUntil(caches.keys()
    .then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName)
          return caches.delete(key);
      }));
  }));
  return self.clients.claim();
});

Chalarangelo

var cacheName = 'mockApp-v1.0.0';
var filesToCache = [
  './',
  './index.html',
  './manifest.json',
  './static/js/bundle.js'
];

self.addEventListener('install', function(e) {
  e.waitUntil(caches.open(cacheName)

Chalarangelo

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && npm run build-rename-replace && npm run build-sw",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "build-sw" : "npm run build-replace-sw-refs && npm run build-minify-sw",
    "build-rename-replace": "npm run build-rename && npm run build-replace",
    "build-rename": "npm run build-rename-js && npm run build-rename-css",
    "build-rename-js": "renamer --regex --find main\\.\\w+\\.js --replace main.js build/static/js/*.js",
    "build-rename-css": "renamer --regex --find main\\.\\w+\\.css --replace main.css build/static/css/*.css",

Chalarangelo

// "caches" is a global read-only variable, which is an instance of CacheStorage
caches.open(cacheName).then(function(cache) {
  // Do something with your cache
});
// Source: https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage/open

Chalarangelo

{
  "name": "Mockup Progressive Web App",
  "short_name": "Mock PWA",
  "description": "A mock progressive web app built with React and mini.css.",
  "lang": "en-US",
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#1a237e",
  "icons": [
    {

Chalarangelo

// Get page scroll percentage.
function getScrollPercent() {
  return (
    (document.documentElement.scrollTop || document.body.scrollTop) 
    / ( (document.documentElement.scrollHeight || document.body.scrollHeight) 
    - document.documentElement.clientHeight) 
    * 100);
}

Chalarangelo

function SvgMapPin(props) {
  return React.createElement(
    'svg',
    { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: '#424242', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('path', { d: 'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z' }),
    React.createElement('circle', { cx: '12', cy: '10', r: '3' })
  );
}

Chalarangelo

function UserCard(props) {
  var user = props.user;
  return React.createElement(
    'div',
    { className: 'col-md-offset-1 col-lg-offset-2' },
    React.createElement(
      'div',
      { className: 'card fluid', id: "user_" + user.login.username },
      React.createElement(
        'div',

Chalarangelo

// Functional component for the mail icon.
function SvgMail(props){
  return <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#424242" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>;
}
// Functional component for the calendar icon.
function SvgCalendar(props){
  return <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#424242" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>;
}
// Functional component for the map pin icon.
function SvgMapPin(props){

Chalarangelo

// Send a 'GET' request to the specified url and run the callback function when it completes.
function httpGetAsync(url, callback) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
      callback(xmlHttp.responseText);
  };
  xmlHttp.open('GET', url, true);
  xmlHttp.send(null);
}