OpenGApps.org currently enjoys a nice Material Design Lite layout. But it did take some effort to get there…

The beginning

The intial website of Open Gapps was made from a GitHub template, with some little changes to the colors and mostly some javascript hacking for the download widget. The website did suffice for the most basic needs, one could easily download a GApps package easily on desktop and mobile. But the website itself was very ugly.

Material Design Lite

The moment Google released their new Material Design Lite Project and mfonville and raulx222 got directly interested, the toolset was simple and it allowed to adapt a simple HTML page into a full Material Design compliant website with near-native look and feel for a webapp easily.

Prototype

So raulx222 hacked away and had within a day a prototyped website ready. Clearly it was not done yet, because there were still some issuse with parts of the layout, but it showed great promise. So MastahF got hacking away at the javascript. This was quite tricky, because several race-conditions appeared between the different javascript objects and libraries that we use. The GitHub API queries are e.g. performed via javascript and this implies that some of layout can only be rendered after an asychronous callback. Meanwhile the Google AdSense banner (that gives our project donation fund some income) is also rendered via javascript to have a responsive layout and Material Design Lite also uses javascript, especially to ‘upgrade’ the ‘normal’ HTML widgets into ‘Material Design’ widgets. The automatic download mechanism can only be run when the Material Design is rendered (because it needs to fetch the selected radio buttons) and when the GitHub API request has returned (so that it can know if the seletions where valid and that it can fetch the URL of the most recent build). These javascripts were all conflicting, e.g. sometimes the AdSense banner was rendered ‘behind’ the layout that was rendered by Material Design Lite, at other moments the website rendered by Material Design Lite did not show the content from GitHub when initially opening the website. Or the download would not activate, or would refer to a non-existent broken URL, or downloads would be triggered twice, or it would block the loading of the AdSense banner, etc.

Javascript hacks

Apparently the javascript needed some small hacks, so that it would give consistently the correct output. E.g. we now let the the AdSense banner rendering-script to first force the Material Design Layout, so that its size can succesfully been detected, applied and rendered. And only if those scripts are completed, the automatic downloads are triggered, or the it would fail at processing the MDL-form. And any response from the asychronous GitHub Query calls force the Material Design Layout to be re-rendered.

Automatic downloads

After this javascript hacking was done, raulx222 fixed the last issues with the layout. Some things could not be fixed though, e.g. we could not let the page open with ‘About’ by default, in combination with the automatic downloads because Material Design would not render the invisible radio buttons which would have to be processed. Meanwhile Material Design Lite does not allow (yet) to hotlink to another tab, so we could not let the automatic download links automatically be switched to the downloads tab.

Going live

We decided to go live at one moment though, because it was good enough of an improvement over the initial site and we have received a lot of positive feedback.

The future

We will keep adding small improvements to the site, especially when Material Design Lite gets updated. We especially look forward to their 1.1 update which is planned for October, which will include even more Material Design components like Snackbars and Toasts, which we plan to use for e.g. the obligatory cookies warning.

Mobile experience

I hope you guys like the website and we have a small tip for you: If you open the website in Chrome on your Android Device, you can add the website to your homescreen. When doing so, the website will behave completely like a native Material Design Android app. In the future we will expand the features of this app, when technically possible (there are still some GitHub limitations) with e.g. push messages for updates.

Last week was quite a hectic one for the packagers and developers of Open GApps. Google released a new stable branch of Chrome into the Play Store using their own forked ‘Crazy Linker’. At first this was unknown, so when the new Chrome got committed to the repository suddenly different errors started to appear.

So, what happened and what went wrong? An application like Chrome is stored in an APK, which is a kind of ZIP-file. Normally, when preparing an APK to be included on the /system/ partition of your device, all files that are part of the lib-folder within this APK are extracted and stored separately in a /lib/-folder next to the APK. The APK itself is stripped from this lib-folder.

But when Chrome started to use this special linker application, this has changed. Suddenly we should not extract everything from /lib/, but exclude crazy.libchrome.align and crazy.libchrome.so from extraction. They have to be kept within the APK in a special non-compressed manner.

So this had to be implemented in the code of the Open GApps scripts, which was done in a quick (and dirty) code fix that had to be ready within a few hours, so that everything would be in place for next day’s release.

In the end, everything worked out, and you as user might not have noticed anything. But for us it were some hectic hours, trying to find the source of the errors and fixing it!

We updated our website with Material Design! Bookmark it with Add to Homescreen to easily download the latest packages to your device. Small JavaScript issues still have to be resolved, so stay tuned.

Today we launched our stable releases branch! Check it out at opengapps.org