Adding macOS notes on the rich notification article

chrome/common/extensions/docs/templates/articles/richNotifications.html

 <h1 id="richNotifications">Rich Notifications</h1>
 
+<p class="note">
+<strong>Platform difference:</strong> In Chrome version 59, notifications
+appear differently for Mac OS X users. Instead of Chrome's own
+notifications, users see native Mac OS X notifications.
+<a href="https://developers.google.com/web/updates/2017/04/native-mac-os-notifications">Learn more in this article</a>.
+</p>
+
 <p>The <a href="https://developer.chrome.com/apps/notifications">rich notifications API</a>
 lets you create notifications using templates and
 show these notifications to users in the user's system tray:
 </p>
 
 <p><img src="{{static}}/images/notifications.png"
      alt="Notifications in system user tray">
 </p>
 
 <h2 id="look">How they look</h2>
@@ skipping 50 matching lines @@
 
 <p>
 Notifications can be assigned a priority between -2 to 2.
 Priorities < 0 are shown in the ChromeOS notification center, and produce an
 error on other platforms.
 Priority 0 is the default priority.
 Priorities > 0 are shown for increasing duration and
 more high priority notifications can be displayed in the system tray.
 </p>
 
+<p class="note">
+<strong>Platform difference:</strong> The <code>priority</code> does not
+affect the order of notifications in Chrome version 59+ on Mac OS X.
+</p>
+
 <p>
 In addition to displaying information,
 all notification types can include up to two action items.
 When users click on an action item,
 your app can respond with the appropriate action.
 For example,
 when the user clicks on "Reply",
 the email app opens and the user can complete the reply:
 </p>
 
@@ skipping 53 matching lines @@
 </pre>
 
 <h3 id="image">Create image notification</h3>
 
 <p>
 The <code>image</code>
 template type also includes an <code>imageUrl</code>, which is a link to
 an image that is previewed within the notification:
 </p>
 
+<p class="note">
+<strong>Platform difference:</strong> Images will not be display to users using
+Chrome version 59+ on Mac OS X.
+</p>
+
 <pre>
 var opt = {
   type: "basic",
   title: "Primary Title",
   message: "Primary message to display",
   iconUrl: "url_to_small_icon",
   imageUrl: "url_to_preview_image"
 }
 </pre>
 
 <p>
 In Chrome Apps, due to a strict <a href="contentSecurityPolicy">Content Security Policy</a>
 these URLs must point to a local resource or use a
 <a href="app_external">blob or data URL</a>.
 Use a 3:2 ratio for your image; otherwise a black border frames the image.
 </p>
 
 <h3 id="list">Create list notification</h3>
 
 <p>
 The <code>list</code> template displays <code>items</code>
 in a list format:
 </p>
 
+<p class="note">
+<strong>Platform difference:</strong> Only the first list item is
+displayed to users in Chrome version 59+ on Mac OS X.
+</p>
+
 <pre>
 var opt = {
   type: "list",
   title: "Primary Title",
   message: "Primary message to display",
   iconUrl: "url_to_small_icon",
   items: [{ title: "Item1", message: "This is item 1."},
           { title: "Item2", message: "This is item 2."},
           { title: "Item3", message: "This is item 3."}]
 }
 </pre>
 
 <h3 id="list">Create progress notification</h3>
 
 <p>
 The <code>progress</code> template displays a progress bar where current
 progress ranges from 0 to 100:
 </p>
 
+<p class="note">
+<strong>Platform difference:</strong> In Chrome version 59+ on Mac OS X, the
+progress bar displays as a percentage value in the title of the notification
+instead of displaying a progress bar.
+</p>
+
 <pre>
 var opt = {
   type: "progress",
   title: "Primary Title",
   message: "Primary message to display",
   iconUrl: "url_to_small_icon",
   progress: 42
 }
 </pre>
 
-
 <h2 id="events">Listening for and responding to events</h2>
 
 <p>
 All notifications can include event listeners and event handlers
 that respond to user actions (see <a href="events">chrome.events</a>).
 For example,
 you can write an event handler to respond to an
 $(ref:notifications.onButtonClicked) event.
 </p>
 
 <p>Event listener:</p>
 
 <pre>
 chrome.notifications.onButtonClicked.addListener(replyBtnClick);
 </pre>
 
 <p>Event handler:</p>
 
 <pre>
 function replyBtnClick {
         //Write function to respond to user action.
 }
 </pre>
 
 <p>Consider including event listeners and handlers within the
   <a href="app_lifecycle#create_event_page">event page</a>,
 so that notifications can pop-up even when the app or extension isn't running.
 </p>
-