Loopback Polymer Cross-Browser Compatibility

Question

I used a Loopback/Polymer starter kit I found as a starting base for an application, but it does not seem to work on browsers other than Chrome (i.e. Firefox/IE/Safari). The demo for the starter kit code works in other browsers, so I know it must be possible, but I am having trouble converting my code into the structure that works. I am wondering if anyone would have any insight as to why it does not work with the structure I have in place from my index.html. It doesn't read my <application-polymer> element or native HTML elements (if I add them in) on the other browsers.

I have the webcomponents.js file imported in, and my elements are all inside client/element directory and linked to client/elements/elements.html. It works perfectly in Chrome, but no other browser. Please help!

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="generator" content="Application">
  <title>Site</title>

  <link rel="shortcut icon" sizes="32x32" href="/images/site-thumbnail.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

  <!-- Place favicon.ico in the `app/` directory -->

  <!-- Chrome for Android theme color -->
  <meta name="theme-color" content="#fff">

  <!-- Web Application Manifest -->
  <link rel="manifest" href="manifest.json">

  <!-- Tile color for Win8 -->
  <meta name="msapplication-TileColor" content="#3372DF">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="application-name" content="PSK">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">

  <!-- Tile icon for Win8 (144x144) -->
  <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">

  <!-- build:css styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">
  <!-- endbuild-->

  <!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"</script>
  <!-- endbuild -->

  <!-- build:js scripts/bundle.js -->
  <script src="scripts/bundle.js"></script>
  <!-- endbuild -->

  <!-- Because this project uses vulcanize this should be your only html import
       in this file. All other imports should go in elements.html -->
  <link rel="import" href="elements/elements.html">
  <!-- <link rel="import" href="elements/application-polymer.html"> -->

  <!-- For shared styles, shared-styles.html import in elements.html -->
  <style is="custom-style" include="shared-styles"></style>

  <style>

  body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    background-color: #eee;
  }

</style>
</head>

<body unresolved>
  <!-- build:remove -->
  <span id="browser-sync-binding"></span>
  <!-- endbuild -->

  <template is="dom-bind" id="app">

    <!-- <h1>HELLO</h1> -->
    <application-polymer></application-polymer>

  </template>

  <!-- build:js scripts/app.js -->
  <script src="scripts/app.js"></script>
  <!-- endbuild-->
</body>

</html>

The link to the full starterkit that this application is based off of is here: https://github.com/klarkc/polymer-loopback-starter-kit

The index.html structure is different (trying to import custom web components from elements/elements.html instead of creating them all inside the index.html which is unrealistic for a sophisticated app), which is why I am having issues.

score 0 · Answer 1 · answered Nov 04 '16 at 08:37

I'm not sure what you have there, but it doesn't appear to be the latest starter kit, which I believe now follows the PRPL pattern and loads the stuff much later in the startup cycle.

If you look at it, it tries to dynamically decide to load the web components polyfill dependant whether the browser supports web components or not.

   <script>
      // Setup Polymer options
      window.Polymer = {
        dom: 'shadow',
        lazyRegister: true
      };
      // Load webcomponentsjs polyfill if browser does not support native Web Components
      (function() {
        'use strict';
        var onload = function() {
          // For native Imports, manually fire WebComponentsReady so user code
          // can use the same code path for native and polyfill'd imports.
          if (!window.HTMLImports) {
            document.dispatchEvent(
              new CustomEvent('WebComponentsReady', {bubbles: true})
            );
          }
        };
        var webComponentsSupported = (
          'registerElement' in document
          && 'import' in document.createElement('link')
          && 'content' in document.createElement('template')
        );
        if (!webComponentsSupported) {
          var script = document.createElement('script');
          script.async = true;
          script.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js';
          script.onload = onload;
          document.head.appendChild(script);
        } else {
          onload();
        }
      })();
      // Load pre-caching Service Worker
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('service-worker.js');
        });
      }
    </script>

I suspect you are not correctly initializing the polyfills for non chrome browsers

I recommend actually using the polymer-cli from creating a framework as described here

https://www.polymer-project.org/1.0/toolbox/

Loopback Polymer Cross-Browser Compatibility

1 Answers1