Beispiel für das Erstellen einer Seitennavigation mit Polymer in einer Chrome App?

Question

Ich baue eine Chrome App. Ich möchte die UI mit erstellen. Ich mag die seitliche Navigation, die sie in der example web app in the docs zeigen: eine linke Navigationsleiste von Elementen, die den Inhalt im Hauptfenster ändert.

Ich habe Probleme, dies mit den Einschränkungen von Chrome Apps zu erreichen. Apps unterliegen einer strengen Content Security Policy (CSP), die die Verwendung von eval, Inline-Skripten und window.history-Operationen verbietet.

Ich habe in den letzten Stunden einige Fortschritte gemacht, aber ich habe eine Menge Probleme bekommen. Ausgehend von ihrem Democode kann ich die App dazu bringen, die Seitennavigationsleiste, aber nicht die Inhaltskarten zu rendern. Ich benutze vulcanize und , aber immer noch nicht geschafft, es zum Laufen zu bringen. Wenn es kein 404 ist (warum lädt es Dateien, wenn ich sie importiere?), Ist es eine verdächtige Warnung, die eine Zeichenfolge als Javascript ablehnt, die an die scheinbar harmlose Zeile var noop = Function(); in der Polymerbibliothek selbst gebunden scheint.

Kennt jemand grundlegende, Chrome App-freundliche Beispiele dieser Architektur, auf die sie mich verweisen können? Es scheint sehr einfach zu sein, und doch erweist es sich als schwierig.

Answer 1

Nun, Tag 2 des Kampfes führte zu einigen bescheidenen Erfolg. Ich bin jetzt in der Lage, ihre demo sidebar navigation app in einer Chrome-App anzuzeigen. Mehrere Dinge mussten geändert werden.

Erstens ist die API-Familie window.history in Chrome Apps nicht verfügbar. Daher funktioniert das <app-location>-Tag, das für das Routing verwendet wird, nicht, da es sich auf den Standort stützt und die window.history-API offensichtlich nutzt. Stattdessen habe ich dieses Tag entfernt und kann Databinding erfolgreich als Routing verwenden. Hier ist der relevante Teil von my-app.html. Die wichtigsten Dinge, die sich geändert haben, sind das Entfernen von <app-location> (das ich hier aus Gründen der Klarheit auskommentiert habe) und das Ändern der Datenbindungsattribute selected von [[page]] zu {{page}}. Die geschweifte Klammer ermöglicht Zweiwege-Bindungen. I glaube, dass dies notwendig ist, um das <iron-selector> Element zu ermöglichen, die page Variable an das <iron-pages> Element zu senden.

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

Nach dem vulcanize und crisper Prozess unten gezeigt, erlaubt dies die Navigationsleiste angezeigt werden, wenn sie als Chrome App geladen. Die Seiten selbst (wie von <iron-pages> gesteuert) würden jedoch nicht geladen. Dies geschah aufgrund der Tatsache, dass die Demo benutzerfreundlich ist, indem HTML-Imports dynamisch durchgeführt werden. Dies verwirrt die Chrome App aufgrund von Pfadproblemen (und möglicherweise Einschränkungen beim Laden von URLs - ich bin mir nicht sicher). Stattdessen werden wir sie manuell importieren. Dies ermöglicht vulcanize seine Magie zu arbeiten. Fügen Sie die folgenden Zeilen an dem Rest der Importe an der Spitze der 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"> 

Schließlich entfernen Sie die observer: '_pageChanged' und die _pageChanged Funktion selbst aus dem Skript Teil srv/my-app.html.

Wir kommen uns näher.

Chrome Apps verfügen über eine strenge Inhaltssicherheitsrichtlinie, die die Ausführung von Inline-Skripts verhindert (z. B. Skripts in <script> Tags). Polymer verwendet häufig Inline-Skripte, daher haben die Framework-Autoren ein Werkzeug bereitgestellt, um dieses Problem zu umgehen.

vulcanize geht HTML-Importanweisungen, um zu versuchen, Netzwerklasten zu reduzieren. crisper extrahiert alle Inline-Scripts und fügt sie einem einzelnen <script>-Tag mit dem Attribut src hinzu, damit es in Chrome Apps ausgeführt werden kann. Die folgende Zeile ersetzt das vorhandene index.html durch einen Safe für Chrome Apps. (Hinweis ERSETZT sein, so stellen Sie sicher, Ihre ursprüngliche index.html zuerst kopieren.)

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

Jetzt haben wir ein index.html ohne Inline-Skripte, die als Chrome-App machen kann. Ab 2016-07-30 bleiben zwei Probleme bestehen. Der erste ist, dass Polymer versucht, einen Service-Mitarbeiter zu registrieren. Öffnen Sie index.js und entfernen Sie den Anruf serviceWorker.register. Zweitens finden Sie die Definition von _boundEffect in index.js. Aus irgendeinem Grund denken Chrome-Apps, dass var noop = Function(); erfordert eval, und es führt es nicht aus. Ersetzen Sie diese Zeile durch var noop =() => {}. Dies ist im Grunde das Gleiche, aber Chrome Apps erlaubt es aus irgendeinem Grund.

Nach all dem laden Sie index.html in Ihrer Chrome App und die Demo funktioniert.

Huzzah.