index.html

<!doctype html>
<html lang="en" itemscope itemtype="http://schema.org/Event">

<head>
  <base href="{$ basepath $}">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <meta name="description" content="{$ description $}">
  <meta name="keywords" content="{$ keywords $}">
  <meta name="author" content="{$ organizer.name $}">
  <meta name="generator" content="Project Hoverboard">

  <title>{$ title $}</title>

  <link rel="canonical" href="{$ url $}">

  <link rel="icon" href="images/favicon.ico">

  <meta name="theme-color" content="{$ webapp.themeColor $}">
  <link rel="manifest" href="manifest.json">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <!-- fallback for manifest.json -->
  <meta name="application-name" content="{$ title $}">
  <!-- fallback for manifest.json -->

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="{$ title $}">

  <!-- Homescreen icons. -->
  <link rel="apple-touch-icon" href="images/manifest/icon-48.png">
  <link rel="apple-touch-icon" sizes="72x72" href="images/manifest/icon-72.png">
  <link rel="apple-touch-icon" sizes="96x96" href="images/manifest/icon-96.png">
  <link rel="apple-touch-icon" sizes="144x144" href="images/manifest/icon-144.png">
  <link rel="apple-touch-icon" sizes="192x192" href="images/manifest/icon-192.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="images/manifest/icon-144.png">
  <meta name="msapplication-TileColor" content="#00aba9">
  <meta name="msapplication-tap-highlight" content="no">

  <!-- G+ sharing meta data -->
  <meta itemprop="name" content="{$ title $}">
  <meta itemprop="description" content="{$ description $}">
  <meta itemprop="image" content="{$ image if image.startsWith('http') else (url + image) $}">
  <meta itemprop="startDate" content="{$ startDate $}">
  <meta itemprop="endDate" content="{$ endDate $}">

  <!-- Facebook sharing meta data -->
  <meta property="og:title" content="{$ title $}">
  <meta property="og:site_name" content="{$ title $}">
  <meta property="og:type" content="website">
  <meta property="og:url" content="{$ url $}">
  <meta property="og:description" content="{$ description $}">
  <meta property="og:type" content="Event">
  <meta property="og:image" content="{$ image if image.startsWith('http') else (url + image) $}">
  <meta property="og:image:type" content="image/jpeg"/>

  <!-- Twitter meta data -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:creator" content="@{$ organizer.twitter $}">
  <meta name="twitter:title" content="{$ title $}">
  <meta name="twitter:description" content="{$ description $}">
  <meta name="twitter:image" content="{$ image if image.startsWith('http') else (url + image) $}">
  <meta name="twitter:label1" value="{$ location.label $}">
  <meta name="twitter:data1" value="{$ location.name $}">
  <meta name="twitter:label2" value="">
  <meta name="twitter:data2" value="">

  <link rel="dns-prefetch" href="https://apis.google.com">
  <link rel="preconnect" href="https://www.google-analytics.com">
  <link rel="preconnect" href="https://fcm.googleapis.com">
  <link rel="preconnect" href="https://firestore.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <script>

    window.Polymer = { rootPath: '{$ basepath $}' };
    window.HOVERBOARD = { Elements: {} };

    function loadFirebaseModules(modules) {
      return Promise.all(
        modules.map((module) => new Promise((resolve, reject) => {
          const script = document.createElement('script');
          script.src = `bower_components/firebase/${module}.js`;
          script.async = false;
          script.onload = () => resolve();
          script.onerror = () => reject();
          document.head.appendChild(script);
        })));
    }

    function loadHoverboardApp() {
      requestAnimationFrame(() => {
        const app = document.createElement('hoverboard-app');
        document.body.appendChild(app);
      });
    }

    loadFirebaseModules([
      'firebase-app',
      'firebase-firestore',
      'firebase-auth',
      'firebase-messaging',
    ])
      .then(() => {
        firebase.initializeApp({
          apiKey: '{$ firebase.apiKey $}',
          authDomain: '{$ firebase.authDomain $}',
          databaseURL: '{$ firebase.databaseURL $}',
          projectId: '{$ firebase.projectId $}',
          storageBucket: '{$ firebase.storageBucket $}',
          messagingSenderId: '{$ firebase.messagingSenderId $}',
        });

        const firestore = firebase.firestore();
        firestore.settings({ timestampsInSnapshots: true });
        firebase.firestore()
          .enablePersistence({ experimentalTabSynchronization: true })
          .catch(() => {
            console.warn('DB offline support not available'); // eslint-disable-line no-console
          });

        // eslint-disable-next-line no-console
        console.log('Firebase App is ready!');
      })
      .then(() => loadHoverboardApp());

  </script>

  <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="src/hoverboard-app.html">
  <script src="scripts/service-worker-registration.js" async defer></script>

  <style>

    html, body {
      min-height: 100%;
      height: 100%;
    }

    body {
      margin: 0;
      font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 16px;
      line-height: 1.5;
    }

    *,
    *:before,
    *:after {
      box-sizing: border-box;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
    }

    /* styling for render while resources are loading */
    hoverboard-app[unresolved] {
      padding: 0 16px;
      display: block;
      line-height: 68px;
      text-align: center;
      font-weight: 600;
      letter-spacing: 0.3em;
      color: #202020;
      overflow: visible;
    }
  </style>

</head>

<body>

<!--<hoverboard-app unresolved>{$ title $}</hoverboard-app>-->

<noscript>
  Please enable JavaScript to view this website.
</noscript>

<script>
  window.performance && performance.mark && performance.mark('index.html');

  window.onload = function () {
    const indexRenderTime = window.measureDuration && window.measureDuration('index.html');
    if (indexRenderTime) {
      ga('send', 'timing', 'index.html', 'render', indexRenderTime);
    }
  };

  window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    uiActions.setAddToHomeScreen(e);
  });
</script>

</body>

</html>