ChromeアプリケーションでPolymerを使用してサイドナビゲーションを設計する方法の例は？

Question

私はChromeアプリケーションを構築しています。 Polymerを使用してUIを構築したいと思います。私は、彼らがexample web app in the docsに示すサイドナビゲーションが好きです：メインウィンドウのコンテンツを変更する項目の左ナビゲーションバーです。

私は、Chrome Appsに課せられた制限を受けてこの問題を解決するのに苦労しています。 Appsは、eval、インラインスクリプト、およびwindow.historyオペレーションの使用を禁止する厳格なコンテンツセキュリティポリシー（CSP）に直面しています。

私は過去数時間にわたりいくつかの進歩を遂げましたが、多くの問題にぶつかりました。デモコードから始めて、アプリケーションにサイドナビゲーションバーを表示させることはできますが、コンテンツカードは表示されません。私はvulcanizeとcrisperを使用していますが、まだそれを稼働させることはできませんでした。それは404ではない場合（なぜ私はそれらをインポートしているファイルを読み込んでいますか？）、それはPolymerライブラリ自体で一見無害な行var noop = Function();に結び付いているように思われる "Javascriptとしてストリングを評価することを拒否されました"

私に指摘できるこのアーキテクチャの基本的なChrome App-friendly例を知っている人はいますか？それは非常に基本的なようですが、それは困難であることが証明されています。

Answer 1

まあ、苦労した2日目は、ささやかな成功を収めました。現在、demo sidebar navigation appをChromeアプリに表示できるようになりました。いくつかのことを変更しなければならなかった。

まず、window.historyのAPIファミリはChromeアプリケーションでは使用できません。その結果、ルーティングに使用する<app-location>タグは、場所に依存しており、明らかにwindow.history APIを利用しているため、機能しません。代わりに、私はそのタグを削除し、ルーティングとしてデータバインディングをうまく使用するために何らかの形で管理しています。ここにはmy-app.htmlの関連部分があります。変更された主な変更点は、<app-location>（ここではわかりやすくするためにコメントアウトしています）を削除し、[[page]]から{{page}}にselectedデータバインディング属性を変更しています。中括弧は双方向バインディングを可能にします。 I は、<iron-selector>要素がpage変数を<iron-pages>要素に送信できるようにする必要があると考えています。

<!-- <app-location route="{{route}}"></app-location> --> 
<app-route 
    route="{{page}}" 
    data="{{routeData}}" 
    tail="{{subroute}}"></app-route> 

<app-drawer-layout fullbleed> 

    <!-- Drawer content --> 
    <app-drawer> 
    <app-toolbar>Menu</app-toolbar> 
    <iron-selector selected="{{page}}" attr-for-selected="name" class="drawer-list" role="navigation"> 
     <a name="view1" >View One</a> 
     <a name="view2" >View Two</a> 
     <a name="view3" >View Three</a> 
     <a name="new-view" href="/new-view">New View</a> 
    </iron-selector> 
    </app-drawer> 

    <!-- Main content --> 
    <app-header-layout has-scrolling-region> 

    <app-header condenses reveals effects="waterfall"> 
     <app-toolbar> 
     <paper-icon-button icon="menu" drawer-toggle></paper-icon-button> 
     <div title>My App</div> 
     </app-toolbar> 
    </app-header> 

    <iron-pages role="main" selected="{{page}}" attr-for-selected="name"> 
     <my-view1 name="view1"></my-view1> 
     <my-view2 name="view2"></my-view2> 
     <my-view3 name="view3"></my-view3> 
     <my-new-view name="new-view"></my-new-view> 
    </iron-pages> 

    </app-header-layout> 

</app-drawer-layout> 

以下に示すvulcanizeとcrisper処理の後、これはChromeアプリケーションとしてロードするときナビゲーションバーを表示することができました。しかし、ページ自体（<iron-pages>によって制御される）は読み込まれません。これは、HTMLインポートを動的に実行することでデモがユーザーフレンドリーであることが原因で発生しました。これは、パスの問題（おそらくURLローディングの制限 - わからない）のためにChromeアプリケーションを混乱させます。代わりに、手動でインポートする予定です。これにより、vulcanizeはその魔法を働かせることができます。最後に、src/my-app.html

<link rel="import" href="my-view1.html"> 
<link rel="import" href="my-view2.html"> 
<link rel="import" href="my-view3.html"> 
<link rel="import" href="my-new-view.html"> 

の上部に輸入の残りの部分に以下の行を追加しますsrv/my-app.htmlのスクリプト部分からobserver: '_pageChanged'と_pageChanged機能自体を削除します。

近づいています。

Chromeアプリには、インラインスクリプト（<script>タグ内のスクリプト）の実行を妨げる厳しいコンテンツセキュリティポリシーがあります。 Polymerはインラインスクリプトを大量に使用しているため、フレームワークの作者はこの問題を回避するためのツールを提供しています。

vulcanize walks HTML読み込み文を使用してネットワークの負荷を軽減します。 crisperはすべてのインラインスクリプトを抽出し、src属性を持つ単一の<script>タグにキャッチして、Chromeアプリケーションで実行できるようにします。次の行は、既存のindex.htmlをChrome Apps用の1つのセーフに置き換えたものです。 （注あなたが最初にあなたの元index.htmlをコピーすることを確認すること、置き換えられます。）

vulcanize --inline-scripts --inline-css index.html | crisper --html index.html --js index.js

は、今、私たちはChromeアプリとしてレンダリングすることができます任意のインラインスクリプトなしindex.htmlを持っています。 2016-07-30現在、2つの問題が残っています。 1つは、Polymerがサービスワーカーを登録しようとすることです。 index.jsを開き、serviceWorker.registerコールを削除します。第二に、に_boundEffectの定義があります。なんらかの理由で、Chrome Appsはvar noop = Function();にはevalが必要と考えており、実行しません。この行をvar noop =() => {}に置き換えてください。これは基本的に同じことですが、何らかの理由でChrome Appsで許可されています。

この後、お使いのChromeアプリケーションにindex.htmlをロードし、デモが動作します。

Huzzah。