Loopback Polymer 跨浏览器兼容性答案

【问题标题】：Loopback Polymer Cross-Browser CompatibilityLoopback Polymer 跨浏览器兼容性
【发布时间】：2016-11-20 17:37:53
【问题描述】：

我使用了我发现的 Loopback/Polymer 入门套件作为应用程序的起始基础，但它似乎不适用于 Chrome 以外的浏览器（即 Firefox/IE/Safari）。入门工具包代码的演示适用于其他浏览器，所以我知道它一定是可能的，但我无法将我的代码转换为有效的结构。我想知道是否有人会了解为什么它不适用于我在 index.html 中的结构。它不会在其他浏览器上读取我的 <application-polymer> 元素或原生 HTML 元素（如果我添加它们）。

我已经导入了 webcomponents.js 文件，我的元素都在 client/element 目录中并链接到 client/elements/elements.html。 它在 Chrome 中完美运行，但在其他浏览器中没有。请帮助！

<!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>

此应用程序所基于的完整入门套件的链接如下： https://github.com/klarkc/polymer-loopback-starter-kit

index.html 结构不同（尝试从 elements/elements.html 导入自定义 Web 组件，而不是在 index.html 中创建它们，这对于复杂的应用程序来说是不现实的），这就是我遇到问题的原因。

【问题讨论】：

标签： cross-browser polymer loopbackjs loopback polymer-starter-kit

【解决方案1】：

我不确定你有什么，但它似乎不是最新的入门工具包，我相信它现在遵循 PRPL 模式并在启动周期的后期加载东西。

如果你看它，它会尝试根据浏览器是否支持 web 组件来动态决定加载 web 组件 polyfill。

   <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>

我怀疑你没有正确初始化非 chrome 浏览器的 polyfills

我建议实际使用来自创建框架的聚合物 cli，如此处所述

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

【讨论】：