如何在Chrome應用程序中使用聚合物構建側面導航的示例？

Question

我正在構建Chrome應用程序。我想用Polymer構建UI。我喜歡他們在example web app in the docs中顯示的側面導航欄：左側導航欄中用於更改主窗口內容的項目。

我很努力使這項工作符合Chrome Apps的限制。應用程序面臨嚴格的內容安全策略（CSP），禁止使用eval，內聯腳本和window.history操作。

我在過去的幾個小時裏取得了一些進展，但遇到了很多問題。從他們的演示代碼開始，我可以讓應用渲染側面導航欄，但不顯示內容卡。我正在使用vulcanize和crisper，但仍無法使其正常工作。如果它不是404（爲什麼在我導入它時加載文件？），這是一個可疑的「拒絕評估字符串爲Javascript」警告，似乎與聚合物庫本身中看起來無害的行var noop = Function();有關。

有誰知道這個架構的基本的，適用於Chrome應用的示例，他們可以指向我？這看起來很基本，但它證明很困難。

Answer 1

那麼，第2天的掙扎導致了一些小小的成功。我現在可以在Chrome應用中顯示demo sidebar navigation app。有幾件事情必須改變。

首先，window.history系列API在Chrome Apps上不可用。因此，他們用於路由的<app-location>標記不起作用，因爲它依賴於位置並顯然利用了window.history API。相反，我刪除了該標籤，並以某種方式管理成功使用數據綁定作爲路由。這裏是my-app.html的相關部分。主要的變化是刪除<app-location>（爲了清楚起見，我在這裏留下評論），並將selected數據綁定屬性從[[page]]更改爲{{page}}。花括號允許雙向綁定。 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> 

如下所示的vulcanizecrisper和處理之後，這允許當作爲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>標記中的腳本）的執行。聚合物大量使用內聯腳本，因此框架作者提供瞭解決此問題的工具。

vulcanize遍歷HTML導入語句以嘗試並減少網絡負載。 crisper提取所有內嵌腳本，並將它們捕獲到具有src屬性的單個<script>標記，從而允許其在Chrome應用中執行。以下行將現有的index.html替換爲Chrome Apps的一個保險箱。 （注REPLACES，所以請確保您複製原始index.html第一。）

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

現在我們有一個index.html沒有任何內嵌腳本，可以呈現爲Chrome應用。截至2016年7月30日，仍存在兩個問題。首先是Polymer試圖註冊一個服務工作者。打開index.js並刪除serviceWorker.register呼叫。其次，在index.js中找到_boundEffect的定義。出於某種原因，Chrome Apps認爲var noop = Function();需要eval，並且它不會執行它。將此行更換爲var noop =() => {}。這基本上是一樣的，但由於某些原因，Chrome應用程序允許它。

畢竟，在您的Chrome應用中加載index.html並且演示工作正常。

Huzzah。