Posted by: digdug2k | August 24, 2012

WebApps on Android are comin’!

I’ve been fairly heads down the past few weeks working hard to polish up WebApps on Android. And the good news is, its almost there! The next train leaving the beta station will be our first beta shipping with support for the Apps API turned on. You can visit any webapp store on the web and install apps directly from there. The apps you install will appear on your Android homescreen, and also be available to any app managers that you’ve given permission to. We have a default App Manager (look in the Android menu for “Apps”) we’re shipping to handle that for now.

WebApps run with their own profiles and in their own processes, like real native apps. They add desktop shortcuts. Show up in the Recent Apps lists. And they have access to pretty much everything you see on Desktop Firefox (including Canvas, CSS Transitions and Animations, and WebGL) + some shiny extras like orientation support. (Android security measures prevent putting them in your Android Launcher or modifying the correct App name/icon in the recent apps list.)

At this point, we need testers!

Testing:
Our teams eyes aren’t enough to hope to find all the problems or test all the devices out there. If you just love the open web and want to try these things out, testing is easy! File bugs (or yell in IRC, email me, reply here, or just tweet at me (DigDug2k)). Install. Start them. Quit them. Restart them. Switch between them. Uninstall them.

We need to know what works, what breaks, what you love and what you hate. There’s a Test Day tomorrow (8/24/2012) if you want to help. We’ll have an irc channel set up, or you can pop in to #mobile. BUT, you can test any time! In fact, I’d love users to keep using these things and to get some testing over more prolonged use. Some quick ways to install apps:

  1. The Mozilla marketplace isn’t quite open yet, but is available to registered Mozillians. You get their either by going to http://marketplace.mozilla.org in Firefox Beta for Android, or through the Apps Manager (Android Menu -> Apps -> Click the shopping bag in the top right).
  2. Since the market is still under active development, I put together something I call “Mini-Market” for testing as well. It contains a few curated apps that we consider ready for testing. If you’re interested you can play with it at http://bit.ly/minimart (WARNING: You will find bugs!). If you’ve got a great app you want me to add, drop me a line here. I’ll try to blog more about it in a bit.
  3. Alternatively, if you run a site that is a webapp, you can serve up an app the through the apps API all by yourself. Trust me, no one enjoys huge “Install our Android App!” banners thrown in their faces when they’re trying to view your site, but I wouldn’t be surprised to see users using a well placed (not intrusive) “One-Click Install” button!

Writing an app:

There’s a lot to write about WebApp development (Note we don’t have to write Mobile WebApp because its pretty easy to write a webapp that runs well on all sorts of devices!). That’s a different blog post But I have noticed a few tips from testing a lot of apps:

  1. Use metaviewport. It won’t affect your site on desktop. It makes things usable on mobile. Use it!
  2. Along with that, now that your site isn’t being rendered at desktop sizes on phones, you can use media queries for responsive design too! And Firefox has a pretty awesome Responsive Design tool built in. The mini market uses some really simple ones to give a two pane view on tablets/desktop and a one pane version on phones.
  3. Webapps have no chrome around them. You are responsible for showing progress if the user clicks a link or does something slow. Use XMLHttpRequest if you can. Plus, that should make it easier for you to build your own cache of responses and make your app super responsive. Desktop apps do it. Webapps need to start doing it too.
  4. If you do load content dynamically into a single page, use the history API! All Android phones have a back button, and this makes it work!
  5. Use App-Cache. I need to get some data here, but completely unscientific testing on my half with really bad mobile networks has shown apps taking 10-15 seconds to start, most of which is waiting on the network. The few (a.k.a. the one admittedly simple) app I’ve seen using App Cache is much faster.

Once you have a simple app built. Installing it is easy. You just to create an app manifest. There are some instructions and boilterplate for doing that here. The test manifest builder is also helpful if you want some boiler plate. Its mostly a simple JSON file you need to serve from the same host as your app. You can submit that manifest to the Mozilla Marketplace (or any other store’s that appear) if you want to use it for discoverability, or you can give users a link to install it from your site by simply calling

navigator.mozApps.install(“path/to/manifest.webapp”)

Thats about it. Happy testing! Once again, please provide us feedback however you can. We’re listening and we’re anxious to make the web a first class citizen for apps.

About these ads

Responses

  1. […] Also, jetzt hat sich mobile aber wirklich durchgesetzt, denn Mozilla hat nicht nur einen einigermaßen erträglichen Androidbrowser am Markt, sondern nun kommen auch endlich die WebApps dazu: WebApps on Android are comin’! […]

  2. How do I UNinstall an app?

    • Sorry for the delay in responding. Never been good at wordpress. You can uninstall apps from the Fennec Apps Manager (getting into the Android system is going to be really tough. Start Firefox for Android -> Menu -> Apps -> Long tap on the app and select “Uninstall” from the menu.

  3. Galaxy Nexus:

    After removing app, shortcut is not removed.
    After installing two app one by one I had only one notification about installed apps. Seems like second has replaced first.
    Some times shortcut icon overlaps other after installing app. Other icon is of last installed app. Probably Firefox thinks that app is removed, it’s true, but icon is not.
    Some times after taping on notification instead of open app, Firefox opens new tab with protocol — |alert:|.

    A use latest Nightly.

  4. […] the article: WebApps on Android are comin'! « digdug2k This entry was posted in 99Covers News and tagged 99covers news, california, change, css, […]

  5. […] the original post here: WebApps on Android are comin'! « digdug2k This entry was posted in Blog Search and tagged beta, fairly, hard, heads, leaving, news, polish, […]

  6. […] everyone who took time out last Friday or over the weekend to test out some webapps on Android goodness, a huge huge HUGE thanks. I wish I could bake you all cookies. We had a great turnout of testers […]

  7. You can visit any webapp store on the web and install apps directly from there. The apps you install will appear on your Android homescreen, and also be available to any app managers that you’ve given permission to.

  8. Does this mean, that ordinary websites will be able to use WebGL and have hardware accelerated CSS transitions, animations, transformations etc. when using the Firefox for Android browser as well or only the apps?

  9. Meu irmão recomendou que eu possa como este blog. Ele estava
    totalmente certo. Este post realmente fez o meu dia.
    Você não pode imaginar o quanto tempo eu tinha passado por esta informação!
    Obrigado!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: