2014年11月30日日曜日

Chrome Packaged Appsとpolymer

Chrome Packaged AppsでPolymerを試してみました。

polymerのGetting Startedからstarter projectをダウンロードし、finished以下を1フォルダにまとめてmanifestとjavascriptを作成。
Chromeで起動してみるとエラーがたくさん出ますが、内容は2種類。
Failed to load chrome-extension://fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en resource: net::ERR_FAILED
core-header-panel.html:93 Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
前者はGoogle web fontのロード失敗ですが、フォントもpackageしたほうがよさそうです。
今回は、Polymerのサンプルtopekaにあるfontsフォルダをそのまま使用しました。"fonts/roboto.html"をimportするようにindex.htmlを修正します。

後者は、inlineのjavascriptがCSPにブロックされています。manifestを変更してもChrome Packaged Appsでは解除されません。
これはVulcanizeというツールで解決できるようです。
vulcanize -o build.html index.html --csp
でスクリプトをすべて取り出したbuild.html、build.jsが生成されるので、main.jsのindex.htmlを置き換えます。
"--inline"オプションをつけるとbuild.html、build.jsにすべてまとまって、他のhtml/jsファイルは不要になります。

これで、起動して操作もできるようになったのですが、下記の警告が出ています。
Resource interpreted as Font but transferred with MIME type text/plain: "chrome-extension://hlblafgdnfhkgfdmapafpleloalhpiol/fonts/RobotoDraft-Light.woff2".
検索しても分からなかったので、とりあえず次。
Chrome Mobile Appsでプロジェクト作成。

Androidエミュレータ(Genymotion)
表示・操作とも問題なし。

iOSエミュレータ
タブ下のラインがおかしい。
操作もスクロール以外ダメ。


【2014/12/13 追記】
iOSの問題は、一部解決されているようです。
https://github.com/MobileChromeApps/mobile-chrome-apps/issues/457
Polymerを0.5.2にバージョンアップして、
https://github.com/thomasmarkiewicz/webcomponentsjs/commit/4aba8eb46a9f8194feb322c2a282d10382423615
の修正を行うとエラーがなくなりました。
表示は正常、ハートマークもクリックに反応するようになりましたが、タブの切り替えはできていません。

【2014/12/14 追記】
vulcanizeのオプション"--strip"をつけるとダメ。
外すとIOSエミュレータでも正常に動作しました。

0 件のコメント:

コメントを投稿