Кросс-браузерная совместимость Loopback Polymer

Я использовал стартовый комплект 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 вместо того, чтобы создавать их все внутри index.html, что нереально для сложного приложения), поэтому у меня возникают проблемы.


loopback cross-browser polymer loopbackjs polymer-starter-kit
person Adam Ross Russell    schedule 03.11.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не уверен, что у вас там, но, похоже, это не последний стартовый комплект, который, как мне кажется, теперь следует шаблону PRPL и загружает материал намного позже в цикле запуска.

Если вы посмотрите на него, он пытается динамически решить, загрузить полифил веб-компонентов, в зависимости от того, поддерживает ли браузер веб-компоненты или нет.

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

Я рекомендую на самом деле использовать полимер-cli для создания фреймворка, как описано здесь.

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

person akc42    schedule 04.11.2016