上下文
我在PWA应用程序中工作。WebApp主要完成。它使用MediaDevices API在浏览器中具有相机，视频和音频记录功能。在使用Chrome或Firefox（例如Android）中使用Chrome或Firefox测试此应用程序时，所有这些都可以正常工作。
但是，根据浏览的兼容性选项卡，此功能由很少的浏览器支持。
有了这种限制，我被分配开发使用本机电话资源的混合应用程序。
约束
- 构建混合应用程序
- Web资源指向主机（文件不能本地）
- 媒体资源：拍照，录制音频和视频，上传文件
- 支持Angularjs
cordova
作为网络开发人员，使用科尔多瓦是自然的选择。
我决定记录此处理，因为我花了一个星期的时间才能使所有工作工作。
步骤
摘要
- 开放的无本地缓存的托管应用
- 在托管应用程序中访问插件
- 处理文件；从设备到WebView
1）开放的无本地缓存托管应用
为了到达WebApp的应用点，可以简单地更改config.xml：
<content src="http://YOUR-DOMAIN/index.html" />
但是，但是，当应用程序加载时，它将所有页面缓存到设备中。如果我们在WebApp中更改某些内容，则只有在清除App Cache时，它不会在设备中更改。
要解决第一个问题，我们使用了com.tiltshiftfocus.cordova.plugin.clearCache插件。
- 1）安装插件：
bash：
cordova plugin add com.tiltshiftfocus.cordova.plugin.clearCache
- 2）创建一个简单的
script.js：
脚本：
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();
NOTE 我们将platform变量传递到主URL中。我们将稍后在WebApp中使用此变量。
- 3）创建简单的
index.html加载Ascript.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）更新
config.xml指向index.html：
config.xml：
<content src="index.html" />
2）在托管应用程序中访问插件
使用托管WebApps的问题是，我们无法简单安装在应用程序中的访问插件。幸运的是，解决方案很简单。
安装您要使用的所有插件后，在Cordova项目中，导航到平台文件夹并将所有内容复制到您的WebApp项目。
android
复制
的内容Cordova_Project_Folder/platforms/android/platform_www
在WebApp项目内部的public目录
Webapp_Project_Folder/public_www/android/
WebApp
复制插件文件夹后，您需要引用cordova.js。
WebApp index.html：
<script scr="/android/cordova.js"></script>
NOTE 我们需要为正确的平台引用正确的文件夹。然后，在此步骤中，我们使用以前提供给托管WebApp的platform变量。我不会详细介绍此过程。
3）处理文件；从设备到WebView
到目前为止，我们得到了托管的WebApp和所需的插件。现在我们需要处理存储在设备中的文件。
为了使此过程正常工作，我们最终使用了此步骤：
- 获取文件的完整URL。
- 将完整URL转换为
cdvfile://。 - 在WebApp中使用
cdvfile://。 - 将任何URL转换为
Blob。
1）获取文件的完整URL。
几乎所有可创建或读取文件的插件（相机，音频等）返回完整的URL。
2。将完整URL转换为cdvfile://。
相机插件cordova-plugin-media-capture返回一个已经包含cdvfile://路径的媒体文件对象：fullPath属性。
但是在某些情况下，您必须转换完整的路径，例如file:///Pictures/image.jpg至cdvfile://localhost/image.jpg。您可以使用cordova-plugin-file的resolveLocalFileSystemURL方法来实现此目标。
脚本：
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。在WebApp中使用cdvfile://。
问题之一是WebApp标签中的参考文件。下面的片段不起作用。
<img src="cdvfile://path/image.jpg" />
为了工作，我们需要使用：
更新config.xml <access origin="cdvfile://*" />
注意：如果您使用的是AngularJS，则必须白色列表cdvfile://协议：
.config(['$compileProvider', function( $compileProvider ){
$compileProvider.imgSrcSanitizationWhitelist(/^s*(https?|file|blob|cdvfile):|data:image//);
}]);
4。将任何URL转换为Blob。
这项工作的整个目标是将资源发送到服务器。我们需要一个Blob对象来附加FormData。我们仍然可以使用resolveLocalFileSystemURL。
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');
}
总结
现在我们有：
- 从设备访问任何媒体
- 能够在我们托管的WebApp中显示任何本地媒体的能力
- 转换此本地媒体并上传的工具，然后通过WebApp
希望这篇文章节省时间。