Home-Assistant
/
frontend
mirror of https://github.com/home-assistant/frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add SW, GA, Fav Icon (#2541) 

* Add SW, GA, Fav Icon

* Add skeleton"
pull/2542/head
Paulus Schoutsen 2019-01-23 10:26:26 -08:00 committed by GitHub
parent a4680feb92
commit b8851a7f3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 122 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
demo/public/index.html
View File

@ -2,6 +2,46 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
<link rel="icon" href="/static/icons/favicon.ico" />
<link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#3fbbf4" />
<link
rel="preload"
href="/static/fonts/roboto/Roboto-Regular.ttf"
as="font"
crossorigin
/>
<link
rel="preload"
href="/static/fonts/roboto/Roboto-Medium.ttf"
as="font"
crossorigin
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/static/icons/favicon-apple-180x180.png"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="msapplication-square70x70logo"
content="/static/icons/tile-win-70x70.png"
/>
<meta
name="msapplication-square150x150logo"
content="/static/icons/tile-win-150x150.png"
/>
<meta
name="msapplication-wide310x150logo"
content="/static/icons/tile-win-310x150.png"
/>
<meta
name="msapplication-square310x310logo"
content="/static/icons/tile-win-310x310.png"
/>
<meta name="msapplication-TileColor" content="#3fbbf4ff" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="referrer" content="same-origin" />
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" content="width=device-width, initial-scale=1, shrink-to-fit=no"
@ -40,10 +80,33 @@
<style> <style>
body { body {
font-family: Roboto, Noto, sans-serif; font-family: Roboto, Noto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-weight: 400;
height: 100vh;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#ha-init-skeleton::before {
display: block;
content: "";
height: 112px;
background-color: #2157bc;
}
</style> </style>
</head> </head>
<body></body> <body>
<ha-demo><div id="ha-init-skeleton"></div></ha-demo>
<script>
var _gaq = [["_setAccount", "UA-57927901-5"], ["_trackPageview"]];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src =
("https:" == location.protocol ? "//ssl" : "//www") +
".google-analytics.com/ga.js";
s.parentNode.insertBefore(g, s);
})(document, "script");
</script>
</body>
</html> </html>

33
demo/public/manifest.json Normal file
View File

@ -0,0 +1,33 @@
{
"background_color": "#FFFFFF",
"description": "Open-source home automation platform running on Python 3.",
"dir": "ltr",
"display": "standalone",
"icons": [
{
"src": "/static/icons/favicon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/static/icons/favicon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/static/icons/favicon-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/static/icons/favicon-1024x1024.png",
"sizes": "1024x1024",
"type": "image/png"
}
],
"lang": "en-US",
"name": "Home Assistant Demo",
"short_name": "Assistant Demo",
"start_url": "/?homescreen=1",
"theme_color": "#03A9F4"
}

2
demo/src/entrypoint.ts
View File

@ -15,5 +15,3 @@ setTimeout(
import(/* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min"), import(/* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min"),
1000 1000
); );
document.body.appendChild(document.createElement("ha-demo"));

6
demo/webpack.config.js
View File

@ -2,6 +2,7 @@ const path = require("path");
const webpack = require("webpack"); const webpack = require("webpack");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin");
const WorkboxPlugin = require("workbox-webpack-plugin");
const { babelLoaderConfig } = require("../config/babel.js"); const { babelLoaderConfig } = require("../config/babel.js");
const isProd = process.env.NODE_ENV === "production"; const isProd = process.env.NODE_ENV === "production";
@ -76,6 +77,11 @@ module.exports = {
mangle: false, mangle: false,
}, },
}), }),
// isProd &&
new WorkboxPlugin.GenerateSW({
swDest: "service_worker_es5.js",
importWorkboxFrom: "local",
}),
].filter(Boolean), ].filter(Boolean),
resolve: { resolve: {
extensions: [".ts", ".js", ".json"], extensions: [".ts", ".js", ".json"],

4
src/util/register-service-worker.js
View File

@ -1,8 +1,8 @@
const serviceWorkerUrl = const serviceWorkerUrl =
__BUILD__ === "latest" ? "/service_worker.js" : "/service_worker_es5"; __BUILD__ === "latest" ? "/service_worker.js" : "/service_worker_es5.js";
export default () => { export default () => {
if (!("serviceWorker" in navigator) || __DEMO__) return; if (!("serviceWorker" in navigator)) return;
navigator.serviceWorker.register(serviceWorkerUrl).then((reg) => { navigator.serviceWorker.register(serviceWorkerUrl).then((reg) => {
reg.addEventListener("updatefound", () => { reg.addEventListener("updatefound", () => {

34
webpack.config.js
View File

@ -167,6 +167,23 @@ function createConfig(isProdBuild, latestBuild) {
return zopfli.gzip(input, compressionOptions, callback); return zopfli.gzip(input, compressionOptions, callback);
}, },
}), }),
new HtmlWebpackPlugin({
inject: false,
template: "./src/html/index.html.template",
// Default templateParameterGenerator code
// https://github.com/jantimon/html-webpack-plugin/blob/master/index.js#L719
templateParameters: (compilation, assets, option) => ({
latestBuild,
compatibility: assets.chunks.compatibility.entry,
appJS: assets.chunks.app.entry,
coreJS: assets.chunks.core.entry,
customPanelJS: assets.chunks["custom-panel"].entry,
hassIconsJS: assets.chunks["hass-icons"].entry,
}),
filename: `index.html`,
}),
generateJSPage("onboarding", latestBuild),
generateJSPage("authorize", latestBuild),
new WorkboxPlugin.InjectManifest({ new WorkboxPlugin.InjectManifest({
swSrc: "./src/entrypoints/service-worker-bootstrap.js", swSrc: "./src/entrypoints/service-worker-bootstrap.js",
swDest: "service_worker.js", swDest: "service_worker.js",
@ -194,23 +211,6 @@ function createConfig(isProdBuild, latestBuild) {
"node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Bold.ttf", "node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Bold.ttf",
}, },
}), }),
new HtmlWebpackPlugin({
inject: false,
template: "./src/html/index.html.template",
// Default templateParameterGenerator code
// https://github.com/jantimon/html-webpack-plugin/blob/master/index.js#L719
templateParameters: (compilation, assets, option) => ({
latestBuild,
compatibility: assets.chunks.compatibility.entry,
appJS: assets.chunks.app.entry,
coreJS: assets.chunks.core.entry,
customPanelJS: assets.chunks["custom-panel"].entry,
hassIconsJS: assets.chunks["hass-icons"].entry,
}),
filename: `index.html`,
}),
generateJSPage("onboarding", latestBuild),
generateJSPage("authorize", latestBuild),
].filter(Boolean), ].filter(Boolean),
output: { output: {
filename: ({ chunk }) => { filename: ({ chunk }) => {