Home [Tutorial] PlayIR – Port your Web App to Tizen – HTML5

[Tutorial] PlayIR – Port your Web App to Tizen – HTML5

 

Tizen DevLab and Portathon

At the recent Tizen DevLab and Portathon that took place in London, developers got to learn about the Tizen Operating System, SDK, Web runtime, APIs and how you can port your app over to Tizen. Ash, who is part of the Playir team presented a session on Porting your web game to Tizen.
 
Tizen-HTML5-Developer-Hack-London-4
 

“So with a little jiggery, you can get your existing app running on another ecosystem of users, and the good thing about that is, there’s a lot less competition to get your app noticed, than on the other app stores”

 

Port your Web App to Tizen

I’m Ash, working on playir; a super-easy design led development tools for web and mobile platforms. In today’s talk I gave a demo of Playir running on Tizen, and talked about the process of porting a 3D multiplayer game over to Tizen. The great thing about it, was that it was a lot easier than the hybrid openGL/webGL wrapper approach required for other platforms. It just works with out of the box HTML5 + window.tizen.
 
So going into the process of porting your game or app over to Tizen:

  • Firstly, in the config.xml, make sure you have the origin=”*” access privilege to access the internet, launch, read and unlimitedstore for accessing the sdcard.
  • When setting up your js files, for a cross-platform app, it’s best to soft link your resources rather than copy/paste, as this will ensure any updates made for your web app will transfer over to your tizen project without re-copying.
  • To ensure you get the correct device pixel ratio for displaying the right resolution, make sure you compare the document.width with the tizen “DISPLAY” systeminfo property.
  • For our apps, we locally package resources downloaded from the internet, as well as pre-embed some. In order to check which assets you have downloaded, you make a call to the filesystem.resolve function. But, it’s best to maintain your own list of files, as this can be a slow operation when performed.
  • Launching a web view is as easy as calling window.open, however you must note that the webview will take over the entire viewport with no back button or url bar, so you should run a timer checking the urls accessed in the webview when negotiating OAuth logins with services like Facebook and Twiitter, and only allow the user to log in, but close the webview if the user goes into an unsupported url, such as the support pages. This will stop users getting lost inside another website.
  • Packaging your apps is as easy as generating a cert and publishing it on the store. To get around registration, make sure you add spaces to your post code (if you’re in the UK), and it’s always useful to highlight that you’re using the device privileges requested in your config.xml, to avoid early rejections (the review team try to keep permissions as light as possible).

 
Tizen-HTML5-Developer-Hack-London-1
 
Throughout the day, I also supported some cool developers writing new apps and porting their current apps. With social apps and 2D games being a big theme.
Overall, the great thing about Tizen is that it just seamlessly works with pre-existing web technologies. So with a little jiggery, you can get your existing app running on another ecosystem of users, and the good thing about that is, there’s a lot less competition to get your app noticed, than on the other app stores.
 

Slides


 
Tizen-HTML5-Developer-Hack-London-2
 

About ReadWrite’s Editorial Process

The ReadWrite Editorial policy involves closely monitoring the tech industry for major developments, new product launches, AI breakthroughs, video game releases and other newsworthy events. Editors assign relevant stories to staff writers or freelance contributors with expertise in each particular topic area. Before publication, articles go through a rigorous round of editing for accuracy, clarity, and to ensure adherence to ReadWrite's style guidelines.

Get the biggest tech headlines of the day delivered to your inbox

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.

    Tech News

    Explore the latest in tech with our Tech News. We cut through the noise for concise, relevant updates, keeping you informed about the rapidly evolving tech landscape with curated content that separates signal from noise.

    In-Depth Tech Stories

    Explore tech impact in In-Depth Stories. Narrative data journalism offers comprehensive analyses, revealing stories behind data. Understand industry trends for a deeper perspective on tech's intricate relationships with society.

    Expert Reviews

    Empower decisions with Expert Reviews, merging industry expertise and insightful analysis. Delve into tech intricacies, get the best deals, and stay ahead with our trustworthy guide to navigating the ever-changing tech market.