Workshop - 22 avril 2020
Mathieu Castets
Write once, run anywhere
Une application multiplateforme mais avec les technologies du web
Le roi est mort, vive le roi !
<ion-content>
<ion-refresher slot="fixed" pullFactor="0.5" pullMin="100" pullMax="200">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
</ion-content>
skeleton screens are perceived as being shorter in duration when compared against a blank screen and a spinner
<ion-item *ngIf="data">
<h3>
{{ data.heading }}
</h3>
<p>
{{ data.body }}
</p>
</ion-item>
<ion-item *ngIf="!data">
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
</ion-item>
<ion-content>
<ion-list>
...
</ion-list>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
lazily load an image when ever the tag is in the viewport
<ion-list>
<ion-item *ngFor="let item of items">
<ion-thumbnail slot="start">
<ion-img [src]="item.src"></ion-img>
</ion-thumbnail>
<ion-label>{{item.text}}</ion-label>
</ion-item>
</ion-list>
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
constructor(private screenOrientation: ScreenOrientation) { }
...
// set to landscape
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
// allow user rotate
this.screenOrientation.unlock();
// detect orientation changes
this.screenOrientation.onChange()
.subscribe(() => console.log(`Orientation changed to ${this.screenOrientation.type}`));
$ cordova plugin add cordova-plugin-screen-orientation
$ npm install @ionic-native/screen-orientation
Installation
Usage
ll ne faut pas crier victoire trop tôt.
👎
👍
$ cordova plugin add cordova-sqlite-storage
$ yarn add @ionic/storage
$ cordova plugin add cordova-sqlite-storage
$ yarn add @ionic-native/sqlite
http://localhost
ionic://localhost
https://api.example.com
XMLHttpRequest cannot load https://api.example.com.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'ionic://localhost' is therefore not allowed access.
Access-Control-Allow-Origin: origin | *
$ cordova plugin add cordova-plugin-advanced-http
$ yarn add @ionic-native/http
ionic://localhost
⚠️ frame-ancestors * ne s'appliquent pas aux custom schemes comme ionic://
Content-Security-Policy "default-src * 'unsafe-inline'; frame-ancestors *; img-src * data:";
Content-Security-Policy "default-src * 'unsafe-inline'; frame-ancestors * ionic:; img-src * data:";
<iframe src="https://payment.example.com"></iframe>
Refused to load https://payment.example.com because it does not appear in the frame-ancestors directive of the Content Security Policy.
Fastlane - App automation done right