mirror of
https://github.com/schlagmichdoch/PairDrop.git
synced 2026-04-22 15:14:54 +08:00
Robin Linus
132 lines
5.2 KiB
Markdown
132 lines
5.2 KiB
Markdown
# Use Share With Me for [Mobile Chrome Apps](https://github.com/MobileChromeApps/mobile-chrome-apps)
|
||
|
||
## Getting started
|
||
|
||
Share With Me 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 Share With Me 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 Share With Me into your workspace
|
||
|
||
To download and preparation, follow this [guide of Share With Me](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 Share With Me 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 Share With Me 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 Share With Me.
|
||
|
||
```sh
|
||
gulp && cd platform && cca run chrome
|
||
```
|
||
|
||
or to run on Android emulator or devices
|
||
|
||
```sh
|
||
gulp && cd platform && cca run android
|
||
```
|