Notifications

We can customise the long-look, but not the short-look.

We have to register the Notification types and their actions using classes:

Foreground and background actions are processed differently (foreground open Watch app, background open iPhone app).

Short Look

Only has icon, the title of notifications, and the app name.

Local-Notification: UILocalNotification.alertProperty

Remote-Notification: title key of alert dictionary in payload.

Long Look (link)

When the wrist remains raised – or user taps short look -> long look will appear. (will be auto-dismissed when user lower wrist). The wrist-remains-raised-case can be turn-off if Notification Privacy if On.

We will have to use didReceiveRemoteNotification:withCompletion: and didReceiveLocalNotification:withCompletion: to display the notification.

If we take too long to display the Custom, Watch will display the Static one instead.

Use: completionHandler(WKUserNotificationInterfaceTypeCustom); // to display the Custom Notification at the end of didReceive 

(?) – How to test Long-Look? There is a Scheme Glance, duplicate that, in Run – change Executable to Notification one. The data can be changed in PushNotificationPayload.apns file.

(?) – Customise the Long-Look: create Action with UIUserNotificationAction. Action’s activation mode can be UIUserNotificationActivationMode.Background, Foreground. After that, create ntfs = [UIUserNotificationSettings settingsForTypes:UIUserNotificationTypeAlert | UIUserNotificationTypeBadge | UIUserNotificationTypeSound categories:actions]; 

then call [[UIApplication sharedApplication] registerUserNotificationSettings:ntfs]; to register. Based on these actions in this registration, Watch will add the corresponding buttons to the Long-Look.

Actions handlers for Long-Look (Interactive Notifications)

Interactive Notifications are the new thing in iOS 8. It allows users to choose action for each notification – for example, when you are notified of someone who invited you, you can choose Accept or Ignore.

The initial interface controller of the Watch should have  handleActionWithIdentifier:forRemoteNotification: and handleActionWithIdentifier:forLocalNotification: implemented to handle the actions.

On the iPhone side, appDelegate would use application:handleActionWithIdentifier:forRemoteNotification:completionHandler: or application:handleActionWithIdentifier:forLocalNotification:completionHandler: method to handle the actions.

(?) – How action is handled? The Payload will define the possible action, these actions are processed in the above functions, according to their identifiers.

Glances (Link)

Screen Shot 2015-06-11 at 9.40.38 am

Glances are the way to quickly have a peek without opening the app. It should offer important, simple but relevant information. Glances should be thoroughly designed:

  1. Contextually relevant: can use time and location data to provide details that matters – for example, showing the main currency that the trader are interested.
  2. Content quick and easy to read: use SYSTEM font, less words, use image.
  3. Left-aligned: Apple-recommended.
  4. No INTERACTIVE controls !!! (buttons, sliders…)
  5. Avoid Tables & Maps
  6. BE UPDATED!

Glance are not running in the same process as the Watch app – so they are separate entities !

http://www.brianjcoleman.com/tutorial-building-an-apple-watch-glance/ show how we can create Glance.

(?) Can the Watch app reuse the data loaded from Glances network call or we have to call again when the App launches?

YES. ” To customize the launch behavior of your app from a glance, do the following:

  • In the glance interface controller:

    • Configure the glance normally in the init and willActivate methods.

    • Call the updateUserActivity:userInfo:webpageURL: method at some point and use the userInfoparameter to convey information about the state of the glance to your app. At launch time, your app can use that contextual data to display a different interface controller.

  • In your app’s main interface controller:

    • Implement the handleUserActivity: method. Use the provided userInfo dictionary to configure your UI appropriately.

Calling the updateUserActivity:userInfo:webpageURL: method tells WatchKit to call the main interface controller’s handleUserActivity: method at launch time. In your implementation of the handleUserActivity:method, use the provided contextual data to configure your UI appropriately.

” – Quoted

So the Glance can pass information to the Watch app.

(?) How often the Glance should be updated? And how should it be updated?  

As in http://stackoverflow.com/questions/27965917/apple-watch-update-glance-on-background – the Glance can schedule periodic call to update / refresh data.

The data should be saved into Shared Container -> so we can reuse it later.

(?) Can the Watch app pass data to the Glance? 

We can just use the data stored in the Shared Container to show on the Glance first.

(?) Can the Glance be scrolled?

No, Glance is not scrollable.

A tutorial for Glance in Watch OS1!

Handoff

Handoff can be used to share activities between devices. Mac must be Yosemite and devices iOS8 to use Handoff. They must be within 10metres (Bluetooth range), and with Handoff turned on on all devices (Bluetooth on, and Settings-General-Handoff on).

Handoff should mostly transfer what you are doing on the Watch to the iPhone, like opening to the same page. We use Handoff API available inWKInterfaceController in Glance and custom notification interfaces to create deep links in iPhone app.

Package relevant information about what interface is currently doing and pass that to iPhone app so it can present a different interface upon launch!

UI Elements

  1. Labels
  2. Images
  3. Groups
  4. Tables
  5. Buttons
  6. Switches
  7. Sliders – can use custom images
  8. Maps
  9. Date & Timer Labels
  10. Menus – up to 4. Each has icon & label (2 lines labels)

Specifications

  1. Display Sizes
    1. 38mm : Width (272 px) – Height (340 px)
    2. 42mm : Width (312 px) – Height (390 px)
  2. Layout:
    1. Not too much information on 1 screen (too hard to read)
    2. Use visual grouping (and separator lines)
    3. Use full width & left-align
    4. Use Menus instead of buttons when possible
    5. Limit side-by-side controls
  3. Typography
    1. System Font: San Francisco (2 variants: SF Text (19 or smaller) & SF Display (20 or larger)) – font will be switched automatically by the system for you!
    2. Limit Custom fonts (max 1)
    3. Use Built-in styles (Headline, Subhead, Body, Caption 1, Caption 2 and Footnote) as they support Dynamic Type -> auto change the spacing, line height for each size. Body – primary content, Footnote/Caption for labels, secondary content.
  4. Color
    1. Use light colors
    2. Black background (seemless blending, edge-less content).
  5. Brand Identity
    1. Avoid display logo
    2. No launch screen
    3. Do not change background color (leave it black)
  6. Home Screen icon (circular)
    1. Simplicity
    2. 2x resolution
    3. Apple automatically applies the circle
    4. Use PNG (24 bits)
    5. No black background
    6. Screen Shot 2015-06-11 at 12.01.00 pm
  7. Menu Icons
    1. Line weights:
    2. Screen Shot 2015-06-11 at 12.03.44 pm
  8. Animations: use sequence of images
Advertisements