The document provides technical instructions for enabling gzip compression, improving iOS support, and updating app icons for the 'Stone Fest 21' application. It includes guidance on handling scenarios without JavaScript, removing Cordova plugins and native modules, and updating the manifest.json for web app compatibility. Additionally, it describes the installation of Ionic native mocks and demonstrates the use of the camera plugin within an Ionic application.

20. Enable gzip
# BEGIN GZIP
< ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text
text/html text/plain text/xml text/css
application/x-javascript application/javascript
< /ifmodule>
# END GZIP

21. Improving iOS support
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style"
content="black">
<meta name="apple-mobile-web-app-title" content="Stone
Fest 21">

22. App Icons
< link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png">
< link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png">
< link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png">
< link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png">
< link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png">
< link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png">
< link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png">
< link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png">
< link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png">

23. Updating the BODY tag
< body style="background-color: #1c1b17;
background-image: url('assets/imgs/logo.jpg');
background-position: center; background-repeat:
no-repeat;">

24. Handling the no JavaScript case
<noscript>
<h1>Stone Fest 21 requires JavaScript< /h1>
</noscript>

25. Removing Cordova Plugins
• cordova-plugin-console
• cordova-plugin-device
• cordova-plugin-splashscreen
• cordova-plugin-statusbar
• cordova-plugin-whitelist
• and ionic-plugin-keyboard

26. Removing Cordova & Ionic Native Modules
• cordova-ios
• cordova-android
• @ionic-native/core

27. Image Paths
<img src="https://aj-
software.com/apps/stone/assets/breweries/{{brewery.logo}}"
alt="Company Logo">

28. Enabling the Serviceworker.js code
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-
worker.js')
.then(() => console.log('service worker
installed'))
.catch(err => console.error('Error', err));
}

29. Updating the manifest.json file
{
"name": "Stone Fest 21",
"short_name": "Stone Fest",
"start_url": "index.html",
"display": "standalone",
"icons": [{
"src": "assets/imgs/logo.jpg",
"sizes": "512x512",
"type": "image/jpg"
}],
"background_color": "#1c1b17",
"theme_color": "#1c1b17",
"orientation": "portrait"
}

31. Ionic Native Mocks

32. Installation
NPM
• npm install @ionic-native-mocks/[plug-in] –save
Manual
• https://github.com/chrisgriffith/ionic-native-mocks

33. Ionic Native Mocks
// app.module.ts
import { Camera } from '@ionic-native/camera';
import { CameraMock } from '@ionic-native-mocks/camera';
...
@NgModule({
...
providers: [
...
{ provide: Camera, useClass: CameraMock }
...
]
...
})
export class AppModule { }

34. import { Platform } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
@Component({ ... })
export class MyComponent {
constructor(private camera: Camera, private platform: Platform) {
platform.ready().then(() => {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}

35. this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
console.log(imageData);
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
});
}
}

36. Ionic App Generator

37. http://bit.ly/2wlRrVa http://bit.ly/2xILll5
Download