Show useful error when service workers unavailable (#224)

Detect when service workers are not available and show a useful error. Uses the same styling that we previously used on the main editor to prevent keyboard focus trap. The main place this comes up is when using Firefox in private browsing mode, which is not currently supported (see https://bugzilla.mozilla.org/show_bug.cgi?id=1320796). Fixes #78
google · Oct 4, 2021 · 6e49bf1 · 6e49bf1
1 parent caf740c
commit 6e49bf1
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Unreleased
 
+### Added
+
+- Added an overlay that will display over the preview when we detect that
+  service workers are not available. One reason this can happen is using
+  Playground in Firefox private browsing mode, which does not support service
+  workers (https://bugzilla.mozilla.org/show_bug.cgi?id=1320796).
+
 ### Changed
 
 - Upgraded dependencies, including CodeMirror.

diff --git a/src/internal/overlay.ts b/src/internal/overlay.ts
@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {LitElement, css, html} from 'lit';
+import {customElement} from 'lit/decorators.js';
+
+/**
+ * An absolutely positioned scrim with a floating message.
+ */
+@customElement('playground-internal-overlay')
+export class PlaygroundInternalOverlay extends LitElement {
+  static override styles = css`
+    :host {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      left: 0;
+      top: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      z-index: 9;
+      background: rgba(0, 0, 0, 0.32);
+      overflow-y: auto;
+    }
+
+    #message {
+      background: #fff;
+      color: #000;
+      padding: 10px 20px;
+      border-radius: 5px;
+      box-shadow: rgba(0, 0, 0, 0.3) 0 2px 10px;
+    }
+  `;
+
+  override render() {
+    return html`<div id="message"><slot></slot></div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'playground-internal-overlay': PlaygroundInternalOverlay;
+  }
+}
diff --git a/src/playground-code-editor.ts b/src/playground-code-editor.ts
@@ -9,6 +9,7 @@ import {customElement, property, query, state} from 'lit/decorators.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {CodeMirror} from './internal/codemirror.js';
 import playgroundStyles from './playground-styles.js';
+import './internal/overlay.js';
 import type {Diagnostic} from 'vscode-languageserver';
 
 // TODO(aomarks) Could we upstream this to lit-element? It adds much stricter
@@ -48,32 +49,6 @@ export class PlaygroundCodeEditor extends LitElement {
         border-radius: inherit;
       }
 
-      #keyboardHelpScrim {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: transparent;
-        z-index: 9;
-        pointer-events: none;
-        background: rgba(0, 0, 0, 0.32);
-      }
-
-      #keyboardHelp {
-        background: #fff;
-        color: #000;
-        padding: 20px 40px;
-        border-radius: 5px;
-        font-family: sans-serif;
-        font-size: 18px;
-        line-height: 32px;
-        box-shadow: rgba(0, 0, 0, 0.3) 0 2px 10px;
-      }
-
       .CodeMirror-foldmarker {
         font-family: sans-serif;
       }
@@ -83,6 +58,12 @@ export class PlaygroundCodeEditor extends LitElement {
         color: var(--playground-code-keyword-color, #770088);
       }
 
+      #keyboardHelp {
+        font-size: 18px;
+        font-family: sans-serif;
+        padding: 10px 20px;
+      }
+
       .diagnostic {
         position: relative;
       }
@@ -255,12 +236,12 @@ export class PlaygroundCodeEditor extends LitElement {
         @keydown=${this._onKeyDown}
       >
         ${this._showKeyboardHelp
-          ? html`<div id="keyboardHelpScrim">
+          ? html`<playground-internal-overlay>
               <p id="keyboardHelp" part="dialog">
                 Press <strong>Enter</strong> to start editing<br />
                 Press <strong>Escape</strong> to exit editor
               </p>
-            </div>`
+            </playground-internal-overlay>`
           : nothing}
         ${this._cmDom}
         <div

diff --git a/src/playground-preview.ts b/src/playground-preview.ts
@@ -4,12 +4,14 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import {html, css, PropertyValues, nothing} from 'lit';
+import {html, css, PropertyValues, nothing, TemplateResult} from 'lit';
 import {customElement, property, query, state} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
 import '@material/mwc-icon-button';
 import {PlaygroundProject} from './playground-project.js';
 import '@material/mwc-linear-progress';
 import {PlaygroundConnectedElement} from './playground-connected-element.js';
+import './internal/overlay.js';
 
 /**
  * An HTML preview component consisting of an iframe and a floating reload
@@ -57,6 +59,14 @@ export class PlaygroundPreview extends PlaygroundConnectedElement {
       flex: 1;
     }
 
+    #content.error {
+      display: none;
+    }
+
+    #error {
+      padding: 0 20px;
+    }
+
     mwc-linear-progress {
       /* There is no way to directly specify the height of a linear progress
       bar, but zooming works well enough. It's 4px by default, and we want it to
@@ -114,6 +124,40 @@ export class PlaygroundPreview extends PlaygroundConnectedElement {
   @state()
   private _loadedAtLeastOnce = false;
 
+  /**
+   * An error to display instead of the iframe when something has gone wrong.
+   */
+  @state()
+  private _error?: TemplateResult;
+
+  constructor() {
+    super();
+    if (navigator.serviceWorker === undefined) {
+      this._error = html`<p>
+          <b>Sorry!</b> Preview unavailable because this browser doesn't
+          <a
+            href="https://caniuse.com/serviceworkers"
+            target="_blank"
+            rel="noopener"
+            >support</a
+          >
+          service workers.
+        </p>
+        <p>
+          <i
+            >Note: Firefox
+            <a
+              href="https://bugzilla.mozilla.org/show_bug.cgi?id=1320796"
+              target="_blank"
+              rel="noopener"
+              >doesn't</a
+            >
+            support service workers in private browsing mode.</i
+          >
+        </p> `;
+    }
+  }
+
   update(changedProperties: PropertyValues) {
     if (changedProperties.has('_project')) {
       const oldProject = changedProperties.get('_project') as PlaygroundProject;
@@ -166,7 +210,7 @@ export class PlaygroundPreview extends PlaygroundConnectedElement {
         </mwc-icon-button>
       </div>
 
-      <div id="content">
+      <div id="content" class=${classMap({error: !!this._error})}>
         <mwc-linear-progress
           aria-hidden=${this._loading ? 'false' : 'true'}
           part="preview-loading-indicator"
@@ -182,6 +226,14 @@ export class PlaygroundPreview extends PlaygroundConnectedElement {
           ?hidden=${!this._loadedAtLeastOnce}
         ></iframe>
       </div>
+
+      ${this._error
+        ? html`
+            <playground-internal-overlay id="error">
+              ${this._error}</playground-internal-overlay
+            >
+          `
+        : nothing}
     `;
   }