Register service worker during login (#3036)

src/auth/ha-authorize.ts

@@ -1,7 +1,15 @@
 import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
-import { LitElement, html, PropertyDeclarations } from "lit-element";
+import {
+  LitElement,
+  html,
+  PropertyDeclarations,
+  PropertyValues,
+  CSSResult,
+  css,
+} from "lit-element";
 import "./ha-auth-flow";
 import { AuthProvider } from "../data/auth";
+import { registerServiceWorker } from "../util/register-service-worker";
 
 import(/* webpackChunkName: "pick-auth-provider" */ "../auth/ha-pick-auth-provider");
 
@@ -76,7 +84,6 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     );
 
     return html`
-      ${this.renderStyle()}
       <p>
         ${this.localize(
           "ui.panel.page-authorize.authorizing_client",
@@ -108,7 +115,24 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     `;
   }
 
-  public async firstUpdated() {
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this._fetchAuthProviders();
+
+    if (!this.redirectUri) {
+      return;
+    }
+
+    // If we are logging into the instance that is hosting this auth form
+    // we will register the service worker to start preloading.
+    const tempA = document.createElement("a");
+    tempA.href = this.redirectUri!;
+    if (tempA.host === location.host) {
+      registerServiceWorker(false);
+    }
+  }
+
+  private async _fetchAuthProviders() {
     // Fetch auth providers
     try {
       const response = await (window as any).providersPromise;
@@ -136,19 +160,17 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     }
   }
 
-  protected renderStyle() {
-    return html`
-      <style>
-        ha-pick-auth-provider {
-          display: block;
-          margin-top: 48px;
-        }
-      </style>
-    `;
-  }
-
   private async _handleAuthProviderPick(ev) {
     this._authProvider = ev.detail;
   }
+
+  static get styles(): CSSResult {
+    return css`
+      ha-pick-auth-provider {
+        display: block;
+        margin-top: 48px;
+      }
+    `;
+  }
 }
 customElements.define("ha-authorize", HaAuthorize);

src/onboarding/ha-onboarding.ts

@@ -14,6 +14,7 @@ import { genClientId } from "home-assistant-js-websocket";
 import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 import { OnboardingStep, onboardUserStep } from "../data/onboarding";
 import { PolymerChangedEvent } from "../polymer-types";
+import { registerServiceWorker } from "../util/register-service-worker";
 
 @customElement("ha-onboarding")
 class HaOnboarding extends litLocalizeLiteMixin(LitElement) {
@@ -122,14 +123,18 @@ class HaOnboarding extends litLocalizeLiteMixin(LitElement) {
 `;
   }
 
-  protected async firstUpdated(changedProps: PropertyValues) {
+  protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     this.addEventListener("keypress", (ev) => {
       if (ev.keyCode === 13) {
         this._submitForm();
       }
     });
+    this._fetchOnboardingSteps();
+    registerServiceWorker(false);
+  }
 
+  private async _fetchOnboardingSteps() {
     try {
       const response = await window.stepsPromise;
 

src/util/register-service-worker.ts

@@ -1,12 +1,20 @@
 const serviceWorkerUrl =
   __BUILD__ === "latest" ? "/service_worker.js" : "/service_worker_es5.js";
 
-export const registerServiceWorker = () => {
-  if (!("serviceWorker" in navigator)) return;
+export const registerServiceWorker = (notifyUpdate = true) => {
+  if (
+    !("serviceWorker" in navigator) ||
+    (location.protocol !== "https:" && location.hostname !== "localhost")
+  ) {
+    return;
+  }
 
   navigator.serviceWorker.register(serviceWorkerUrl).then((reg) => {
     reg.addEventListener("updatefound", () => {
       const installingWorker = reg.installing;
+      if (!installingWorker || !notifyUpdate) {
+        return;
+      }
       installingWorker.addEventListener("statechange", () => {
         if (
           installingWorker.state === "installed" &&