jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 08:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Preload (#6062)

Browse Source
This commit is contained in:
Paulus Schoutsen 2020-05-27 12:54:52 -07:00 committed by GitHub
parent 78f5429c92
commit aa9a354746
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 43 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
demo/src/html/index.html.template
View File

@ -5,18 +5,6 @@
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" /> <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
<link rel="icon" href="/static/icons/favicon.ico" /> <link rel="icon" href="/static/icons/favicon.ico" />
<link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" /> <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" />
<link
rel="preload"
href="/static/fonts/roboto/Roboto-Regular.woff2"
as="font"
crossorigin
/>
<link
rel="preload"
href="/static/fonts/roboto/Roboto-Medium.woff2"
as="font"
crossorigin
/>
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="180x180" sizes="180x180"
@ -96,6 +84,7 @@
<div id="ha-init-skeleton"></div> <div id="ha-init-skeleton"></div>
<ha-demo></ha-demo> <ha-demo></ha-demo>
<%= renderTemplate('_js_base') %> <%= renderTemplate('_js_base') %>
<%= renderTemplate('_preload_roboto') %>
<script type="module" src="<%= latestDemoJS %>"></script> <script type="module" src="<%= latestDemoJS %>"></script>

6
src/entrypoints/core.ts
View File

@ -28,6 +28,7 @@ import { HomeAssistant } from "../types";
declare global { declare global {
interface Window { interface Window {
hassConnection: Promise<{ auth: Auth; conn: Connection }>; hassConnection: Promise<{ auth: Auth; conn: Connection }>;
hassConnectionReady?: (hassConnection: Window["hassConnection"]) => void;
} }
} }
@ -82,6 +83,11 @@ window.hassConnection = (authProm() as Promise<Auth | ExternalAuth>).then(
connProm connProm
); );
// This is set if app was somehow loaded before core.
if (window.hassConnectionReady) {
window.hassConnectionReady(window.hassConnection);
}
// Start fetching some of the data that we will need. // Start fetching some of the data that we will need.
window.hassConnection.then(({ conn }) => { window.hassConnection.then(({ conn }) => {
const noop = () => { const noop = () => {

16
src/html/_preload_roboto.html.template Normal file
View File

@ -0,0 +1,16 @@
<script>
if (navigator.userAgent.indexOf("Android") === -1 &&
navigator.userAgent.indexOf("CrOS") === -1) {
function _pf(src, type) {
const el = document.createElement("link");
el.rel = "preload";
el.as = "font";
el.type = "font/woff2";
el.href = src;
el.crossOrigin = "anonymous";
document.head.append(el);
}
_pf("/static/fonts/roboto/Roboto-Regular.woff2");
_pf("/static/fonts/roboto/Roboto-Medium.woff2");
}
</script>

13
src/html/authorize.html.template
View File

@ -3,18 +3,6 @@
<head> <head>
<title>Home Assistant</title> <title>Home Assistant</title>
<link rel="preload" href="<%= latestPageJS %>" as="script" crossorigin="use-credentials" /> <link rel="preload" href="<%= latestPageJS %>" as="script" crossorigin="use-credentials" />
<link
rel="preload"
href="/static/fonts/roboto/Roboto-Light.woff2"
as="font"
crossorigin
/>
<link
rel="preload"
href="/static/fonts/roboto/Roboto-Regular.woff2"
as="font"
crossorigin
/>
<%= renderTemplate('_header') %> <%= renderTemplate('_header') %>
<style> <style>
.content { .content {
@ -46,6 +34,7 @@
</div> </div>
<%= renderTemplate('_js_base') %> <%= renderTemplate('_js_base') %>
<%= renderTemplate('_preload_roboto') %>
<script type="module" crossorigin="use-credentials"> <script type="module" crossorigin="use-credentials">
import "<%= latestPageJS %>"; import "<%= latestPageJS %>";

20
src/html/index.html.template
View File

@ -2,18 +2,7 @@
<html> <html>
<head> <head>
<link rel="preload" href="<%= latestCoreJS %>" as="script" crossorigin="use-credentials" /> <link rel="preload" href="<%= latestCoreJS %>" as="script" crossorigin="use-credentials" />
<link <link rel="preload" href="<%= latestAppJS %>" as="script" crossorigin="use-credentials" />
rel="preload"
href="/static/fonts/roboto/Roboto-Regular.woff2"
as="font"
crossorigin
/>
<link
rel="preload"
href="/static/fonts/roboto/Roboto-Medium.woff2"
as="font"
crossorigin
/>
<%= renderTemplate('_header') %> <%= renderTemplate('_header') %>
<title>Home Assistant</title> <title>Home Assistant</title>
<link <link
@ -61,10 +50,11 @@
<home-assistant> </home-assistant> <home-assistant> </home-assistant>
<%= renderTemplate('_js_base') %> <%= renderTemplate('_js_base') %>
<%= renderTemplate('_preload_roboto') %>
<script type="module" crossorigin="use-credentials"> <script type="module" crossorigin="use-credentials">
import "<%= latestCoreJS %>"; import("<%= latestCoreJS %>");
import "<%= latestAppJS %>"; import("<%= latestAppJS %>");
window.customPanelJS = "<%= latestCustomPanelJS %>"; window.customPanelJS = "<%= latestCustomPanelJS %>";
</script> </script>
{% for extra_module in extra_modules -%} {% for extra_module in extra_modules -%}
@ -81,6 +71,8 @@
<% if (useRollup) { %> <% if (useRollup) { %>
_ls("/static/js/s.min.js").onload = function() { _ls("/static/js/s.min.js").onload = function() {
// Although core and app can load in any order, we need to
// force loading core first because it contains polyfills
return System.import("<%= es5CoreJS %>").then(function() { return System.import("<%= es5CoreJS %>").then(function() {
System.import("<%= es5AppJS %>"); System.import("<%= es5AppJS %>");
}); });

13
src/html/onboarding.html.template
View File

@ -3,18 +3,6 @@
<head> <head>
<title>Home Assistant</title> <title>Home Assistant</title>
<link rel="preload" href="<%= latestPageJS %>" as="script" crossorigin="use-credentials" /> <link rel="preload" href="<%= latestPageJS %>" as="script" crossorigin="use-credentials" />
<link
rel="preload"
href="/static/fonts/roboto/Roboto-Light.woff2"
as="font"
crossorigin
/>
<link
rel="preload"
href="/static/fonts/roboto/Roboto-Regular.woff2"
as="font"
crossorigin
/>
<%= renderTemplate('_header') %> <%= renderTemplate('_header') %>
<style> <style>
.content { .content {
@ -48,6 +36,7 @@
</div> </div>
<%= renderTemplate('_js_base') %> <%= renderTemplate('_js_base') %>
<%= renderTemplate('_preload_roboto') %>
<script type="module" crossorigin="use-credentials"> <script type="module" crossorigin="use-credentials">
import "<%= latestPageJS %>"; import "<%= latestPageJS %>";

13
src/layouts/home-assistant.ts
View File

@ -93,7 +93,18 @@ export class HomeAssistantAppEl extends HassElement {
protected async _initialize() { protected async _initialize() {
try { try {
const { auth, conn } = await window.hassConnection; let result;
if (window.hassConnection) {
result = await window.hassConnection;
} else {
// In the edge case that
result = await new Promise((resolve) => {
window.hassConnectionReady = resolve;
});
}
const { auth, conn } = result;
this._haVersion = conn.haVersion; this._haVersion = conn.haVersion;
this.initializeHass(auth, conn); this.initializeHass(auth, conn);
} catch (err) { } catch (err) {