How optimize web app for mobile ( ext js modern) - javascript

We have created test versions of web apps. Development was carried out in the modern extjs framework (6.2.0). So this means that apps must be cross platform. But when the app is used by a mobile phone I am faced with the following things:
In iOS phones the page does not load (after a couple of seconds there is an error). In Safari and Chrome.
Extjs objects look bad in different android devices: forms are too big or too small for this display. Page (this app is a single page app) is loaded slowly..
UPD:
IOS 12 safari error message:
A problem occurred with this webpage so it was reloaded.
I get a bad view when I use Xaomi Redmi 4 Note or Huawei P10 on version 7 and 8 of Android accordingly.
Questions
What config defines Action Sheet size and Action Sheet's font characteristics?
How to define characteristics of select field menu ( size and layout)?
What is the reason of app's working wrongly on iOS browsers?
Some links with suggestions or examples of multiplatform development on extjs
Thanks to all stackoverflow users!

Related

Debug an External Javascript against Documents inside Mobile Safari

This question is related to my earlier question How to Debug Javascript in IOS Action App Extension. Basically, I am developing an mobile safari extension, and part of the work is to develop a javascript (operating on top of "document" provided by mobile safari) to run inside the app extension.
However, I have not found a way to debug a javascript file inside an app extension. Now, I am trying to ask the question a bit differently - given mobile safari on a page, can I somehow run an external javascript on that page and debug this external javascript? I suppose that Safari Web Inspector could help with that? Thanks.
(This is a slightly customized answer from your other question)
The official documentation for this is [here][1].
It's not too hard, although recently I've had an issue with the page showing up when connected to the iOS simulator. In that case I just ended up using my phone directly. (Apparently you need to start desktop Safari after the iOS Simulator has started to inspect "remote" Simulator sessions)
Ensure that on the device Settings->Safari->Advanced->Web Inspector is on.
(Make sure you've Trusted the computer from the device)
Start MobileSafari on your device.
Start Safari on your desktop, make sure Show Develop menu in menu bar is on in Preferences.
In the Develop menu you will see your device name, say 'BSharer's iPhone'.
select the page name underneath your device name, say 'en.m.wikipedia.org - Wikipedia'.
You are now debugging that device's page on your desktop. The developer page will open and you can debug as if it was running on the desktop machine. You should now see all the JavaScript that is available to that page and set breakpoints.
(The app extension requires the debugger; statement because we don't see the javascript files injected by the app extension. You can still use the debugger statement but it's not usually necessary.)

How to have a widget on your app that can open without the need for passcode?

I'm designing an app in Phonegap so I'm using HTML, CSS, Javascript etc.
This app uses the phones camera (a QR scanner to be exact) and I want the users to be able to use this app as quick as possible. So, like on my Android device I can access the camera without typing the password, is there a way you can do the same with your app ?
Application is still in the design stages so I'm getting everything together first to make sure what I want can be developed before I start the development, thank you.
In java you can define the attribute widgetCategory in your appwidget-provider to home_screen|keyguard
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
android:minWidth="40dp"
android:minHeight="40dp"
android:updatePeriodMillis="86400000"
android:previewImage="#drawable/preview"
android:initialLayout="#layout/example_appwidget"
android:configure="com.example.android.ExampleAppWidgetConfigure"
android:resizeMode="horizontal|vertical"
android:widgetCategory="home_screen|keyguard"> //like here
</appwidget-provider>
But as per Google documents, this feature has been taken down from Android 5.0 Lollipop (only home_screen will be valid) so it will work for devices supporting Android 4.2 or above but below Android 5.0 which will be too limited.
The widgetCategory attribute declares whether your App Widget can be
displayed on the home screen (home_screen), the lock screen
(keyguard), or both. Only Android versions lower than 5.0 support
lock-screen widgets. For Android 5.0 and higher, only home_screen is
valid.

Android Chrome Website

Guys I build a website and when i am accessing it from the android browser(Default) A script that is very important on the functionality of my website is not being displayed. But when I am accessing it from the android google chrome browser the script is being displayed as I was expected to see.
My site is responsive, it adapted to the screen of the user.
I am using galaxy note 2 and the android version is 4.3.
I was thinking to build an android application such as a browser that is going to be always fullscreen and locked on my site but i do not what google chrome browser has and making my website as I want it to be.
Any help?
I'm not sure what you mean by Android Browser (default). Is there a Samsung Browser already preinstalled on the phone that isn't Chrome?
My guess, off the top of my head, is that JavaScript is disabled on this other browser. If you were to create your own browser with an Android WebView, JavaScript is disabled by default and must be manually set to true.
A quick Google search for 'Samsung Note JavaScript' doesn't return anything readily apparent, but here are a few different Samsung Models with directions on how to enable JavaScript on their browsers. I would imagine the process is similar for the Note 2.
http://support.t-mobile.com/docs/DOC-6782
http://www.droidista.com/2014/06/enabledisable-javascript-on-samsung.html
http://www.att.com/esupport/article.jsp?sid=KB117209&cv=820#fbid=omMGs_GnNUf

Running offline AJAX appliaction on Opera Mobile 11

I'm preparing project for web application with large AJAX usage, which should work on Smartphones. One of requirements is that the application should be able to run without internet connection. The scenario when application is launched and then the internet connection is lost is relatively simple, but what in case the user have no internet connections, and wants to launch this application?
Opera Mobile has the ability to save the page, which could be loaded even without internet connections, the problem is however the fully AJAX application. I've checked 2 examples: GWT-Ext Showcase and ZK Calendar Demo, both of them running in online mode, but failed to launch in offline mode (blank screen, with no error message). I suppose the problem is the Opera saved the main page itself, but not the required JavaScript. In this fall I have question:
What should the developer do to make his web application running in Opera Mobile in offline mode? How should the JavaScript be organized to be downloaded by Opera for offline mode?
You should specify a cache manifest file.
You could also just paste all the javascript into the main html page (inline) (more difficult to do with images though)

Can I create HTML 5/JS application that calls windows phone 7 silverlight app

I want to build 1 UI for several phones (windows phone, Android, IPhone, etc).
My plan is to create an HTML5 UI, and use JS to invoke applications that are installed on the mobile device.
For example, I create windows phone 7 application without UI, and invoke functions of this application from the JS in the HTML 5 UI.
Same goes for android, IPhone, etc.
Is this plan feasible at all?
- How can I call windows phone 7 silverlight app/Android from JS?
Calling a native app from the browser is
possible on iOS: Opening Native App. from Safari
possible on Android: Launch custom android application from android browser
impossible on Windows Phone 7
On iOS, you can't create a web app that calls native code, period. You mention that you want the app to have no UI, so I'm assuming you want to have a web app that invokes native code which in turn causes something to happen in the web app, or even causes something to happen on the device. Won't happen. You can use the iPhone's Custom URL Scheme to LAUNCH an application with given parameters so that when it opens it immediately does something, but you will get kicked out of the browser and in to your app. And App Store Guidelines wouldn't let you make an app that has no UI. It also doesn't allow for the creation of apps that are just WebViews wrapped around HTML.
On Android, I would imagine that you could create an app that is nothing more than a WebView that loads your webapp, and in that way you would have access to the native code you wrote for the device, but I don't think that would meet up in the middle the way you want it to when it comes to having the native code manipulate your web app. Plus Android UI's are mostly XML with a little bit of backing code so at that point you may as well be making a native app.
The browser in Windows Phone 7 does not currently support HTML5, though it is expected to arrive later this year. That said, I would extremely surprised if there was ever a public API that enabled a web site to open an application on the host device and I'd be surprised if this was allowed on Android or iPhone, too.
The only application that I'm aware of that exhibits this behavior is the YouTube application. If you visit YouTube.com on the WP7 browser, then it either launches the YouTube app if you have it installed, or prompts yout to download and install it. So, the capability is there, but I doubt very strongly if Microsoft would ever open it up beyond a close partnership for specific applications.
In Windows Phone 7, you can use the WebBrowser control within an application to host/browse web content, and from the application you can call javascript methods exposed by that page as described by Shawn Wildermuth in his Navigating with the WebBrowser Control on WP7 post.

Categories