Search code examples
polymerfirefox-os

Web component in packaged web app

I'm using Polymer to create a packaged web app but it does not show the element as it should.

Here is the index.html

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
    <title>seed-element Demo</title>
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../seed-element.html">
  </head>
  <body>

    <p>An example of <code>&lt;seed-element&gt;</code>:</p>

    <button>Say Something</button>

    <seed-element author='{"name": "Lord Meowser", "image": "http://placekitten.com/g/200/300"}' fancy>
      <h2>Hello seed-element</h2>
    </seed-element>

  </body>
</html>

When I launch it with polyserve it works fine, but when I package it with a manifest and try it on FirefoxOS simulator, the component doesn't work. Is it something I have to modify in the manifest ?

Anyone can help ? I'm stuck.

Solution

  • I've found how to do. It was an CSP inline-script problem. First of all, I needed to npm install Vulcanize and Crisper to split the inline script into a file so I could use Polymer web-components inside my packaged web-app.

    vulcanize index.html --inline-script | crisper --html build.html --js build.js

    Pour les français une réponse plus complète.