generator-polymer-init-vaadin-elements-app
Version:
Progressive web application template with Polymer App Toolbox and Vaadin Elements
93 lines (76 loc) • 3.58 kB
HTML
<!--
@license
Copyright (c) 2018 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="Vaadin Elements App">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<meta name="description" content="<%= description %>">
<title><%= name %></title>
<!--
The `<base>` tag below is present to support two advanced deployment options:
1) Differential serving. 2) Serving from a non-root path (e.g., with URLs
like `my.domain/vaadin-elements-app/` and `my.domain/vaadin-elements-app/employee-list`)
Instead of manually editing the `<base>` tag yourself, you should generally either:
a) Add a `basePath` property to the build configuration in your `polymer.json`.
b) Use the `--base-path` command-line option for `polymer build`.
The `basePath` property should include leading and trailing slashes (e.g., `/vaadin-elements-app/`).
-->
<base href="/">
<link rel="icon" href="images/favicon.ico">
<!-- Web App Manifest -->
<link rel="manifest" href="manifest.json">
<!-- See https://goo.gl/qRE0vM -->
<meta name="theme-color" content="#1576f3">
<!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="<%= name %>">
<!-- 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="<%= name %>">
<!-- Homescreen icons -->
<link rel="apple-touch-icon" href="images/manifest/icon-48x48.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/manifest/icon-72x72.png">
<link rel="apple-touch-icon" sizes="96x96" href="images/manifest/icon-96x96.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/manifest/icon-144x144.png">
<link rel="apple-touch-icon" sizes="192x192" href="images/manifest/icon-192x192.png">
<!-- Tile icon for Windows 8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/manifest/icon-144x144.png">
<meta name="msapplication-TileColor" content="#1576f3">
<meta name="msapplication-tap-highlight" content="no">
<script>
window.Polymer = {rootPath: document.querySelector('base').getAttribute('href')};
// Load and register pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('service-worker.js', {
scope: Polymer.rootPath,
});
});
}
</script>
<!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<!-- Load your application shell -->
<link rel="import" href="src/<%= elementName %>.html">
<!-- Add any global styles for body, document, etc. -->
<style>
body {
margin: 0;
min-height: 100vh;
background-color: hsla(214, 57%, 24%, 0.1);
}
</style>
</head>
<body>
<<%= elementName %>></<%= elementName %>>
<noscript>
Please enable JavaScript to view this website.
</noscript>
</body>
</html>