diff --git a/demo/public/index.html b/demo/public/index.html
index fae365931d..0b3a71be97 100644
--- a/demo/public/index.html
+++ b/demo/public/index.html
@@ -2,6 +2,46 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
body {
font-family: Roboto, Noto, sans-serif;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ font-weight: 400;
+ height: 100vh;
margin: 0;
padding: 0;
}
+ #ha-init-skeleton::before {
+ display: block;
+ content: "";
+ height: 112px;
+ background-color: #2157bc;
+ }
-
+
+
+
+
diff --git a/demo/public/manifest.json b/demo/public/manifest.json
new file mode 100644
index 0000000000..a38462f2e5
--- /dev/null
+++ b/demo/public/manifest.json
@@ -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"
+}
diff --git a/demo/src/entrypoint.ts b/demo/src/entrypoint.ts
index 5541311f35..8badcf88f1 100644
--- a/demo/src/entrypoint.ts
+++ b/demo/src/entrypoint.ts
@@ -15,5 +15,3 @@ setTimeout(
import(/* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min"),
1000
);
-
-document.body.appendChild(document.createElement("ha-demo"));
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
index f3c9d9397d..598e50cdbc 100644
--- a/demo/webpack.config.js
+++ b/demo/webpack.config.js
@@ -2,6 +2,7 @@ const path = require("path");
const webpack = require("webpack");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
+const WorkboxPlugin = require("workbox-webpack-plugin");
const { babelLoaderConfig } = require("../config/babel.js");
const isProd = process.env.NODE_ENV === "production";
@@ -76,6 +77,11 @@ module.exports = {
mangle: false,
},
}),
+ // isProd &&
+ new WorkboxPlugin.GenerateSW({
+ swDest: "service_worker_es5.js",
+ importWorkboxFrom: "local",
+ }),
].filter(Boolean),
resolve: {
extensions: [".ts", ".js", ".json"],
diff --git a/src/util/register-service-worker.js b/src/util/register-service-worker.js
index 89b7d9bc0c..6b1ed8348e 100644
--- a/src/util/register-service-worker.js
+++ b/src/util/register-service-worker.js
@@ -1,8 +1,8 @@
const serviceWorkerUrl =
- __BUILD__ === "latest" ? "/service_worker.js" : "/service_worker_es5";
+ __BUILD__ === "latest" ? "/service_worker.js" : "/service_worker_es5.js";
export default () => {
- if (!("serviceWorker" in navigator) || __DEMO__) return;
+ if (!("serviceWorker" in navigator)) return;
navigator.serviceWorker.register(serviceWorkerUrl).then((reg) => {
reg.addEventListener("updatefound", () => {
diff --git a/webpack.config.js b/webpack.config.js
index 1b8b359e4f..cb618e61d3 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -167,6 +167,23 @@ function createConfig(isProdBuild, latestBuild) {
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({
swSrc: "./src/entrypoints/service-worker-bootstrap.js",
swDest: "service_worker.js",
@@ -194,23 +211,6 @@ function createConfig(isProdBuild, latestBuild) {
"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),
output: {
filename: ({ chunk }) => {