Tutorial for PhoneGap Newsstand Applications

Apple Newsstand is a built-in application on Apple Inc. iOS devices the iPad, iPhone and iPod touch. It is dedicated to downloading and displaying digital versions of newspapers and magazines, optimized for viewing on mobile devices.

This tutorial will show you how to use the PhoneGap Newsstand plugin to develop the client side of a Newsstand application.

Step 1: Setup

Installation goes as usual. From command line:

cordova plugin add https://github.com/j3k0/PhoneGap-Newsstand-iOS.git

or:

phonegap local plugin add https://github.com/j3k0/PhoneGap-Newsstand-iOS.git

You’ll then have to create a newsstand icon.

The icon files should be called newsstand-icon.png and newsstand-icon@2x.png. They should be located in www/res/icon/ios/ folder, which if your compilation process is standard will end up being copied in platforms/ios/<whatever>/Resources/icons/.

For icon size and guidelines, please refer to Apple’s documentation. I used a 140 x 190 icon (and double the size for @2x), which worked well on all devices.

You can compile your app for the iOS platform and check that it’s indeed listed within the newsstand application. This should work on the simulator and on devices.

Step 2: Initialize Newsstand

If everything went well, you should have access to the global “newsstand” object from your javascript, as soon as the “deviceready” event fired.

The plugin provides with a single method to initialize itself: newsstand.init

   newsstand.init({
        debug: true, // (or false)
        success: function () {
            console.log('newsstand initialized');
        },
        error: function () {
            console.log('newsstand error');
        }
    });

Once newsstand is initialized, you can perform the only interesting operation that is supported by the plugin: change the cover.

Step 3: Update the cover

The most basic operation a Newsstand application performs is to update its icon to reflect the latest available issue.

    newsstand.setIcon({
        url: iconURL,
        badge: 0, // or 1 to indicate a new issue
        success: function () {
            console.log('setIcon success');
        },
        error: function () {
            console.log('setIcon error');
        }
    });

Replace iconURL with your own URL.

More

Of course, the hard part of the work is still to do: retrieve the list of issues from your server, display it. Manage user subscriptions by using In-App Purchase, Push Notifications, etc.

This tutorial only covered the basic operation specific to the newsstand API, which I hope is enough to make it useful! Hopefully we’ll find time in the future to develop it more and turn this plugin into something awesome!

I’m a consultant and developer for Mobile, Web, Games and Apps projects. I co-founded Fovea 8 years ago.

Tagged with: , ,
Posted in Blog
One comment on “Tutorial for PhoneGap Newsstand Applications
  1. Alexander says:

    The more interesting part is how to define a phonegap app as a newsstand app that may download/process news in the background. The “download in background” part should be triggered by iOS somehow, but how would my app know that it’s time to download now?