Paul Em

Building a Chrome App with Polymer

In order to learn how to use polymer I decided to recreate a radio chrome app I made a couple of years ago - it needed a new fresh look anyways. This blog entry describes my expierences in building this app in a course of 3 days.

all beginnings are hard...

Ok to start off my goal was quite ambiguous: A native feeling app that runs as website, chrome app and android app. Using polymer to accomplish the native feeling part seemed like a nobrainer for me, because I am not a good designer and i didn't want to spend plenty of time on the interface, rather on learning new frameworks and build processes.

Chrome apps are quite awesome, espacially if you use the cca command line tool, so you can also build the app as android or ios app. Cca uses the crosswalk project by default, so the app will even run on older versions with really bad webviews.

Ok so the setup on paper was complete, but how to start off? I am fan of yeoman to have a good base for the project, but after installing and uninstalling serveral generators I was close to giving up. I just couldn't find a generate that would set up the project as I wanted. Either it was just a polymer project or just a chrome app project, so i ended up setting the chrome app part by hand and installing the polymer starter kit, because the build process for polymer is quite complex.

After almost whole day of setting up I was finally able to get it running on the webbrowser and as chrome app and the coding could finally begin.

polymer is awesome!

Coming from an angular.js background polymer was a bit hard to wrap my head around. EVERYTHING is a html element - whhaat?
I started of by just editing the main index.html file so the site kind of looked like I wanted. I used basically everything from the polymer starter kit and slowly my understanding of polymer began to grow.
After using just dummy data at first I began writing my own elements and once I figured it out I couldn't stop building elements.
I turned out I was thinking about html elements wrong the whole time. They are not just some wrappers to put text in, but they are objects! You don't need classes anymore, you got elements! You can pack up everything. I made some loader elements, that would get the tracklist of station you are listening to and some tracklist elements to display that.

does that even work?

So I was building the app more and more, but I was only testing in the browser because polymer starter kit comes with this nice gulp autoreload and it just makes it easy to develop.
Once I got to have a prototype running I wanted to try it as Chrome App ... and well nothing worked. Security exceptions everywhere! Packaged chrome apps have a very strict security model and don't allow any inline scripts. Well the polymer build process puts the scripts however inline by vulcanizing them (merging all elements in one file, so you don't have thousands of requests).
So I was looking for a way to get rid of all these inline scripts and after a while of searching I found crisper! So all i had to do was install gulp-crisper and add one single line to the gulpfile:

// Vulcanize imports
gulp.task('vulcanize', function () {  
  var DEST_DIR = 'dist/elements';

  return gulp.src('dist/elements/elements.vulcanized.html')
      dest: DEST_DIR,
      strip: true,
      inlineCss: false,
      inlineScripts: false
    .pipe($.crisper())  // THIS ONE!!!
    .pipe($.size({title: 'vulcanize'}));

Thanks to that I could finish up the app quite easily and publish right away. I you want to have look at the app check out the links below. Hopefully an android version is coming soon.

[Web Version] http://radio.paulem.eu/ [Chrome App] https://chrome.google.com/webstore/detail/radio-fm4/iffaiojalcfanpkgaoeppgpgaoedcdgi