Since PWAs are getting better support on iOS and seems to become an interesting alternative to other mobile development approaches, I was wondering if it is possible to serve a separate UI, e.g. the App Shell, for iOS and Android.
When Russell first coined the term PWA, he stated that the PWA should act and feel as if it is a native application, but native applications differ greatly in terms of UI for Android and iOS (for example navigation methods).
So, in order to have a good PWA implementation, one would have to serve a separate UI for iOS and Android. I am not able to find a resource on how to accomplish this, does anyone have pointers on how to realize this idea?
I was wondering if it is possible to serve a separate UI
There are a couple of frameworks / approaches that try to achieve this, for example: The Ionic Framework.
Ref:
Optimising the performance of an Ionic PWA - Part 1
Optimising the performance of an Ionic PWA - Part 2
PWA Tips and Tricks
An Ionic 3 PWA, Brew: The Craft Beer App, Android:
iOS:
You have two options:
Build two versions of the app. Check the user-agent on the server. Depending on the user-agent, make the HTTP server return different versions of the app. This is completely doable and actually happens in the wild. For instance Google home page is different depending whether you load the page on Firefox/Chrome/Safari. In this case you need enough control of the HTTP server.
Build one version of the app that includes both UIs. Then, show different version of the app depending on the user-agent when the app is running.
The second scenario makes the user download code that is unused.
Edit: actually the second scenario doesn't make the user download unused code if you use lazy loading / code splitting.
Related
I'm on a bit of new ground here and perhaps this is a repost (if so>sorry).
I need some pointers on which direction to go. I have previously made an android app and found myself using most dev time on the UI. I wish to design the UI with HTML5 and distribute it to android and iOS .
I researched a lot about native and hybrid in order to focus my effort. Came across a bunch of platforms like PhoneGap, Appcelerator, Trigger.io and AppGyver (found the latter two appealing). But now I'm confused...
I basically wish to to make an intraweb environment that allows a team to develop HTML5 content that feeds data into a database while keeping the development and database under strict version control.
Thinking of such a setup
Local server hosting the source HTML5 code and database(s) - git upstream.
Development is then done by git on desktop computers
The mobile/tablets pulls the source (git origin) and creates instances that pull request the data entries to upstream (and thereby all other remotes)
Multiple units can work on the same instance and contribute to pull request data to the origin. They see changes right away (logic should assure no conflicts - thinking of pinging the devices)
No need to distribute new app via app stores if some new html5 is added (no behavior changed so no manifest violated).
Currently I'm considering making a native app that has a webview and performs git commands, but I'm fearing that I will get stuck (have no iOS programming experience). Is this overkill?
I'm not at all against the hybrid suppliers - just wondering if they will let me achieve what I aim for.
If anyone has some links to online tutorials on how to archive similar task or can provide usefull hints/pointers then I would appreciate it.
I'll upvote all answers that helped me and set the solution for the one that helped me most.
I worked some years with web technology packed into native apps. You have to consider two things.
First, your app will be just a simple HTML page or it will have fancy UIs, very dynamic UI interaction and animations? If it is complex and very dynamic, stick with native apps. The main advantage of them is the performance, it is VERY superior to WebView packaged apps in HTML5.
Second, the WebView have MANY usage restrictions. It is not like the Chrome browser that you use in your phone/tablet. Too fancy operations will likely have problems with WebView, and the extra time you've spent constructing UIs you will spend working around very annoying little problems.
Another concern, using git bundled in your app will be hard to integrate with the WebView due to its sandbox restrictions. I surely would not recommend to go that way. If you don't use the native phone hardware, like camera and others, you can show in the WebView a remote HTML5 site. It is a much more simple and secure option.
Another thing to note. These packing JavaScript libraries have different objectives. The Cordova (PhoneGap extends this with some Adobe powered features) goal is to make available to your JS code the native phone features, it has nothing to do with UI. The Ionic that was mentioned is focused on UI development. There are other libraries that are focused on UI and are used with PhoneGap/Cordova. My suggestion for fancy and dynamic UIs using HTML5 based technology is the Sencha Touch framework, that is bundled in ExtJS 6 now. Although they are paid framework and require advanced Javascript programming. The learning curve is very big.
Concluding, if your goal is faster UI development and the apps are simple, you can go with Cordova and another UI-focused framework. But I suggest to forget the complicated Git "on-the-fly" app update. If your app uses many native features and has very complex and big UIs, stick to native due to performance.
Another thing to note, well developed native apps consumes (in most cases) much less network bandwidth and battery lifetime.
I hope these informations help you =)
I might suggest looking into Ionic, it is a quote:
Powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript.
Ionic is focused mainly on the look and feel, and UI interaction of your app. That means we aren't a replacement for PhoneGap or your favorite Javascript framework. Instead, Ionic simply fits in well with these projects in order to simplify one big part of your app: the front end. We recommend reading Where does the Ionic Framework fit in? to get a good understanding of Ionic's goals.
Ionic currently requires AngularJS in order to work at its full potential. While you can still use the CSS portion of the framework, you'll miss out on powerful UI interactions, gestures, animations, and other things.
What I get from this is that Ionic integrates with PhoneGap.
I'm not sure how well this will help, but I think it will be useful in your search.
PhoneGap - Is as of yet, the single most comprehensive suite that allows you to leverage HTML, CSS and Javascript in a way that will give you the ability to have a single source solution and publish to the mobile landscape.
Using your scenario:
Create your application in local Webserver (Intranet)
Utilize the PhoneGap API to improve data access and UI.
Publish to GIT/SVN for versioning
Build with PhoneGap (Build Service - a cloud service that takes the zip of source code and then you choose your platform)
Publish as Private/Public to the Device Target (IOS, Android, WPhone)
In this way your HTML5 Application and your Published/Packaged App on the Devices you chose would be identical; and the WebApp and DeviceApp will remain in synch.
Useful PhoneGap Tutorials:
PhoneGap Tutorial 1
PhoneGap Tutorial 2
I want to make an home launcher replacement application (e.g Nova Launcer or Go Launcher) using PhoneGap. I've read about PhoneGap plugins but I don't think this feature can be implemented through Plugins.
So is it possible to make a home launcher replacement App?
There's already such a project. You can take a look at this project.
https://github.com/AricwithanA/DOMLauncher
It is a launcher made with phonegap.
The answer to your question is "yes". Phone Gap is just a WebView inside a Java Android project. If something doesn't have a Javascript interface, nor has a Phone Gap plugin yet, you can just make one yourself, or you can just use Java/Android xml directly.
The real problem with using a WebView as a homescreen is that it will really be slow (with no apparent benefit otherwise of loading all the capabilities that normally come with a WebView).
For a project like that to make sense, a cool project you could try doing is to replicate some of the iPhone functionality that's talked about here.
[...]
I expressly endorse this request, as it is not possible to offer a
native-looking WebApp in Android at the time without implementing a
shallow hull of an App, containing just a WebView (or implementing one
of the popular Frameworks like PhoneGap or apparat.io).
This leads to the point where you have to pay 25 USD for offering a
native-looking WebApp on Android. The same thing is free on iOS
devices - and more elegant
In that case, it would actually make sense of using a WebView. Anytime you would have to deal with actual web content, it makes sense to use a WebView because a WebView does a lot of that html rendering/parsing work for you already.
On a side-note, the web site owner I quoted above is slightly wrong about having to pay $25. In Android, he could just have self-signed his own app and distributed it through his web site, although, his main point remains: iOS does do the bookmarking/installing of a web app locally much better than Android, and it would be great if we could get something like that on Android (that could save/install locally the web sites that were especially made for iOS).
I work at a large company that is looking at building apps for internal use only (iPhone/iPad). We are looking for a SIMPLE way of creating apps that essentially are just a web browser with a predefined URL and no address bar/tabs, etc. Essentially a very dumbed down browser with a custom logo. What is the easiest way to accomplish this?
We would obviously be distributing these oursevlves and they wouldn't be available in the App Store, so app guidelines aren't an issue. We are on Windows boxes and are Java/Web developers so we'd rather not get into too much C sharp if at all possible, fyi. Basically it'd be nice if the tool (if one exists), were to allow us to give it a URL, an icon image, and it builds the app from there.
And while we are starting out with Apple devices, we need to be cross platform compliant with whatever tools we use because I can imagine the day when they decide to buy Android or WindowsPhone devices later on.
MobiOne? PhoneGap? Appcelerator Titanium SDK? Can either of these do what we need? Something else?
A big 'No' for MobiOne. I bought it for 99 dollars. As they advertised, I was able to create a static app within hours. But that's pretty much what MobiOne can do. The moment you start using html, javascript or even audio, all sorts of problem seem to creep up. And there is no support in their forums either. My basic question about using the audio player remains unanswered for a month now.
Here is the worst part:
The tool has a poorly built emulator. Often times, my app worked fine in the emulator but failed to run when deployed to a real device. And at times, i have seen the vice versa too.
Since then, I switched over to PhoneGap(which is free). It took me 2 days to just set my environment right. But once I had the environment setup, it took only minutes to deploy my app in to a virtual device.
Looking at your requirement, I would say that your safe bet is PhoneGap.
I don't have a working knowledge in Titanium but I read in a lot of forums that it supports less platforms when compared to PhoneGap. Titanium seems to give a more native feel to the app but that also means you cannot port it to multiple platforms without changing the code.
Apple may reject your app if all it does is wrap a web site in a WebView. You need to have more functionality in your app than just loading a web page.
From the app review guidelines for iOS:
2.12 Apps that are not very useful, are simply web sites bundled as apps, or do not provide any lasting entertainment value may be rejected
You would need to add additional screens to the app like an about page and a contact us page in order for your app not to be rejected.
As you say you know JavaScript, look into appcelerator.com it allows you to build cross platform apps and only writing your code once.
I would re-evaluate your reason for wanting to create these projects as an app in the first place. What app functionality do you want that you don't have now with your web page? You didn't mention anything in your question that would indicate this needs to be an app.
On Apple devices, you could create an icon that points to a web site. You could define the pages in a way that hides the address bar. Lastly, the web pages could easily be cross-platform already.
Wrapping this into an app would just possibly complicate the process. You may need to deploy updated app code to the device, where a refresh in a browser works just as well.
I am new to PhoneGap, and I have several questions:
I need a way to develop an application that will have iOS, Android, and other platform compatibility. In other words, I want to write 1 app and get compatibility versions for different platforms.
By reading the "Get Started" guide linked by the PhoneGap website, I found there are different procedures for different platforms. So to have compatibility versions across platforms, do I have to go one-by-one and change all of them if I make a modification to my app?
Also, what exactly is PhoneGap Build? It seems like I can avoid all that hassle mentioned previously and toss my app into the PhoneGap Build? Do I really not have to do anything besides writing the app? What if I need to make changes?
And finally, I've read that PhoneGap works with HTML, CSS, and Javascript, but not PHP. What if my app needs to contact a server? Can PhoneGap handle that?
Thank you for bearing with all these questions!
PhoneGap achieves platform compatibility by embedding a webview within your application. Therefore you can apply your knowledge in HTML, CSS, JavaScript and it additionally provides ways to interact with native features (e.g. camera, gps, ...).
With PhoneGap you write one general web app, tweak parts for the specific platform (sometimes you do not have to this at all) and build it for that platform. The latter can be handled with PhoneGap Build service: It takes your webapp and bundles it for the mobile operating systems out there (Embeds it within a Java app on Android, an Objective-C app on iOs)
PhoneGap is able to communicate with a server hosting a PHP script just as every other web application. Trying to dynamically load resources from remote sites can be quite a hassle but this is another question.
traumalles is correct. All your HTML/Javascript/CSS is running from within a webview on the device. Your code is, therefore, all "client-side." You can communicate with a server just like with any other page. When they say PhoneGap isn't compatible with PHP, they mean only that PhoneGap can't execute PHP code like it's a server, because it's not. It's just loading your webapp in, basically, a browser.
One other important question is what exactly do you mean with "other platforms" phonegap does provide many functionality for nearly every platform but the different webbrowser of the mobile devices have their problems and limitations.
For example are there many problems if you want to provide your application on a WindowsPhone Device because the Webbrowser has a few limitations which will cause your app to not look and behave like a native app.
Just look a bit through the phonegap API you will see that some functions are just available for IOS or for Android and there are a few only Blackberry methods and so on.
So you really have to be careful when a framework tells you it will work on all devices.
So i really don't have a problem with phonegap i worked with it very great but there will be limitations you have to deal with.
If you primarily want to develop for IOS and Android you can really achieve great native like results !
I have been researching PhoneGap and I'm now at an impasse and need some advice. I know that PhoneGap essentially 'converts' html5,css,JS sites to 'apps' for distribution, which leads me to my question:
Why wouldn't one simply utilize a webview within an activity to do the same thing and keep the app native?
The advantage of PhoneGap is that it provides APIs that enable your HTML/javascript to interact with the phone (e.g. camera, accelerometer, media etc.)
These APIs are standard across multiple devices (iOS, Android, WinPhone, Blackberry etc.). So you can write one set of HTML/javascript and deploy to multiple platforms.
If you just created a WebView you would not have the PhoneGap APIs and you would need to build containers on each platform you were interested in.
Good question I have searched me too, because we went in Phonegap solution and I think it is a wrong way for us.
The long story:
That is very true if you write once a UI with web developer skills than not needed to know native language and it compile, and ready for testing.
Web developers are more so higher the demand => developer price even cheaper.
When the client want a Milestone 1 for his great idea it will ask a few company, freelancers about development price and time. If is a very basic application version with Phonegap you will have the less development cost( off if your web dev skills are the same laver as platform dev skills) with webView at second place and last one the native.
The client is satisfied with app result buit with Phonegap and want to get more investors so it will make a presentation, where they are asking more features.
At Milestone 2 you will add a few features. Some are easy command line install and you get it, some aren't. Maybe you will be unlucky as you want a combination of 2 existing plugin with a few extras. The conclusion will be: you have to develop a plugin. At this point is already a very big sign of interrogation which is cheaper: the Phonegap + Phonegap plugin or a WebView. If you need 5 existing plugin and your has a little modification, than still Phonegap. But if you need only 1 plugin, only yours, than the web view is the proper way. There are also cases which makes the Phonegap stucture useless. Also there is a problem with version control system under Phonegap if you develop web files, and native code too: some are regenerating at each build time some not. Still is expensiver the native platform. Now the required features are developed. The client will make a demo for investors, where will be visible execution speed with this new features. Or here they will require optimisation, runtime speed-up or after publish to market they will see some are running with low end phones and not the ultimate, which ws used at demos and they will decide to go to Milestone 3 : speed up.
At optimisation, speed up (Milestone 3) you will decide as you need native GUI. After all GUI developed with web now you will need to throw out at fence and implement the side, maybe some parts need even NDK to speed up. No way to be good here with Phonegap. But you have hired web developers, or contracted that company. Now go back to that company , developers which can make native code. They will not start from 0, so they need to analyse the code, refactor and your development price will go up at least with 50% as you would start it from 0 with native.
Good Question, you still could use webview for that but you won't be able to access native functions like ringtone, camera, and all that, however, the app done that way will be regarded as a native app.