Presumably related to UTF8 conversion, but I have no idea where or why the conversion is taking place or how to disable it: if I have a JSX file that includes " " in a text XML node, then when that node is rendered in some browsers the result is "Â" rather than the non-breaking space desired.
Research suggests that the direct cause of this is a unicode non-breaking space character, U+00A0 (rather than the entity I'm trying to use), is being translated to UTF-8 and giving the resulting byte sequence 0xC2 0x00, and then being interpreted as ISO-8859-1. What I'd like to do is prevent this translation happening.
This doesn't seem to happen in desktop browsers at all, but the app I'm developing is an Apache Cordova app, and when the app is installed on a mobile the problem occurs, so either its the mobile browser itself, some aspect of using a WebView rather than a standalone browser, or part of the Cordova compilation process that's causing it.
My build process also uses webpack and babel, but I don't seem to have any settings relating to character set handling that might be relevant to this.
Example code that shows the fault:
function startApp () {
ReactDOM.render (<span> </span>, document.getElementById('app'));
}
if (typeof document !== "undefined") document.addEventListener ("deviceready", startApp, false);
HTML file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="
default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' http://www.randomtext.me;
script-src 'self' data: gap: 'unsafe-inline' 'unsafe-eval' connect.facebook.net;
style-src 'self' 'unsafe-inline';
media-src *;
img-src *;
frame-src 'self' gap: *.facebook.com;
connect-src * data:;">
<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>Hello World</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
<style type="text/css">
#font-face {
font-family: "OpenSans-Regular";
src: url("fonts/OpenSans-Regular.ttf") format("truetype");
}
#font-face {
font-family: "OpenSans-Italic";
src: url("fonts/OpenSans-Italic.ttf") format("truetype");
}
#font-face {
font-family: "OpenSansCondensed-Light";
src: url("fonts/OpenSansCondensed-Light.ttf") format("truetype");
}
#font-face {
font-family: "OstrichSans-Medium";
src: url("fonts/OstrichSans-Medium.otf") format("truetype");
}
</style>
</head>
<body><div class="Fill" id="app"></div></body>
<script type="text/javascript" src="js/styles.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</html>
Update
I spotted this blog post where somebody else has experienced this. The suggested solution is using:
<meta charset="utf-8">
in index.html. This would work to solve the problem as I describe it, but I am also interested in a solution that won't prevent rendering of existing documents that use ISO-8859-1 as their encoding.
I had problem with this entries too.
Check this question:  jsx not working.
You can use dangerouslySetInnerHTML
<div dangerouslySetInnerHTML={{__html: 'Select Scenario: '}} />
Or
<h1>Code {' '}</h1>
Related
I created a react project by executing the "create-react-app" command, and I integrate this project in VS Code Extension by creating a panel with below code.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>React App</title>
<link rel="stylesheet" type="text/css" href="${styleUri}">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}';style-src vscode-resource: 'unsafe-inline' http: https: data:;">
<base href="${vscode.Uri.file(path.join(extensionUri.path, "build", panelName)).with({scheme: "vscode-resource",})}/">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script nonce="${nonce}" src="${scriptUri}"></script>
</body>
</html>
let disposable = vscode.commands.registerCommand('helloworld.helloWorld', function () { HelloPanel.createOrShow(context.extensionUri);});
When I run the react project with chrome, it works well, but when I run open the panel in VS Code Extension, I got this error--Failed to load resource: the server responded with a status of 401.
Does anyone know what's going on?
From a previous question I posted I asked where does the index.html of an AngularJS app (Moodle Mobile) leads to when opened. From the responses I received I learnt that the app will call the templates from moodlemobile-phonegapbuild/core/components/login/templates/ to form the login page.
My question is, how and where is it declared that the application will load the .html files from moodlemobile-phonegapbuild/core/components/login/templates/ specifically when I start index.html?
For reference, here is the index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src * filesystem: cdvfile: file: gap: https://ssl.gstatic.com; img-src * filesystem: gap: data: cdvfile: file: https://ssl.gstatic.com android-webview-video-poster:; style-src 'self' 'unsafe-inline' filesystem: cdvfile: file:; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://localhost:* filesystem: cdvfile: file:">
<title></title>
<link href="build/mm.bundle.css" rel="stylesheet">
<script src="lib/ionic/release/js/ionic.bundle.js"></script>
<script src="cordova.js"></script> <!--cordova.js will 404 during local development, as it gets injected into your project during Cordova’s build process.-->
<script src="lib/angular-translate/angular-translate.js"></script>
<script src="lib/angular-translate-loader-partial/angular-translate-loader-partial.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="lib/ydn.db/jsc/ydn.db-dev.js"></script>
<script src="lib/angular-md5/angular-md5.js"></script>
<script src="lib/angular-aria/angular-aria.js"></script>
<script src="lib/moment/min/moment-with-locales.js"></script>
<script src="lib/jszip/dist/jszip.js"></script>
<script src="lib/oclazyload/dist/ocLazyLoad.js"></script>
<script src="lib/ckeditor/ckeditor.js"></script>
<script src="lib/angular-ckeditor/angular-ckeditor.js"></script>
<script src="lib/angular-messages/angular-messages.js"></script>
<script src="build/mm.bundle.js"></script>
<style></style> <!-- Empty style to make easier to test styles using Inspector. -->
</head>
<body ng-app="mm">
<ion-nav-view></ion-nav-view>
</body>
</html>
As you can see there are 0 reference to where the next "page" is. I did some readup regarding how ionic framework works and now I understand that the <ion-nav-view> will be controlling the view of the "page" like taking the individual .html in the /templates folder to form the login page.
But the question still remains, where can I find the reference in which ionic is told to form the login "page" using the .html files from moodlemobile-phonegapbuild/core/components/login/templates/ specifically once I start index.html?
Your help is much appreciated.
I am developing an app using angular, ionic and cordova.
The problem I've got is that my app takes a long time to launch (around 8-10 seconds)
I'd like it to be a bit faster.
I read a lot around, and usually people says "load fewer files and it will be faster..." ok, point taken, the problem I've got is that I am also using a lot of 3rd parties libraries from bower, all compiled into one single bower file, that minified is around 4MB.
I decided to cache bower file using manifest, and apparently (according to google network tab) it now takes (after loading it from the cache) only 600ms instead of 5s, but again, the app appears to me to be still a lot slow to load.
I also tried to move all the files that are not required at the end of index.html file, as well as loading them asynchronously using html5 tag async.
Still, no luck.
What else can I try?
I am going to include some screenshots so that you can understand a bit better the amount of bower libraries I am using as well as the timeline from chrome
Timeline:
3rd Party libraries:
Also, my index.html looks like this:
<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy"
content="default-src * gap://ready file: data:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: https://fonts.gstatic.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' *">
<title>Heat Genius App</title>
<link href="css/bower.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/style.directives.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/ionic.js"></script>
<script src="js/app.js"></script>
<script src="js/templates.js"></script>
</head>
<body ng-app="App" class="app" ng-strict-di>
<div class="hg-boxed-container">
<ion-nav-view class="slide-left-right" animation="slide-left-right"></ion-nav-view>
</div>
<link href="css/vendor.css" rel="stylesheet">
<script src="js/bower.js"></script>
<script async src="js/vendor.js"></script>
<script async src="cordova.js"></script>
<script async src="js/csv-data.js"></script>
<script async src="js/hg-doctor-templates.js"></script>
<script async src="https://maps-api-ssl.google.com/maps/api/js?key=AIzaSyB0H7djlBcJdz4KnW9ZmFHfqhUJSa8l9AM&libraries=places&"></script>
</body>
</html>
and this is the manifest file:
CACHE MANIFEST
# 2016-12-19 v1.0.0
js/*
css/*
assets/*
Any suggestion will be really appreciated, thanks in advance
The web app works very well. But when I use cordova/ionic to build the mobile apps, a blank page appears.
<!DOCTYPE html>
<html lang="en" >
<head>
<title>app</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css"/>
<link rel="stylesheet" href="assets/style/app.css"/>
<link rel="stylesheet" href="assets/style/map.css"/>
<link rel="stylesheet" href="assets/style/dynamic-height.css"/>
<link rel="stylesheet" href="assets/style/search-box.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script type="text/javascript" src="bower_components/angular-material/angular-material.js"></script>
<script src="src/ui/fabCtrl.js"></script>
<script src="src/ui/autoComplete.js"></script>
<script src="src/map/map.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src='bower_components/lodash/dist/lodash.js'></script>
<script src='bower_components/angular-simple-logger/dist/angular-simple-logger.js'></script>
<script src='/bower_components/angular-google-maps/dist/angular-google-maps.js'></script>
<script src="/src/map/dynamic-map-height.js"></script>
<script src="src/map/angular-google-maps_dev_mapped.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry,places&sensor=false"></script>
<script src="/src/dev_deps.js"></script>
<script src="src/map/search-box-ngmodel.js"></script>
</head>
And the map div has been added in the html body. It is an example of angular-google-maps.
<div data-ng-controller="ctrl" ng-hide="true">
<ui-gmap-google-map id="map"
center="map.center"
pan="map.pan"
zoom="map.zoom"
draggable="true"
refresh="map.refresh"
options="map.options"
events="map.events"
bounds="map.bounds">
<ui-gmap-map-control template="draw.tpl.html" position="top-right" index="1" controller="mapWidgetCtrl"></ui-gmap-map-control>
<ui-gmap-map-control template="clear.tpl.html" position="top-right" index="1" controller="mapWidgetCtrl"></ui-gmap-map-control>
<ui-gmap-free-draw-polygons polygons="map.polys" draw="map.draw" ></ui-gmap-free-draw-polygons>
</ui-gmap-google-map>
</div>
I don't know where is going wrong. All the dependencies are right. And there are no errors in the console of Chrome.
ionic automaticly install content-security-policy plugin. Probably you are not using it. If it is not installed, you can install it https://github.com/apache/cordova-plugin-whitelist
And then try to add this line to index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline' https://*.googleapis.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.gstatic.com https://*.googleapis.com" />
Which allows your application to access google map remote scripts.
Firstly, make sure your js library dependecies are in the right order.
In your case, you are using an angular-google-map example of ploygons generator. Actually this example does not work properly in the cordova project. Try another example, I think you map will display.
The following code works just fine since I added https://mobileapppractice.azurewebsites.net in meta tag to prevent violate CSP.
<!DOCTYPE html>
<html ng-app="" ng-init="backendUri='https://mobileapppractice.azurewebsites.net'">
<head>
<meta charset="utf-8" />
<!--
Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
For details, see http://go.microsoft.com/fwlink/?LinkID=617521
-->
<title>Kapok Practice</title>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="scripts/MobileServices.Web-2.0.0-beta.min.js"></script>
<script src="scripts/appBundle.js"></script>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://mobileapppractice.azurewebsites.net data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<!-- BlankCordovaApp2 references -->
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<p>Hello, your application is ready! </p>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
</body>
</html>
However, in the following line, https://mobileapppractice.azurewebsites.net is hard coded in the meta tag
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://mobileapppractice.azurewebsites.net ...
so I want to use angularJS expression to make this url dynamic in meta tag, ex:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' {{"https://mobileapppractice.azurewebsites.net"}} ...
However, it didn't work and shows error "...violate Content Security Policy" when it try to invoke the WebAPI in https://mobileapppractice.azurewebsites.net.
Is there an easy way to how to make this CSP meta tag support angularJS dynamic control?
Thanks.