131 lines
5.2 KiB
Markdown
131 lines
5.2 KiB
Markdown
# Use Polymer Starter Kit for [Mobile Chrome Apps](https://github.com/MobileChromeApps/mobile-chrome-apps)
|
|
|
|
## Getting started
|
|
|
|
Polymer Starter Kit could be fully adapted to Mobile Chrome Apps through mobile-friendly features. Mobile Chrome Apps, is based on Apache Cordova, and requires mobile application SDKs such as Android and iOS. so please make sure that installation development tool by following [installation guide](https://github.com/MobileChromeApps/mobile-chrome-apps/blob/master/docs/Installation.md) of Mobile Chrome Apps. And then, You do some further steps to resolve some of restrictions and configurations to use Polymer Starter Kit on Cordova. Looking for a [guide video](https://www.youtube.com/watch?v=-ifgyobPLVg) below to better understand.
|
|
|
|
[](https://www.youtube.com/watch?v=-ifgyobPLVg)
|
|
|
|
## Download Polymer Starter Kit into your workspace
|
|
|
|
To download and preparation, follow this [guide of Polymer Starter Kit](https://github.com/PolymerElements/polymer-starter-kit#getting-started). Make sure that install all of dependencies of npm and Bower.
|
|
|
|
## Create a Cordova project
|
|
|
|
Create a Cordova project in path `polymer-starter-kit` by following command. `platform` is the path for Cordova project files, `com.your.app` is the project name/id and next following string is the description for your app.
|
|
|
|
```sh
|
|
cca create platform com.your.app "Your Polymer Starter Kit App"
|
|
```
|
|
|
|
If you have no problems while creating a project you will seeing the message of installing successful coming from Cordova and have the tree of the project below.
|
|
|
|
```sh
|
|
└── polymer-starter-kit
|
|
└── app
|
|
│ ├── elements
|
|
│ ├── images
|
|
│ ├── index.html
|
|
│ ├── manifest.json
|
|
│ ├── scripts
|
|
│ ├── styles
|
|
│ └── test
|
|
├── bower.json
|
|
├── bower_components
|
|
├── docs
|
|
├── gulpfile.js
|
|
├── node_modules
|
|
├── package.json
|
|
├── platform
|
|
│ ├── config.xml
|
|
│ ├── hooks
|
|
│ ├── platforms
|
|
│ ├── plugins
|
|
│ └── www
|
|
```
|
|
|
|
For further informations of Cordova, please visit [corodova document](https://github.com/MobileChromeApps/mobile-chrome-apps/tree/master/docs)
|
|
|
|
## Configuration
|
|
|
|
You need to have some changes of configuration to fit for Mobile Chrome Apps as it was mentioned above.
|
|
|
|
### Configure path for app built by gulp
|
|
|
|
- Change the path `dist` in `gulpfile.js` from `dist` to `platform/www/app`, then the app built with Polymer Starter Kit will be placed under `platform/www` will be used by Cordova.
|
|
```js
|
|
var DIST = 'platform/www/app';
|
|
```
|
|
|
|
- Change the path in `platform/www/background.js` into new path
|
|
```js
|
|
chrome.app.runtime.onLaunched.addListener(function() {
|
|
chrome.app.window.create('app/index.html', {
|
|
width: 244,
|
|
height: 380,
|
|
});
|
|
});
|
|
```
|
|
|
|
- Add path `/app` to `app.baseURL` in `app/scripts/app.js'. `platform/www` is root path of app that will prevent errors coming from page routing.
|
|
```js
|
|
app.baseUrl = '/app';
|
|
```
|
|
|
|
### Update gulp tasks
|
|
|
|
- Using `polybuild(vulcanize + crisper)` task is mandatory because of Chrome Apps doesn't allow inline script blocks according to [CSP](https://developer.chrome.com/apps/contentSecurityPolicy). You should replace current `vulcanize` task with new task below. To do this install `polybuild` first with `npm install --save-dev polybuild` command
|
|
```js
|
|
// load polybuild
|
|
var polybuild = require('polybuild');
|
|
|
|
// Vulcanize granular configuration
|
|
gulp.task('vulcanize', function() {
|
|
return gulp.src('app/elements/elements.html')
|
|
.pipe(polybuild({maximumCrush: true}))
|
|
.pipe($.rename(function(file) {
|
|
if (file.extname === '.html') {
|
|
file.basename = file.basename.replace('.build', '');
|
|
}
|
|
}))
|
|
.pipe(gulp.dest(dist('elements')))
|
|
.pipe($.size({title: 'vulcanize'}));
|
|
});
|
|
```
|
|
|
|
### More updates
|
|
|
|
- Remove useless files generated from Cordova.
|
|
```sh
|
|
rm platform/www/index.*
|
|
```
|
|
- To complete first route for `home` you need to put try/catch block into the first route code on starting app, in `app/elements/routing.html`, because Chrome Apps doesn't allow using `history` APIs which related to error message `history.pushState/replaceState is not available in packaged apps`.
|
|
```js
|
|
try {
|
|
page({
|
|
hashbang: true
|
|
});
|
|
} catch (e) {
|
|
app.route = 'home';
|
|
}
|
|
```
|
|
|
|
- Using `@import` instead of `link` to download external Google robot fonts which is related to `Refused to load the stylesheet` errors. Update code in `bower_components/font-roboto/roboto.html` to using `@import` code below
|
|
```
|
|
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic);
|
|
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,700);
|
|
```
|
|
|
|
## Build and run app
|
|
|
|
After done of above steps. run this command on root path that let you see Chrome Apps built with Polymer Starter Kit.
|
|
|
|
```sh
|
|
gulp && cd platform && cca run chrome
|
|
```
|
|
|
|
or to run on Android emulator or devices
|
|
|
|
```sh
|
|
gulp && cd platform && cca run android
|
|
```
|