How do you make a web app start up instantly - is it possible to make as fast as a native app that is already loaded?
I have developed a HTML5 web app that runs nicely on Iphone 4 with a splashscreen. But now I'm looking into performance:
I use a manifest file to ensure that all files are loaded from the local storage. I have checked both in chrome and mobile safari, that the files are stored correctly locally. Now performance it quite different depending on how I access my web app:
~4s When I load the web app in browser (not from a home screen icon).
~6s When I load from an "add to homescreen" icon
When I load in chrome browser it takes 234ms to load and render the whole page. I seems like the lack of speed is due to the rendering being pretty slow.
Any performance suggestions are very welcome.
I know from experience that a MacOSX device the Chrome App all of its previous versions/updates leaves in its App. This maybe also apply to ios, since it's is a stripped version of the MacOSX sysem.
It might help to delete the Chrome App from your iPhone and re-install it from the App store.
This way you be sure you have a clean copy op Chrome on the iPhone whithout all the previous Chrome versions.
I hope this helps.
Related
Google announced that they drop support for web apps in Chrome.
Basically, web app is a local HTML/CSS/JS app that runs in a separated custom "standalone" Chrome window.
Is there any way (preferably easy), to convert this web app to a real desktop app that not depend on Chrome in anyway? Using maybe NodeJS? If yes what is the right way to do it?
Thanks.
You could try one of these tools:
https://applicationize.me/
https://www.bzgapps.com/coherence
https://fluidapp.com/ (for Mac only)
Don't know about "easy", but it seems to me that the natural evolution is to Electron or NW.js, and both of these are mentioned in the Google blog article on this subject. (I'm moving to Electron.) Both have advantages over Chrome Apps, mostly that they are true desktop applications. To cite one example, you can now manipulate the menu bar, something out-of-bounds for Chrome Apps.
Pure JavaScript code in your Chrome App, such as anything to access the internet, should move over directly. Same for much UI stuff, as you're still using a browser window for the UI. The app will, however, have to be restructured.
Added Note: Chrome Apps ran on 4 platforms: MacOS, Windows, Linux, ChromeOS. Electron and NW.js apps won't run on ChromeOS. So, the ability to write a four-platform completely binary-portable app is going away.
I'm creating a Mobile App with JQM and JSP I'm using Bookmark bubble to do this, but I just want to ensure I understand what is happening behind the scenes here.
Is the static HTML generated by my JSP saved locally on the iPhone?
Does clicking on the APP always get fresh info from my online server or does it cache?
I'm assuming it still uses Safari to render? And just hides the toolbar etc?
If instead of hosting this online, I packaged it as an Apple App and it went on App store,
would the device still use safari to render it?
Thanks!
Documentation is at: https://developer.apple.com/library/content/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html
It's possible to cache the page(s) locally.
I'm playing around with a simple web app locally, and can't quite figure out why it is not caching correctly on the iPhone. I am serving a .manifest file with the correct MIME-type, and the site works perfectly fine with my local server turned on or off on desktop Safari, Chrome and Firefox. It is only mobile Safari that is failing to cache the site. Any ideas why this might be?
It seems to be an iOS bug.
I found out that mobile safari will always run into an application caching error if you have at least one web view opened and the you clear the browser cache. I think that clearing the browser cache will destroy the cache database. All accesses to the cache database will then fail. It seems that the browser creates this database only on startup.
To get the application cache working again close all safari views and finally close the browser by returning to the home screen. Now applicaton caching should working. Some mobile devices also requires switching on and off.
If you know a methode to detect this situation let me know it, please.
I had a similar issue but Safari and iPhone were both NOT working whilst IE and Firefox were working. The reason was complex. One was a misspelling of the word "manifest" in the HTML tag. Silly mistake and very frustrating that IE and FF still worked offline. The other issue was that I was using default.asp as the main page of my app and not including this in the manifest.
My app was mydomain.com/myapp/ and thus the browser never saw the "default.asp". Also, according to the HTML5 spec, the main page need not be in the manifest but apparently Safari sees that a little differently...
I can confirm that the bug is also present on iPAD running iOS 4.3.
I spent quite some time to make the offline application cache work on iPad. I can confirm that the workaround mentioned in the previous post works.
I want to test a website to see how it works with the iPhone but I don't own an iPhone or an iPod touch. Is there a way I can test how the site works on them without owning one?
What I'm really after is fixing how Stackoverflow's WMD markdown editor works on the iPhone. I hear that the hyperlink and image prompts are created too high. I think I know how to fix that but it's pretty tough to develop blind.
If you own a Mac, you can download the iPhone SDK which comes with an iPhone simulator. It works not only for debugging a native app but also for browsing the web.
If you have Safari on your computer, you can enable the "Develop" menu under Preferences > Advanced > Show Develop Menu in Menu Bar.
With this enabled, you can go to Develop > User Agent, and change the user-agent string to the device you want your browser to report to the web server as.
By resizing the window to the appropriate width, you can emulate what the site will look like on the iPhone.
The upside of this is that it's quick, it works on both Windows and Mac, and you don't need the iPhone SDK installed. You can also browse iPhone-specific versions of websites that catch user-agent strings directly from your PC.
The downside is obviously your Safari browser on your PC will behave quicker than on the actual device (especially in regard to javascript performance); it displays plugins and shows fonts that may not be available on the actual iPhone OS; a lack of multi-touch support and "snapping" to columns while scrolling; no auto-rotation; no multi-touch/pinch-zoom; widgets will look different; etc.
Just a notice on this old thread - we have now enabled live testing on iPhones and iPads via vnc at CrossBrowserTesting.com.
Ken - Founder
There is a free app on the mac that emulates the iPhone browser: iPhoney
I don't purport to have done more than a web search, but the problem seems to be solved by several products that are "iPhone web app emulators."
http://www.testiphone.com/
http://marketcircle.com/iphoney/
I'm working on a web application, and we are targeting the iPhone and iPod Touch. I'm familiar with the debugging tools for FireFox and IE (e.g. Firebug and IE Developer Toolbar), but I can't find anything for the iPod. I am not looking forward to using alert as my main debugging tool, especially when I expect mouse events to be one of the major issues.
Is this really the state of the art? What tools do you recommend?
Also, how similar is the html layout on an iPhone to that of Safari running on Windows? On a Mac?
The iPhone version of Safari includes a debug console that can be very handy. Settings > Safarai > Developer.
You can also use the Simulator in the iPhone SDK. There's no extra debugging, but it's easier than using a physical device all the time.
You can also use the desktop version of Safari for many things.
The web tools that target the iPod Touch and iPhone arenas include
[iPhone Remote Debug Console](
http://code.google.com/p/iphonedebug/)
BlackBaud Simulator for Windows
[MobileSafari Simulator](
http://www.testiphone.com/)
[iPhoney](
http://marketcircle.com/iphoney/)
While WebKit has a remote inspector, it is hard to enable on an actual iOS device (at least without jailbreak) and so most tools for it are simulator-only. iWebInspector looks promising for this, but keep in mind the simulator's WebKit library is not identical to the device's.
That's where weinre comes in. With weinre, you can "debug a web page displayed on your phone from your laptop". How it works is you run its custom HTTP server that hosts two things:
a JavaScript file you include on the page you want to debug
an Inspector page that you load on the machine you want to debug from
You start the server e.g. java -jar Downloads/weinre.jar --boundHost -all- --httpPort 4242 and then put a script tag like <script src="http://weinre-server-name.local:4242/target/target-script-min.js"> in the source code for your webpage and load the inspector by navigating to e.g. http://weinre-server-name.local:4242/client. When you load the target page on an iPhone on your local WiFi connection, the connection will show up in the client page on your mainframe and you can use the Inspector tabs to view/edit the page on the iPhone.
It has some limitations (no Javascript breakpoints and such) and can be a little laggy, but overall it's pretty magic.
There is also a nice tool called iWebInspector
http://www.iwebinspector.com/