├── resources ├── icon.png ├── splash.png ├── ios │ ├── icon │ │ ├── icon.png │ │ ├── icon-40.png │ │ ├── icon-50.png │ │ ├── icon-60.png │ │ ├── icon-72.png │ │ ├── icon-76.png │ │ ├── icon@2x.png │ │ ├── icon-40@2x.png │ │ ├── icon-50@2x.png │ │ ├── icon-60@2x.png │ │ ├── icon-60@3x.png │ │ ├── icon-72@2x.png │ │ ├── icon-76@2x.png │ │ ├── icon-small.png │ │ ├── icon-small@2x.png │ │ └── icon-small@3x.png │ └── splash │ │ ├── Default-667h.png │ │ ├── Default-736h.png │ │ ├── Default~iphone.png │ │ ├── Default@2x~iphone.png │ │ ├── Default-Portrait~ipad.png │ │ ├── Default-568h@2x~iphone.png │ │ ├── Default-Landscape-736h.png │ │ ├── Default-Landscape~ipad.png │ │ ├── Default-Portrait@2x~ipad.png │ │ └── Default-Landscape@2x~ipad.png └── android │ ├── icon │ ├── drawable-hdpi-icon.png │ ├── drawable-ldpi-icon.png │ ├── drawable-mdpi-icon.png │ ├── drawable-xhdpi-icon.png │ ├── drawable-xxhdpi-icon.png │ └── drawable-xxxhdpi-icon.png │ └── splash │ ├── drawable-land-hdpi-screen.png │ ├── drawable-land-ldpi-screen.png │ ├── drawable-land-mdpi-screen.png │ ├── drawable-port-hdpi-screen.png │ ├── drawable-port-ldpi-screen.png │ ├── drawable-port-mdpi-screen.png │ ├── drawable-land-xhdpi-screen.png │ ├── drawable-land-xxhdpi-screen.png │ ├── drawable-port-xhdpi-screen.png │ ├── drawable-port-xxhdpi-screen.png │ ├── drawable-land-xxxhdpi-screen.png │ └── drawable-port-xxxhdpi-screen.png ├── ionic.config.json ├── src ├── app │ ├── main.dev.ts │ ├── main.prod.ts │ ├── app.module.ts │ └── app.component.ts ├── theme │ ├── app.core.scss │ ├── app.ios.scss │ ├── app.wp.scss │ ├── app.md.scss │ └── variables.scss ├── pages │ └── home │ │ ├── home.html │ │ ├── home.scss │ │ └── home.ts └── index.html ├── README.md ├── .gitignore ├── tsconfig.json ├── www └── index.html ├── package.json ├── config.xml ├── hooks ├── after_prepare │ └── 010_add_platform_class.js └── README.md └── app └── pages └── home └── home.ts /resources/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/icon.png -------------------------------------------------------------------------------- /resources/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/splash.png -------------------------------------------------------------------------------- /resources/ios/icon/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/icon/icon.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/icon/icon-40.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/icon/icon-50.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/icon/icon-60.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/icon/icon-72.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/icon/icon-76.png -------------------------------------------------------------------------------- /resources/ios/icon/icon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/icon/icon@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/icon/icon-40@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-50@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/icon/icon-50@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/icon/icon-60@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/icon/icon-60@3x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-72@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/icon/icon-72@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/icon/icon-76@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/icon/icon-small.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-small@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/icon/icon-small@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-small@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/icon/icon-small@3x.png -------------------------------------------------------------------------------- /ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic2-demo-offline-mode", 3 | "app_id": "", 4 | "v2": true, 5 | "typescript": true 6 | } 7 | -------------------------------------------------------------------------------- /resources/ios/splash/Default-667h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/splash/Default-667h.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-736h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/splash/Default-736h.png -------------------------------------------------------------------------------- /resources/ios/splash/Default~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/splash/Default~iphone.png -------------------------------------------------------------------------------- /resources/ios/splash/Default@2x~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/splash/Default@2x~iphone.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-hdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/icon/drawable-hdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-ldpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/icon/drawable-ldpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-mdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/icon/drawable-mdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/icon/drawable-xhdpi-icon.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Portrait~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/splash/Default-Portrait~ipad.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xxhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/icon/drawable-xxhdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xxxhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/icon/drawable-xxxhdpi-icon.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-568h@2x~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/splash/Default-568h@2x~iphone.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Landscape-736h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/splash/Default-Landscape-736h.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Landscape~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/splash/Default-Landscape~ipad.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Portrait@2x~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/splash/Default-Portrait@2x~ipad.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Landscape@2x~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/ios/splash/Default-Landscape@2x~ipad.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-hdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/splash/drawable-land-hdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-ldpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/splash/drawable-land-ldpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-mdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/splash/drawable-land-mdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-hdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/splash/drawable-port-hdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-ldpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/splash/drawable-port-ldpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-mdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/splash/drawable-port-mdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/splash/drawable-land-xhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/splash/drawable-land-xxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/splash/drawable-port-xhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/splash/drawable-port-xxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xxxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/splash/drawable-land-xxxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xxxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgw96/ionic-offline-demo/HEAD/resources/android/splash/drawable-port-xxxhdpi-screen.png -------------------------------------------------------------------------------- /src/app/main.dev.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app.module'; 4 | 5 | platformBrowserDynamic().bootstrapModule(AppModule); -------------------------------------------------------------------------------- /src/app/main.prod.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowser } from '@angular/platform-browser'; 2 | import { enableProdMode } from '@angular/core'; 3 | 4 | import { AppModuleNgFactory } from './app.module.ngfactory'; 5 | 6 | enableProdMode(); 7 | platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); -------------------------------------------------------------------------------- /src/theme/app.core.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Shared Imports 5 | // -------------------------------------------------- 6 | // These are the imports which make up the design of this app. 7 | // By default each design mode includes these shared imports. 8 | // App Shared Sass variables belong in app.variables.scss. 9 | 10 | @import "../pages/home/home"; 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ionic Offline Demo 2 | 3 | A simple weather app with offline support. Inspired by [Sol](https://github.com/comyarzaheri/Sol). Built with [Ionic](http://ionicframework.com/docs/v2/). 4 | 5 | ## Usage 6 | 7 | Check out the [blog series](http://ionic.io) to learn how to set up this demo app, and to learn about its offline capabilities. 8 | 9 | ## Screenshot 10 | 11 | ![screenshot](https://cloud.githubusercontent.com/assets/2018508/17238325/645e0742-5520-11e6-81b5-cd713ec2e736.png) 12 | 13 | --- 14 | Created by [@drewrygh](https://twitter.com/drewrygh) 15 | -------------------------------------------------------------------------------- /src/pages/home/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 |
{{ data.location }}
8 | 9 |
10 |
11 | {{ data.tempCurrent }}° 12 |
13 |
14 | H {{ data.tempMax }}° 15 | L {{ data.tempMin }}° 16 |
17 | 18 |
19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | *.log 7 | *.tmp 8 | *.tmp.* 9 | log.txt 10 | *.sublime-project 11 | *.sublime-workspace 12 | .vscode/ 13 | npm-debug.log* 14 | 15 | .idea/ 16 | .sass-cache/ 17 | .tmp/ 18 | .versions/ 19 | coverage/ 20 | dist/ 21 | node_modules/ 22 | tmp/ 23 | temp/ 24 | hooks/ 25 | platforms/ 26 | plugins/ 27 | plugins/android.json 28 | plugins/ios.json 29 | www/ 30 | $RECYCLE.BIN/ 31 | 32 | .DS_Store 33 | Thumbs.db 34 | UserInterfaceState.xcuserstate -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicApp, IonicModule } from 'ionic-angular'; 3 | import { JsonpModule } from "@angular/http"; 4 | import { MyApp } from './app.component'; 5 | import { HomePage } from '../pages/home/home'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | MyApp, 10 | HomePage 11 | ], 12 | imports: [ 13 | IonicModule.forRoot(MyApp), 14 | JsonpModule 15 | ], 16 | bootstrap: [IonicApp], 17 | entryComponents: [ 18 | MyApp, 19 | HomePage 20 | ], 21 | providers: [] 22 | }) 23 | export class AppModule { } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "declaration": false, 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "lib": [ 8 | "dom", 9 | "es2015" 10 | ], 11 | "module": "es2015", 12 | "moduleResolution": "node", 13 | "sourceMap": true, 14 | "target": "es5" 15 | }, 16 | "include": [ 17 | "src/**/*.ts" 18 | ], 19 | "exclude": [ 20 | "node_modules" 21 | ], 22 | "compileOnSave": false, 23 | "atom": { 24 | "rewriteTsconfig": false 25 | } 26 | } -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Platform } from 'ionic-angular'; 3 | import { StatusBar } from 'ionic-native'; 4 | import { HomePage } from '../pages/home/home'; 5 | 6 | @Component({ 7 | template: '' 8 | }) 9 | export class MyApp { 10 | rootPage: any = HomePage; 11 | 12 | constructor(platform: Platform) { 13 | platform.ready().then(() => { 14 | // Okay, so the platform is ready and our plugins are available. 15 | // Here you can do any higher level native things you might need. 16 | StatusBar.styleDefault(); 17 | }); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/theme/app.ios.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Shared Variables 5 | // -------------------------------------------------- 6 | // Shared Sass variables go in the app.variables.scss file 7 | @import "app.variables"; 8 | 9 | 10 | // App iOS Variables 11 | // -------------------------------------------------- 12 | // iOS only Sass variables can go here 13 | 14 | 15 | // Ionic iOS Sass 16 | // -------------------------------------------------- 17 | // Custom App variables must be declared before importing Ionic. 18 | // Ionic will use its default values when a custom variable isn't provided. 19 | @import "ionic.ios"; 20 | 21 | 22 | // App Shared Sass 23 | // -------------------------------------------------- 24 | // All Sass files that make up this app goes into the app.core.scss file. 25 | // For simpler CSS overrides, custom app CSS must come after Ionic's CSS. 26 | @import "app.core"; 27 | 28 | 29 | // App iOS Only Sass 30 | // -------------------------------------------------- 31 | // CSS that should only apply to the iOS app 32 | -------------------------------------------------------------------------------- /src/theme/app.wp.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Shared Variables 5 | // -------------------------------------------------- 6 | // Shared Sass variables go in the app.variables.scss file 7 | @import "app.variables"; 8 | 9 | 10 | // App Windows Variables 11 | // -------------------------------------------------- 12 | // Windows only Sass variables can go here 13 | 14 | 15 | // Ionic Windows Sass 16 | // -------------------------------------------------- 17 | // Custom App variables must be declared before importing Ionic. 18 | // Ionic will use its default values when a custom variable isn't provided. 19 | @import "ionic.wp"; 20 | 21 | 22 | // App Shared Sass 23 | // -------------------------------------------------- 24 | // All Sass files that make up this app goes into the app.core.scss file. 25 | // For simpler CSS overrides, custom app CSS must come after Ionic's CSS. 26 | @import "app.core"; 27 | 28 | 29 | // App Windows Only Sass 30 | // -------------------------------------------------- 31 | // CSS that should only apply to the Windows app 32 | -------------------------------------------------------------------------------- /src/theme/app.md.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Shared Variables 5 | // -------------------------------------------------- 6 | // Shared Sass variables go in the app.variables.scss file 7 | @import "app.variables"; 8 | 9 | 10 | // App Material Design Variables 11 | // -------------------------------------------------- 12 | // Material Design only Sass variables can go here 13 | 14 | 15 | // Ionic Material Design Sass 16 | // -------------------------------------------------- 17 | // Custom App variables must be declared before importing Ionic. 18 | // Ionic will use its default values when a custom variable isn't provided. 19 | @import "ionic.md"; 20 | 21 | 22 | // App Shared Sass 23 | // -------------------------------------------------- 24 | // All Sass files that make up this app goes into the app.core.scss file. 25 | // For simpler CSS overrides, custom app CSS must come after Ionic's CSS. 26 | @import "app.core"; 27 | 28 | 29 | // App Material Design Only Sass 30 | // -------------------------------------------------- 31 | // CSS that should only apply to the Material Design app 32 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ionic App 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /www/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ionic App 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "build": "ionic-app-scripts build", 4 | "watch": "ionic-app-scripts watch", 5 | "serve:before": "watch", 6 | "emulate:before": "build", 7 | "deploy:before": "build", 8 | "build:before": "build", 9 | "run:before": "build" 10 | }, 11 | "dependencies": { 12 | "@angular/common": "2.1.1", 13 | "@angular/compiler": "2.1.1", 14 | "@angular/compiler-cli": "2.1.1", 15 | "@angular/core": "2.1.1", 16 | "@angular/forms": "2.1.1", 17 | "@angular/http": "2.1.1", 18 | "@angular/platform-browser": "2.1.1", 19 | "@angular/platform-browser-dynamic": "2.1.1", 20 | "@angular/platform-server": "2.1.1", 21 | "@ionic/storage": "1.1.6", 22 | "ionic-angular": "2.0.0-rc.2", 23 | "ionic-native": "2.2.3", 24 | "ionicons": "3.0.0", 25 | "rxjs": "5.0.0-beta.12", 26 | "zone.js": "0.6.21" 27 | }, 28 | "devDependencies": { 29 | "@ionic/app-scripts": "0.0.39", 30 | "typescript": "2.0.6" 31 | }, 32 | "cordovaPlugins": [ 33 | "cordova-plugin-device", 34 | "cordova-plugin-console", 35 | "cordova-plugin-whitelist", 36 | "cordova-plugin-splashscreen", 37 | "cordova-plugin-statusbar", 38 | "ionic-plugin-keyboard" 39 | ], 40 | "cordovaPlatforms": [ 41 | "ios", 42 | { 43 | "platform": "ios", 44 | "version": "", 45 | "locator": "ios" 46 | } 47 | ], 48 | "name": "ionic-offline-demo", 49 | "description": "Ionic Offline Demo: Learn how to create an app with offline mode support" 50 | } 51 | -------------------------------------------------------------------------------- /src/pages/home/home.scss: -------------------------------------------------------------------------------- 1 | .home { 2 | 3 | background: -moz-linear-gradient(90deg, #85DDF8 0%, #0095F9 100%); /* ff3.6+ */ 4 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0095F9), color-stop(100%, #85DDF8)); /* safari4+,chrome */ 5 | background: -webkit-linear-gradient(90deg, #85DDF8 0%, #0095F9 100%); /* safari5.1+,chrome10+ */ 6 | background: -o-linear-gradient(90deg, #85DDF8 0%, #0095F9 100%); /* opera 11.10+ */ 7 | background: -ms-linear-gradient(90deg, #85DDF8 0%, #0095F9 100%); /* ie10+ */ 8 | background: linear-gradient(0deg, #85DDF8 0%, #0095F9 100%); /* w3c */ 9 | 10 | ion-icon[name="wifi"] {font-size: 5em; color: #fff; } 11 | ion-icon {font-size: 12em; color: #fff; margin-bottom: 90px;} 12 | 13 | .weather { 14 | height: 100%; 15 | display: flex; 16 | text-align: center; 17 | align-items: center; 18 | justify-content: center; 19 | flex-direction: column; 20 | 21 | .city { 22 | font-size: 1.1em; 23 | font-weight: 400; 24 | line-height: 30px; 25 | height: 30px; 26 | vertical-align: middle; 27 | color: #fff; 28 | } 29 | 30 | .weather-data { 31 | padding-bottom: 5px; 32 | background-color: #81D2FA; 33 | width: 100%; 34 | } 35 | 36 | ion-segment { 37 | position: absolute; 38 | top: 0; 39 | } 40 | 41 | .temp-current { 42 | font-size: 4em; 43 | font-weight: 100; 44 | vertical-align: middle; 45 | color: #fff; 46 | } 47 | 48 | .temp-high-low { 49 | font-size: 1.3em; 50 | font-weight: 300; 51 | vertical-align: middle; 52 | color: #fff; 53 | span { 54 | margin: 0 3px; 55 | } 56 | } 57 | 58 | } 59 | 60 | } 61 | -------------------------------------------------------------------------------- /config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | ionic-offline-demo 4 | Ionic Offline Demo: Learn how to create an app with offline mode support 5 | Drew Rygh 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /src/theme/variables.scss: -------------------------------------------------------------------------------- 1 | // Ionic Variables and Theming. For more info, please see: 2 | // http://ionicframework.com/docs/v2/theming/ 3 | @import "ionic.globals"; 4 | 5 | 6 | // Shared Variables 7 | // -------------------------------------------------- 8 | // To customize the look and feel of this app, you can override 9 | // the Sass variables found in Ionic's source scss files. 10 | // To view all the possible Ionic variables, see: 11 | // http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/ 12 | 13 | $text-color: #000; 14 | $background-color: #fff; 15 | 16 | 17 | // Named Color Variables 18 | // -------------------------------------------------- 19 | // Named colors makes it easy to reuse colors on various components. 20 | // It's highly recommended to change the default colors 21 | // to match your app's branding. Ionic uses a Sass map of 22 | // colors so you can add, rename and remove colors as needed. 23 | // The "primary" color is the only required color in the map. 24 | 25 | $colors: ( 26 | primary: #387ef5, 27 | secondary: #32db64, 28 | danger: #f53d3d, 29 | light: #f4f4f4, 30 | dark: #222 31 | ); 32 | 33 | 34 | // App iOS Variables 35 | // -------------------------------------------------- 36 | // iOS only Sass variables can go here 37 | 38 | 39 | 40 | 41 | // App Material Design Variables 42 | // -------------------------------------------------- 43 | // Material Design only Sass variables can go here 44 | 45 | 46 | 47 | 48 | // App Windows Variables 49 | // -------------------------------------------------- 50 | // Windows only Sass variables can go here 51 | 52 | 53 | 54 | 55 | // App Theme 56 | // -------------------------------------------------- 57 | // Ionic apps can have different themes applied, which can 58 | // then be future customized. This import comes last 59 | // so that the above variables are used and Ionic's 60 | // default are overridden. 61 | 62 | @import "ionic.theme.default"; 63 | 64 | 65 | // Ionicons 66 | // -------------------------------------------------- 67 | // The premium icon font for Ionic. For more info, please see: 68 | // http://ionicframework.com/docs/v2/ionicons/ 69 | 70 | $ionicons-font-path: "../assets/fonts"; 71 | @import "ionicons"; 72 | -------------------------------------------------------------------------------- /hooks/after_prepare/010_add_platform_class.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | // Add Platform Class 4 | // v1.0 5 | // Automatically adds the platform class to the body tag 6 | // after the `prepare` command. By placing the platform CSS classes 7 | // directly in the HTML built for the platform, it speeds up 8 | // rendering the correct layout/style for the specific platform 9 | // instead of waiting for the JS to figure out the correct classes. 10 | 11 | var fs = require('fs'); 12 | var path = require('path'); 13 | 14 | var rootdir = process.argv[2]; 15 | 16 | function addPlatformBodyTag(indexPath, platform) { 17 | // add the platform class to the body tag 18 | try { 19 | var platformClass = 'platform-' + platform; 20 | var cordovaClass = 'platform-cordova platform-webview'; 21 | 22 | var html = fs.readFileSync(indexPath, 'utf8'); 23 | 24 | var bodyTag = findBodyTag(html); 25 | if(!bodyTag) return; // no opening body tag, something's wrong 26 | 27 | if(bodyTag.indexOf(platformClass) > -1) return; // already added 28 | 29 | var newBodyTag = bodyTag; 30 | 31 | var classAttr = findClassAttr(bodyTag); 32 | if(classAttr) { 33 | // body tag has existing class attribute, add the classname 34 | var endingQuote = classAttr.substring(classAttr.length-1); 35 | var newClassAttr = classAttr.substring(0, classAttr.length-1); 36 | newClassAttr += ' ' + platformClass + ' ' + cordovaClass + endingQuote; 37 | newBodyTag = bodyTag.replace(classAttr, newClassAttr); 38 | 39 | } else { 40 | // add class attribute to the body tag 41 | newBodyTag = bodyTag.replace('>', ' class="' + platformClass + ' ' + cordovaClass + '">'); 42 | } 43 | 44 | html = html.replace(bodyTag, newBodyTag); 45 | 46 | fs.writeFileSync(indexPath, html, 'utf8'); 47 | 48 | process.stdout.write('add to body class: ' + platformClass + '\n'); 49 | } catch(e) { 50 | process.stdout.write(e); 51 | } 52 | } 53 | 54 | function findBodyTag(html) { 55 | // get the body tag 56 | try{ 57 | return html.match(/])(.*?)>/gi)[0]; 58 | }catch(e){} 59 | } 60 | 61 | function findClassAttr(bodyTag) { 62 | // get the body tag's class attribute 63 | try{ 64 | return bodyTag.match(/ class=["|'](.*?)["|']/gi)[0]; 65 | }catch(e){} 66 | } 67 | 68 | if (rootdir) { 69 | 70 | // go through each of the platform directories that have been prepared 71 | var platforms = (process.env.CORDOVA_PLATFORMS ? process.env.CORDOVA_PLATFORMS.split(',') : []); 72 | 73 | for(var x=0; x { 35 | this.storage.executeSql(`create table if not exists forecasts( 36 | date CHAR(5) PRIMARY KEY, 37 | location CHAR(40), 38 | icon CHAR(30), 39 | tempCurrent INT, 40 | tempMin INT, 41 | tempMax INT 42 | ))`, {}); 43 | }); 44 | 45 | this.getForecast(this.getToday()).then((data) => { 46 | if (data) { 47 | // obtained forecast from database 48 | this.data = data; 49 | } else { 50 | // could not get forecast from database, go to network 51 | this.fetchForecasts(); 52 | } 53 | }); 54 | 55 | } 56 | 57 | handleError(error: any) { 58 | console.log('error', error); 59 | let errMsg = (error.message) ? error.message : 60 | error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 61 | console.error(errMsg); 62 | return Observable.throw(errMsg); 63 | } 64 | 65 | // NETWORK 66 | 67 | fetchForecasts() { 68 | 69 | this.fetchCoordinates() 70 | .then((coords) => { 71 | this.data.coords = coords; 72 | // return this.fetchCityStateName(coords.latitude, coords.longitude); 73 | }) 74 | .then((locationName) => { 75 | this.data.location = locationName; 76 | this.fetchWeatherData(this.data.coords.latitude, this.data.coords.longitude) 77 | .subscribe( 78 | data => this.data = data[0], 79 | error => this.errorMessage = error); 80 | }); 81 | } 82 | 83 | fetchWeatherData(lat, long) { 84 | let url = `${this.weatherApiUrl}${this.weatherApiKey}/${lat},${long}?callback=JSONP_CALLBACK`; 85 | return this.jsonp.get(url) 86 | .map(this.formatWeatherData) 87 | // .map(this.saveForecasts) 88 | .catch(this.handleError); 89 | } 90 | 91 | fetchCoordinates() { 92 | return Geolocation.getCurrentPosition().then((data) => { 93 | this.ionicStorage.set('latitude', data.coords.latitude); 94 | this.ionicStorage.set('longitude', data.coords.longitude); 95 | return data.coords; 96 | }, (err) => { 97 | console.log('positionError', err); 98 | }); 99 | } 100 | 101 | fetchCityStateName(lat, long) { 102 | let url = `${this.mapsApiUrl}?latlng=${lat},${long}&key=${this.mapsApiKey}`; 103 | let city: string; 104 | let state: string; 105 | this.http.get(url) 106 | .map(res => { 107 | return res.json(); 108 | }) 109 | .subscribe( 110 | data => { 111 | data.results[0].address_components.map((item) => { 112 | if (item.types[0] === "locality") { 113 | city = item.long_name; 114 | } 115 | if (item.types[0] === "administrative_area_level_1") { 116 | state = item.short_name; 117 | } 118 | }); 119 | let location = `${city}, ${state}`; 120 | this.data.location = location; 121 | this.saveLocation(location); 122 | } 123 | ); 124 | } 125 | 126 | // DATABASE 127 | 128 | saveLocation(location: string) { 129 | this.ionicStorage.set('location', location); 130 | } 131 | 132 | getLocation() { 133 | return this.ionicStorage.get('location').then((location) => { 134 | return location; 135 | }); 136 | } 137 | 138 | getForecast(date: string) { 139 | return this.storage.executeSql("SELECT * FROM forecasts WHERE date = ?", { date }).then((resp) => { 140 | if (resp.res.rows.length > 0) { 141 | for (var i = 0; i < resp.res.rows.length; i++) { 142 | let item = resp.res.rows.item(i); 143 | return item; 144 | } 145 | } 146 | }); 147 | } 148 | 149 | 150 | saveForecasts = (forecasts) => { 151 | let query = "INSERT OR REPLACE INTO forecasts VALUES (?, ?, ?, ?, ?, ?)"; 152 | for (let forecast of forecasts) { 153 | this.storage.executeSql(query, [ 154 | forecast.date, 155 | forecast.location, 156 | forecast.icon, 157 | forecast.tempCurrent, 158 | forecast.tempMin, 159 | forecast.tempMax 160 | ]); 161 | } 162 | return forecasts; 163 | } 164 | 165 | 166 | // UTILITY 167 | 168 | formatWeatherData = (res: Response) => { 169 | let body = res.json(); 170 | 171 | // format today's weather data 172 | let icon = this.getIoniconName(body.currently.icon); 173 | let date = this.dateFromTimestamp(body.currently.time); 174 | let formattedData = [ 175 | { 176 | 'date': date, 177 | 'location': this.data.location, 178 | 'icon': icon, 179 | 'tempCurrent': Math.round(body.currently.temperature), 180 | 'tempMin': Math.round(body.daily.data[0].temperatureMin), 181 | 'tempMax': Math.round(body.daily.data[0].temperatureMax) 182 | } 183 | ]; 184 | 185 | // format this week's weather data 186 | for (let item of body.daily.data.slice(1)) { 187 | let icon = this.getIoniconName(item.icon); 188 | let date = this.dateFromTimestamp(item.time); 189 | formattedData.push({ 190 | 'date': date, 191 | 'location': this.data.location, 192 | 'icon': icon, 193 | 'tempCurrent': Math.round((item.temperatureMin + item.temperatureMax) / 2), 194 | 'tempMin': Math.round(item.temperatureMin), 195 | 'tempMax': Math.round(item.temperatureMax) 196 | }); 197 | } 198 | return formattedData || []; 199 | } 200 | 201 | getIoniconName(forecastIconName) { 202 | return { 203 | 'clear-day': 'sunny', 204 | 'clear-night': 'moon', 205 | 'rain': 'rainy', 206 | 'snow': 'snow', 207 | 'sleet': 'snow', 208 | 'wind': 'cloudy', 209 | 'fog': 'cloud', 210 | 'cloudy': 'cloud', 211 | 'partly-cloudy-day': 'partly-sunny', 212 | 'partly-cloudy-night': 'cloudy-night' 213 | }[forecastIconName]; 214 | } 215 | 216 | // DATES 217 | 218 | getToday() { 219 | let timestamp = (Date.now() / 1000); 220 | return this.dateFromTimestamp(timestamp); 221 | } 222 | 223 | dateFromTimestamp(timestamp: number) { 224 | let date = new Date(timestamp * 1000); 225 | return date.getMonth().toString() + '/' + date.getDate().toString(); 226 | } 227 | 228 | } -------------------------------------------------------------------------------- /src/pages/home/home.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | import { NavController } from 'ionic-angular'; 3 | import { Http, Response, Headers } from '@angular/http'; 4 | import { URLSearchParams, Jsonp } from '@angular/http'; 5 | import { Observable } from 'rxjs/Observable'; 6 | import { Geolocation } from 'ionic-native'; 7 | import { Storage } from '@ionic/storage'; 8 | // [Step 1 - Using SQLite] 9 | // import { SQLite } from 'ionic-native'; 10 | import 'rxjs/add/operator/map'; 11 | import 'rxjs/add/operator/catch'; 12 | 13 | @Component({ 14 | selector: 'home-page', 15 | templateUrl: 'home.html' 16 | }) 17 | export class HomePage { 18 | 19 | public data: any; 20 | public errorMessage: any; 21 | public storage: SQLite; 22 | public ionicStorage: Storage; 23 | private mapsApiUrl: string = "https://maps.googleapis.com/maps/api/geocode/json"; 24 | private mapsApiKey: string = "AIzaSyC_BzkNOG-dUL7jsCPXnrS5D-cFTaEcrZE"; 25 | private weatherApiUrl: string = "https://api.forecast.io/forecast/"; 26 | private weatherApiKey: string = "44e49e44a5eb1237bffcfb78aa33ffbb"; 27 | 28 | constructor(private _navController: NavController, private jsonp: Jsonp, private http: Http) { 29 | 30 | this.data = {}; 31 | // [Step 2 - Creating Tables] 32 | /*this.storage = new SQLite(); 33 | this.storage.openDatabase({ 34 | name: 'ionic.offline', 35 | location: 'default' 36 | }).then(() => { 37 | this.storage.executeSql(`create table if not exists forecasts( 38 | date CHAR(5) PRIMARY KEY, 39 | location CHAR(40), 40 | icon CHAR(30), 41 | tempCurrent INT, 42 | tempMin INT, 43 | tempMax INT 44 | ))`, {}); 45 | });*/ 46 | 47 | // [Step 5 - Tying it Together] 48 | /*this.getForecast(this.getToday()).then((data) => { 49 | if (data) { 50 | // obtained forecast from database 51 | this.data = data; 52 | } else { 53 | // could not get forecast from database, go to network 54 | this.fetchForecasts(); 55 | } 56 | });*/ 57 | 58 | } 59 | 60 | handleError(error: any) { 61 | console.log('error', error); 62 | let errMsg = (error.message) ? error.message : 63 | error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 64 | console.error(errMsg); 65 | return Observable.throw(errMsg); 66 | } 67 | 68 | // NETWORK 69 | 70 | fetchForecasts() { 71 | 72 | this.fetchCoordinates() 73 | .then((coords) => { 74 | this.data.coords = coords; 75 | // return this.fetchCityStateName(coords.latitude, coords.longitude); 76 | }) 77 | .then((locationName) => { 78 | this.data.location = locationName; 79 | this.fetchWeatherData(this.data.coords.latitude, this.data.coords.longitude) 80 | .subscribe( 81 | data => this.data = data[0], 82 | error => this.errorMessage = error); 83 | }); 84 | } 85 | 86 | fetchWeatherData(lat, long) { 87 | let url = `${this.weatherApiUrl}${this.weatherApiKey}/${lat},${long}?callback=JSONP_CALLBACK`; 88 | return this.jsonp.get(url) 89 | .map(this.formatWeatherData) 90 | // .map(this.saveForecasts) 91 | .catch(this.handleError); 92 | } 93 | 94 | fetchCoordinates() { 95 | return Geolocation.getCurrentPosition().then((data) => { 96 | this.ionicStorage.set('latitude', data.coords.latitude); 97 | this.ionicStorage.set('longitude', data.coords.longitude); 98 | return data.coords; 99 | }, (err) => { 100 | console.log('positionError', err); 101 | }); 102 | } 103 | 104 | fetchCityStateName(lat, long) { 105 | let url = `${this.mapsApiUrl}?latlng=${lat},${long}&key=${this.mapsApiKey}`; 106 | let city: string; 107 | let state: string; 108 | this.http.get(url) 109 | .map(res => { 110 | return res.json(); 111 | }) 112 | .subscribe( 113 | data => { 114 | data.results[0].address_components.map((item) => { 115 | if (item.types[0] === "locality") { 116 | city = item.long_name; 117 | } 118 | if (item.types[0] === "administrative_area_level_1") { 119 | state = item.short_name; 120 | } 121 | }); 122 | let location = `${city}, ${state}`; 123 | this.data.location = location; 124 | this.saveLocation(location); 125 | } 126 | ); 127 | } 128 | 129 | // DATABASE 130 | 131 | saveLocation(location: string) { 132 | this.ionicStorage.set('location', location); 133 | } 134 | 135 | getLocation() { 136 | return this.ionicStorage.get('location').then((location) => { 137 | return location; 138 | }); 139 | } 140 | 141 | // [Step 4 - Retrieving Data] 142 | /*getForecast(date: string) { 143 | return this.storage.executeSql("SELECT * FROM forecasts WHERE date = ?", { date }).then((resp) => { 144 | if (resp.res.rows.length > 0) { 145 | for (var i = 0; i < resp.res.rows.length; i++) { 146 | let item = resp.res.rows.item(i); 147 | return item; 148 | } 149 | } 150 | }); 151 | }*/ 152 | 153 | 154 | // [Step 3 - Saving Data] 155 | /*saveForecasts = (forecasts) => { 156 | let query = "INSERT OR REPLACE INTO forecasts VALUES (?, ?, ?, ?, ?, ?)"; 157 | for (let forecast of forecasts) { 158 | this.storage.executeSql(query, [ 159 | forecast.date, 160 | forecast.location, 161 | forecast.icon, 162 | forecast.tempCurrent, 163 | forecast.tempMin, 164 | forecast.tempMax 165 | ]); 166 | } 167 | return forecasts; 168 | }*/ 169 | 170 | 171 | // UTILITY 172 | 173 | formatWeatherData = (res: Response) => { 174 | let body = res.json(); 175 | 176 | // format today's weather data 177 | let icon = this.getIoniconName(body.currently.icon); 178 | let date = this.dateFromTimestamp(body.currently.time); 179 | let formattedData = [ 180 | { 181 | 'date': date, 182 | 'location': this.data.location, 183 | 'icon': icon, 184 | 'tempCurrent': Math.round(body.currently.temperature), 185 | 'tempMin': Math.round(body.daily.data[0].temperatureMin), 186 | 'tempMax': Math.round(body.daily.data[0].temperatureMax) 187 | } 188 | ]; 189 | 190 | // format this week's weather data 191 | for (let item of body.daily.data.slice(1)) { 192 | let icon = this.getIoniconName(item.icon); 193 | let date = this.dateFromTimestamp(item.time); 194 | formattedData.push({ 195 | 'date': date, 196 | 'location': this.data.location, 197 | 'icon': icon, 198 | 'tempCurrent': Math.round((item.temperatureMin + item.temperatureMax) / 2), 199 | 'tempMin': Math.round(item.temperatureMin), 200 | 'tempMax': Math.round(item.temperatureMax) 201 | }); 202 | } 203 | return formattedData || []; 204 | } 205 | 206 | getIoniconName(forecastIconName) { 207 | return { 208 | 'clear-day': 'sunny', 209 | 'clear-night': 'moon', 210 | 'rain': 'rainy', 211 | 'snow': 'snow', 212 | 'sleet': 'snow', 213 | 'wind': 'cloudy', 214 | 'fog': 'cloud', 215 | 'cloudy': 'cloud', 216 | 'partly-cloudy-day': 'partly-sunny', 217 | 'partly-cloudy-night': 'cloudy-night' 218 | }[forecastIconName]; 219 | } 220 | 221 | // DATES 222 | 223 | getToday() { 224 | let timestamp = (Date.now() / 1000); 225 | return this.dateFromTimestamp(timestamp); 226 | } 227 | 228 | dateFromTimestamp(timestamp: number) { 229 | let date = new Date(timestamp * 1000); 230 | return date.getMonth().toString() + '/' + date.getDate().toString(); 231 | } 232 | 233 | } 234 | -------------------------------------------------------------------------------- /hooks/README.md: -------------------------------------------------------------------------------- 1 | 21 | # Cordova Hooks 22 | 23 | Cordova Hooks represent special scripts which could be added by application and plugin developers or even by your own build system to customize cordova commands. Hook scripts could be defined by adding them to the special predefined folder (`/hooks`) or via configuration files (`config.xml` and `plugin.xml`) and run serially in the following order: 24 | * Application hooks from `/hooks`; 25 | * Application hooks from `config.xml`; 26 | * Plugin hooks from `plugins/.../plugin.xml`. 27 | 28 | __Remember__: Make your scripts executable. 29 | 30 | __Note__: `.cordova/hooks` directory is also supported for backward compatibility, but we don't recommend using it as it is deprecated. 31 | 32 | ## Supported hook types 33 | The following hook types are supported: 34 | 35 | after_build/ 36 | after_compile/ 37 | after_docs/ 38 | after_emulate/ 39 | after_platform_add/ 40 | after_platform_rm/ 41 | after_platform_ls/ 42 | after_plugin_add/ 43 | after_plugin_ls/ 44 | after_plugin_rm/ 45 | after_plugin_search/ 46 | after_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed 47 | after_prepare/ 48 | after_run/ 49 | after_serve/ 50 | before_build/ 51 | before_compile/ 52 | before_docs/ 53 | before_emulate/ 54 | before_platform_add/ 55 | before_platform_rm/ 56 | before_platform_ls/ 57 | before_plugin_add/ 58 | before_plugin_ls/ 59 | before_plugin_rm/ 60 | before_plugin_search/ 61 | before_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed 62 | before_plugin_uninstall/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being uninstalled 63 | before_prepare/ 64 | before_run/ 65 | before_serve/ 66 | pre_package/ <-- Windows 8 and Windows Phone only. 67 | 68 | ## Ways to define hooks 69 | ### Via '/hooks' directory 70 | To execute custom action when corresponding hook type is fired, use hook type as a name for a subfolder inside 'hooks' directory and place you script file here, for example: 71 | 72 | # script file will be automatically executed after each build 73 | hooks/after_build/after_build_custom_action.js 74 | 75 | 76 | ### Config.xml 77 | 78 | Hooks can be defined in project's `config.xml` using `` elements, for example: 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | ... 89 | 90 | 91 | 92 | 93 | 94 | 95 | ... 96 | 97 | 98 | ### Plugin hooks (plugin.xml) 99 | 100 | As a plugin developer you can define hook scripts using `` elements in a `plugin.xml` like that: 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | ... 109 | 110 | 111 | `before_plugin_install`, `after_plugin_install`, `before_plugin_uninstall` plugin hooks will be fired exclusively for the plugin being installed/uninstalled. 112 | 113 | ## Script Interface 114 | 115 | ### Javascript 116 | 117 | If you are writing hooks in Javascript you should use the following module definition: 118 | ```javascript 119 | module.exports = function(context) { 120 | ... 121 | } 122 | ``` 123 | 124 | You can make your scipts async using Q: 125 | ```javascript 126 | module.exports = function(context) { 127 | var Q = context.requireCordovaModule('q'); 128 | var deferral = new Q.defer(); 129 | 130 | setTimeout(function(){ 131 | console.log('hook.js>> end'); 132 | deferral.resolve(); 133 | }, 1000); 134 | 135 | return deferral.promise; 136 | } 137 | ``` 138 | 139 | `context` object contains hook type, executed script full path, hook options, command-line arguments passed to Cordova and top-level "cordova" object: 140 | ```json 141 | { 142 | "hook": "before_plugin_install", 143 | "scriptLocation": "c:\\script\\full\\path\\appBeforePluginInstall.js", 144 | "cmdLine": "The\\exact\\command\\cordova\\run\\with arguments", 145 | "opts": { 146 | "projectRoot":"C:\\path\\to\\the\\project", 147 | "cordova": { 148 | "platforms": ["wp8"], 149 | "plugins": ["com.plugin.withhooks"], 150 | "version": "0.21.7-dev" 151 | }, 152 | "plugin": { 153 | "id": "com.plugin.withhooks", 154 | "pluginInfo": { 155 | ... 156 | }, 157 | "platform": "wp8", 158 | "dir": "C:\\path\\to\\the\\project\\plugins\\com.plugin.withhooks" 159 | } 160 | }, 161 | "cordova": {...} 162 | } 163 | 164 | ``` 165 | `context.opts.plugin` object will only be passed to plugin hooks scripts. 166 | 167 | You can also require additional Cordova modules in your script using `context.requireCordovaModule` in the following way: 168 | ```javascript 169 | var Q = context.requireCordovaModule('q'); 170 | ``` 171 | 172 | __Note__: new module loader script interface is used for the `.js` files defined via `config.xml` or `plugin.xml` only. 173 | For compatibility reasons hook files specified via `/hooks` folders are run via Node child_process spawn, see 'Non-javascript' section below. 174 | 175 | ### Non-javascript 176 | 177 | Non-javascript scripts are run via Node child_process spawn from the project's root directory and have the root directory passes as the first argument. All other options are passed to the script using environment variables: 178 | 179 | * CORDOVA_VERSION - The version of the Cordova-CLI. 180 | * CORDOVA_PLATFORMS - Comma separated list of platforms that the command applies to (e.g.: android, ios). 181 | * CORDOVA_PLUGINS - Comma separated list of plugin IDs that the command applies to (e.g.: org.apache.cordova.file, org.apache.cordova.file-transfer) 182 | * CORDOVA_HOOK - Path to the hook that is being executed. 183 | * CORDOVA_CMDLINE - The exact command-line arguments passed to cordova (e.g.: cordova run ios --emulate) 184 | 185 | If a script returns a non-zero exit code, then the parent cordova command will be aborted. 186 | 187 | ## Writing hooks 188 | 189 | We highly recommend writing your hooks using Node.js so that they are 190 | cross-platform. Some good examples are shown here: 191 | 192 | [http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/](http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/) 193 | 194 | Also, note that even if you are working on Windows, and in case your hook scripts aren't bat files (which is recommended, if you want your scripts to work in non-Windows operating systems) Cordova CLI will expect a shebang line as the first line for it to know the interpreter it needs to use to launch the script. The shebang line should match the following example: 195 | 196 | #!/usr/bin/env [name_of_interpreter_executable] 197 | --------------------------------------------------------------------------------