Using Enyo To Make Chrome Apps
Ben Combee
@unwiredben
ben.combee@lge.com
Texas GDG DevFest
July 12th, 2013
What's Enyo?
- JavaScript + CSS framework
-
Built around reusable components
-
Strong cross-platform device support
-
Designed for single-page apps
-
Large collection of ready-to-use UI widgets
-
100% free & open-source (Apache 2.0)
What's the Chrome App Store?
Where users go to get themes, extensions, and apps
Supplies all installable apps on Chrome OS
Enyo Bootplate
-
GitHub "template" repo with Enyo & common libs
-
Clone, rename, and push
-
Includes minifier to make enyo.js & app.js files
App Restrictions
-
Content Security Policy (CSP)
-
no document.write
-
no inline event handlers
-
no eval()
-
no Function() constructors
- no strings for setTimeout/setInterval
-
no inline <script> tags
On the Other Hand...
XHR fetches will work in app bundle,
unlike normal file:// XHRs
Ability to request permissions
to do lots of desktop-appy things
like USB port handling!
Adding background.js
-
For most single-page apps, can use boilerplate
- Hardest decision: default window size
Links to Other Sites
-
No default handling of off-app links
-
Use target="_blank" to push to browser
- Have a more sophisticated approach
using <webview> objects
Testing Locally
-
Go to chrome://extensions page
-
Select the "Developer Tools" checkbox at the top
-
Use "Load Unpacked Extension..." button
- Use "Reload", "Launch", and "Restart"
- Can debug with Chrome Dev Tools
Submitting to the Store
-
Submit a ZIP file of your directory, not a .crx file
-
Must contain manifest.json at root
-
Must NOT contain any other manifest.json files
-
Be ready with required images
- 128x128 icon
- 640x400 or 1280x800 screenshot
- 440x280 small tile
-
Optional smaller icons, medium + large tiles
End Result
Enyo API Viewer submitted last night!
(and a 2.2.0.1 update pushed
about 11:20AM this morning)