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
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?
This is my index.html file. I have used angularjs , bower components etc. I have used angular ui view to store header, content, footer files as templates in another folder. When I try to open "index.html" is mozilla(using it for a long time) the website opens perfectly(with all the css and scripts loaded perfectly) , but in some other browser it just shows a blank screen. I have checked in Networks developers option , there is no error in mozilla but lots of 304 and 404 errors in other browsers.Are there some issues on loading the styles and scripts on other browsers or some cached data issues?
<!DOCTYPE html>
<html lang="en" ng-app="medicalApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>temp_App</title>
<!-- links to various stylesheets-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/components-font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog-theme-plain.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog-theme-default.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
</head>
<body>
<!-- I have used angular ui-view and store header, content, footer files as templates-->
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/ng-dialog/js/ngDialog.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
</body>
</html>
It is impossible to say since we can't directly interrogate your pages/scripts. Typically a white screen in an Angularjs application is indicative of a script error (unable to load a dependency or template usually). The Console should give you the answer. Firefox is pretty forgiving, which is why I prefer to use Chrome. In the failing browser look for angular errors for dependency loading.
It might be the order you are loading scripts. Other than that I can't see anything on the surface that would a problem.
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.
My introduction page has to open first time and then after it has to open side menu app. here I could able to display introduction page for the firsttime when app is installed, but the problem here i could able to display playlists page but navigation bar is not displaying.
Here is My Code:
https://www.dropbox.com/s/ome1w3isn41hjch/menu.zip?dl=0
getting error in Mobile browser console like this
See the screen shot the nav-bar is empty
bundle.js error shown because of injector error occupied in app.js
so check your app.js angular inject elements.
you missed ng-cordova.js
install using bower from above link..!and <script src="lib/ng-cordova.min.js"></script> in index.html
index.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
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.