Loopback Polymer 크로스 브라우저 호환성

Loopback/Polymer 스타터 키트를 응용 프로그램의 시작 기지로 사용했지만 Chrome 이외의 브라우저 (Firefox/IE/Safari)에서는 작동하지 않습니다. 시동기 킷 코드의 데모는 다른 브라우저에서도 작동하므로 가능해야한다는 것을 알고 있지만 코드를 작동하는 구조로 변환하는 데 문제가 있습니다. 나는 누군가가 내 index.html에서 가지고있는 구조와 왜 작동하지 않는지에 대한 통찰력이 있는지 궁금하다. 다른 브라우저에서 내 <application-polymer> 요소 또는 기본 HTML 요소 (추가 한 경우)를 읽지 않습니다.Loopback Polymer 크로스 브라우저 호환성

webcomponents.js 파일을 가져오고 내 요소는 모두 클라이언트/요소 디렉토리 내에 있으며 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>

이 응용 프로그램의 기반으로하고있는 전체 starterkit에 대한 링크

은 여기에 있습니다 : https://github.com/klarkc/polymer-loopback-starter-kit

가 index.html을 구조 (다른 요소로부터 사용자 정의 웹 구성 요소를 가져 오려는/elements.html 대신한다 정교한 응용 프로그램에서는 비현실적인 index.html 안에 모든 것을 만들 수 있습니다.) 그래서 나는 문제점을 가지고 있습니다.

출처

2016-11-03 Adam Ross Russell

내가 가지고있는 것이 확실하지 않지만 최신 시작 키트로 보이지는 않습니다. 이제 PRPL 패턴을 따르고 시동 과정에서 나중에 많은 것을로드합니다.

브라우저를 살펴보면 브라우저가 웹 구성 요소를 지원하는지 여부에 관계없이 웹 구성 요소의 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>

나는 올바르게 실제로 사용하는 것이 좋습니다 비 크롬 브라우저

의 polyfills를 초기화하지 않는 의심 폴리머-cli를 여기

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

을 설명하는 프레임 워크를 만들 수

출처

2016-11-04 08:37:12 akc42

Loopback Polymer 크로스 브라우저 호환성

답변

관련 문제