Kordoba
Sebagai pengembang web, menggunakan Cordova adalah pilihan yang wajar.
Saya memutuskan untuk mendokumentasikan proses ini karena saya membutuhkan waktu seminggu untuk menyelesaikan semuanya.
Langkah
Ringkasan
- Buka aplikasi yang dihosting tanpa cache lokal
- Mengakses plugin di aplikasi yang dihosting
- Berurusan dengan file; dari perangkat ke tampilan web
1) Buka aplikasi yang dihosting tanpa cache lokal
Agar aplikasi mengarah ke aplikasi web, seseorang dapat dengan mudah mengubah config.xml:
<content src="http://YOUR-DOMAIN/index.html" />
Namun dengan begitu, saat aplikasi dimuat, semua halaman akan di-cache ke dalam perangkat. Jika kita mengubah sesuatu di aplikasi web, hal itu tidak akan berubah di perangkat, hanya jika kita menghapus cache aplikasi.
Untuk mengatasi masalah pertama ini, kami menggunakan plugin com.tiltshiftfocus.cordova.plugin.clearCache.
Di pesta:
cordova plugin add com.tiltshiftfocus.cordova.plugin.clearCache
- 2) Buat
script.js sederhana:
Naskah:
var URL = "http://YOUR-DOMAIN/index.html?platform="
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
var targetUrl = URL + cordova.platformId;
function cb(){
window.location.replace(targetUrl);
}
window.cache.clear(cb, cb);
}
};
app.initialize();
Perhatikan bahwa kami meneruskan variabel platform ke URL utama. Kami akan menggunakan variabel ini nanti di aplikasi web.
- 3) Buat
index.html sederhana untuk memuat script.js:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: cdvfile: http://YOUR-DOMAIN/ https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>TITLE</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
- 4) Perbarui
config.xml untuk menunjuk ke index.html:
Konfigurasi.xml:
<content src="index.html" />
2) Mengakses plugin di aplikasi yang dihosting
Masalah dalam menggunakan aplikasi web yang dihosting adalah kami tidak dapat dengan mudah mengakses plugin yang terpasang di dalam aplikasi. Untungnya solusinya sederhana.
Setelah menginstal semua plugin yang ingin Anda gunakan, di proyek Cordova Anda, navigasikan ke folder platform dan salin semua konten ke proyek webapp Anda.
Android
Salin konten dari
Cordova_Project_Folder/platforms/android/platform_www
Ke direktori public Anda di dalam proyek webapp
Webapp_Project_Folder/public_www/android/
Aplikasi web
Setelah menyalin folder plugin, Anda perlu mereferensikan cordova.js.
Indeks aplikasi web.html:
<script scr="/android/cordova.js"></script>
Perhatikan bahwa kita perlu mereferensikan folder yang tepat untuk platform yang tepat. Kemudian, pada langkah ini, kita menggunakan variabel platform yang sebelumnya diberikan ke aplikasi web yang dihosting. Saya tidak akan menjelaskan secara detail proses ini.
3) Berurusan dengan file; dari perangkat ke tampilan web
Sejauh ini kami memiliki aplikasi web yang dihosting dan plugin yang diperlukan berfungsi. Sekarang kita perlu menangani file yang disimpan di perangkat.
Agar proses ini berfungsi, kami akhirnya menggunakan langkah-langkah ini:
- Dapatkan URL lengkap file tersebut.
- Ubah URL lengkap menjadi
cdvfile://.
- Gunakan
cdvfile:// di aplikasi web.
- Konversikan URL apa pun menjadi
Blob.
1) Dapatkan URL lengkap file tersebut.
Hampir semua plugin yang tersedia yang membuat atau membaca file (kamera, audio, dll) mengembalikan URL lengkap.
2. Ubah URL lengkap menjadi cdvfile://.
Plugin kamera cordova-plugin-media-capture mengembalikan objek MediaFile yang sudah berisi cdvfile:// jalur: fullPath atribut.
Namun dalam beberapa kasus, Anda harus mengonversi jalur lengkap, mis. file:///Pictures/image.jpg hingga cdvfile://localhost/image.jpg. Anda dapat mencapainya menggunakan metode resolveLocalFileSystemURL dari cordova-plugin-file.
Naskah:
function getCDVFromFullURL(fullURL, callback){
window.resolveLocalFileSystemURL(fullURL, gotFile, callback);
function gotFile(fileEntry) {
callback(null, fileEntry.toInternalURL());
}
};
getCDVFromFullURL('file:///Picture/image.jpg', function(err, cdvUrl){
cdvUrl === 'cdvfile://localhost/image.jpg'; // example!!!
});
3. Gunakan cdvfile:// di aplikasi web.
Salah satu masalahnya adalah file referensi di tag webapp. Cuplikan di bawah tidak berfungsi.
<img src="cdvfile://path/image.jpg" />
Agar berfungsi kita perlu memperbarui config.xml dengan:
<access origin="cdvfile://*" />
Catatan: Jika Anda menggunakan AngularJS, Anda harus memasukkan protokol cdvfile:// ke daftar putih:
.config(['$compileProvider', function( $compileProvider ){
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|file|blob|cdvfile):|data:image\//);
}]);
4. Konversikan URL apa pun menjadi Blob.
Seluruh tujuan dari upaya ini adalah mengirim sumber daya ke server. Kita memerlukan objek Blob untuk ditambahkan di FormData. Kita masih bisa menggunakan resolveLocalFileSystemURL untuk itu.
function getBlob(anyUrl, callback){
window.resolveLocalFileSystemURL(anyUrl, gotFile, callback);
function gotFile(fileEntry) {
fileEntry.file(readFile);
}
function readFile(file){
var reader = new FileReader();
reader.onloadend = function(e) {
callback(null, new Blob([ this.result ], { type: file.type } ));
};
reader.readAsArrayBuffer(file);
}
}
getBlob('file:///Picture/image.jpg', function(err, blob){
// formData.append('imagem', blob, 'iamge name');
}
Bungkus
Sekarang kita punya:
- akses ke media apa pun dari perangkat
- kemampuan untuk menampilkan media lokal apa pun di aplikasi web yang kami host
- alat untuk mengonversi media lokal ini dan mengunggahnya melalui aplikasi web
Semoga postingan ini menghemat waktu.
person
raphaelbs
schedule
28.09.2017
