Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode

Chrome for Developers · Intermediate ·📰 AI News & Updates ·10y ago

Key Takeaways

Chrome 48 introduces custom buttons in notifications, a new DevTools Security panel, and Presentation mode for mobile apps, allowing developers to enhance user engagement, ensure site security, and cast content to a second screen.

Full Transcript

[Music] Chrome 48 allows users to take immediate action on notifications with custom buttons the new developer tools security panel makes it easier to debug mix content issues and ensure your site is properly served over https and you can now add presentation mode to mobile apps easily casting content to a second screen these are just some of the new features for developers in Chrome 48 let's dive in and see what's new in Chrome until recently re-engaging with users of your website has been a challenge often involving bulk email but browser-based notifications changes that allowing you to send users timely relevant notifications for example letting them know that tickets to their favorite band are on sale or about a new chat message in Chrome 48 you can now add custom buttons to Notifications enabling users to complete the task entirely within the notification imagine that previous example a notification that tickets to your favorite band just went on sale with a buy now button to add buttons to your notifications add an array of actions including a title an action ID to the not notification info object if the user clicks on one of the actions that information is passed in the notification click event be sure to provide buttons that are specific and allow users to quickly respond to the notification and make sure that they're different from the default action Peter beverl has a cool sample you can try at the URL below we all expect sites that deal with our personal information to be served over https it's just standard practice as we start to build apps that take advantage of powerful features like service worker it's simply a requirement some apis that we've used for years without https like geolocation or device motion may require secure Connections in the future https helps to protect the Integrity of our apps and our users information there's a new security panel and developer tools to help with this at a glance it tells you whether the page is secure or not and can help you diagnose https issues it shows information about the certificate the protocol and Cipher and the status of all of the sub resources to see how it works in some of the different errors it'll help you debug open the new security panel and developer tools and check out https bad ssl.com how often have you gathered aou group of friends or co-workers around your phone to show them the latest meme or work video or something wouldn't it be awesome to be able to send it to a second larger screen directly from your phone Chrome 48 on Android now allows sites to present to Google Cast devices using the standard space presentation API and the cast web SDK the presentation API allows you to leverage a second display while using your mobile device as the controller not only to move between slides or choose which video plays next but as a game controller or input device imagine a racing game that uses your phone as the steering wheel or an interactive tutorial to help students improve their math skills there's some other cool new features in Chrome 48 like Network information. download Maxs which provides the maximum bandwidth of a device one use case warn users about a large transfer on cellular networks that might eat up their allotted band withd and there's the new get all methods that simplify bulk index DB interactions these are just some of the new features in Chrome 48 for developers be sure to check out the description below to get links to more details and learn about some of the other new features if you haven't already subscribe to our Chrome Developers YouTube channel to stay up to date with the latest news I'm Pete leage and as soon as Chrome 49 is released I'll be right here to tell you what's new in Chrome [Music]

Original Description

Chrome 48 allows users to take immediate action on notifications with custom buttons; the new Developer Tools Security panel makes it easier debug mixed content issues and ensure your site is properly served over HTTPS and you can now add presentation mode to mobile apps, easily casting content to a second screen. Pete LePage has all the details and how you can use these new developer features in Chrome 48! Custom Buttons in Notifications * Using actions from a service worker in the Notification Spec - https://notifications.spec.whatwg.org... * Peter Beverloo’s Notification Generator - https://tests.peter.sh/notification-g... New Developer Tools Security Panel * DevTools docs on the new Security Panel - https://developers.google.com/web/too... * BadSSL.com for testing BadSSL errors - https://badssl.com Presentation Mode * Presentation mode demo - https://storage.googleapis.com/presen... * W3C Spec for the Presentation API - https://w3c.github.io/presentation-api/ * Cast Web SDK Docs - https://developers.google.com/cast/do... Other cool stuff * Detecting maximum connection speed - https://developer.mozilla.org/en-US/d... * getAll methods added to IndexedDB - https://googlechrome.github.io/sample... More info * Chrome 48 Beta announcement - http://blog.chromium.org/2015/12/chro... Subscribe to the Chrome Developers channel here: https://goo.gl/WkxCU5
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Chrome for Developers · Chrome for Developers · 57 of 60

1 Polymer Performance Patterns (The Polymer Summit 2015)
Polymer Performance Patterns (The Polymer Summit 2015)
Chrome for Developers
2 Polymer Power Tools (The Polymer Summit 2015)
Polymer Power Tools (The Polymer Summit 2015)
Chrome for Developers
3 Chrome Dev Summit 2014 – Chrome Case Studies
Chrome Dev Summit 2014 – Chrome Case Studies
Chrome for Developers
4 Web Directions Code 2015 round up
Web Directions Code 2015 round up
Chrome for Developers
5 Maintainable Code - HTTP203
Maintainable Code - HTTP203
Chrome for Developers
6 iron-ajax… wat?! -- Polycasts #26
iron-ajax… wat?! -- Polycasts #26
Chrome for Developers
7 The Guardian - Supercharged
The Guardian - Supercharged
Chrome for Developers
8 ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
Chrome for Developers
9 #AskPolymer: Rob answers all the questions ever -- Polycasts #27
#AskPolymer: Rob answers all the questions ever -- Polycasts #27
Chrome for Developers
10 The Future of JavaScript - HTTP203
The Future of JavaScript - HTTP203
Chrome for Developers
11 Data Binding 101 -- Polycasts #28
Data Binding 101 -- Polycasts #28
Chrome for Developers
12 The Guardian part 2 - Supercharged
The Guardian part 2 - Supercharged
Chrome for Developers
13 The Future of Web Audio: with Chris Wilson and Chris Lowis
The Future of Web Audio: with Chris Wilson and Chris Lowis
Chrome for Developers
14 Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome for Developers
15 Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Chrome for Developers
16 #AskPolymer: How do you make the show? -- Polycasts #29
#AskPolymer: How do you make the show? -- Polycasts #29
Chrome for Developers
17 Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Chrome for Developers
18 Binding to Objects -- Polycasts #30
Binding to Objects -- Polycasts #30
Chrome for Developers
19 Player FM - Supercharged
Player FM - Supercharged
Chrome for Developers
20 Where’s the Designer? #AskPolymer -- Polycasts #31
Where’s the Designer? #AskPolymer -- Polycasts #31
Chrome for Developers
21 Jake Beats Wikipedia - HTTP203
Jake Beats Wikipedia - HTTP203
Chrome for Developers
22 Supercharged Observers! -- Polycasts #32
Supercharged Observers! -- Polycasts #32
Chrome for Developers
23 Jai's Web blog - Supercharged
Jai's Web blog - Supercharged
Chrome for Developers
24 Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Chrome for Developers
25 What about internationalization? #AskPolymer -- Polycasts #33
What about internationalization? #AskPolymer -- Polycasts #33
Chrome for Developers
26 Developing for Billions (Chrome Dev Summit 2015)
Developing for Billions (Chrome Dev Summit 2015)
Chrome for Developers
27 Google+ Performance Improvement Comparison
Google+ Performance Improvement Comparison
Chrome for Developers
28 Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Chrome for Developers
29 Progressive Web Apps (Chrome Dev Summit 2015)
Progressive Web Apps (Chrome Dev Summit 2015)
Chrome for Developers
30 Instant Loading with Service Workers (Chrome Dev Summit 2015)
Instant Loading with Service Workers (Chrome Dev Summit 2015)
Chrome for Developers
31 Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Chrome for Developers
32 Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Chrome for Developers
33 Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Chrome for Developers
34 Polymer - State of the Union (Chrome Dev Summit 2015)
Polymer - State of the Union (Chrome Dev Summit 2015)
Chrome for Developers
35 Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Chrome for Developers
36 Introduction to RAIL (Chrome Dev Summit 2015)
Introduction to RAIL (Chrome Dev Summit 2015)
Chrome for Developers
37 DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
Chrome for Developers
38 RAIL in the real world (Chrome Dev Summit 2015)
RAIL in the real world (Chrome Dev Summit 2015)
Chrome for Developers
39 #ChromeDevSummit talks are up - W00T! -- Polycast #34
#ChromeDevSummit talks are up - W00T! -- Polycast #34
Chrome for Developers
40 V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
Chrome for Developers
41 Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Chrome for Developers
42 Owning your performance: RAIL (Chrome Dev Summit 2015)
Owning your performance: RAIL (Chrome Dev Summit 2015)
Chrome for Developers
43 HTTP/2 101 (Chrome Dev Summit 2015)
HTTP/2 101 (Chrome Dev Summit 2015)
Chrome for Developers
44 Leadership Panel (Chrome Dev Summit 2015)
Leadership Panel (Chrome Dev Summit 2015)
Chrome for Developers
45 Build Processes, Totally Tooling Tips (S2, Ep 5)
Build Processes, Totally Tooling Tips (S2, Ep 5)
Chrome for Developers
46 Accessibility (Chrome Dev Summit 2015)
Accessibility (Chrome Dev Summit 2015)
Chrome for Developers
47 Binding to Arrays -- Polycasts #35
Binding to Arrays -- Polycasts #35
Chrome for Developers
48 HTTP2 - HTTP203
HTTP2 - HTTP203
Chrome for Developers
49 Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome for Developers
50 Call For Submissions - Supercharged
Call For Submissions - Supercharged
Chrome for Developers
51 Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Chrome for Developers
52 Testing AJAX with Web Component Tester -- Polycasts #37
Testing AJAX with Web Component Tester -- Polycasts #37
Chrome for Developers
53 Slack: Extended Xmas Special - Supercharged
Slack: Extended Xmas Special - Supercharged
Chrome for Developers
54 Browser testing with Travis & Sauce Labs -- Polycasts #38
Browser testing with Travis & Sauce Labs -- Polycasts #38
Chrome for Developers
55 Optimize for production with Vulcanize -- Polycasts #39
Optimize for production with Vulcanize -- Polycasts #39
Chrome for Developers
56 Highlights from Chrome Dev Summit 2015
Highlights from Chrome Dev Summit 2015
Chrome for Developers
Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome for Developers
58 Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Chrome for Developers
59 How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
Chrome for Developers
60 Colors – DevTools Tonight #0 (Pilot)
Colors – DevTools Tonight #0 (Pilot)
Chrome for Developers

Chrome 48 introduces new features for developers, including custom buttons in notifications, a DevTools Security panel, and Presentation mode for mobile apps. These features enable developers to enhance user engagement, ensure site security, and cast content to a second screen.

Key Takeaways
  1. Add custom buttons to notifications using the notification info object
  2. Use the DevTools Security panel to debug mixed content issues and ensure site security
  3. Implement Presentation mode in mobile apps using the Presentation API and Cast Web SDK
💡 Chrome 48 provides new features for developers to enhance user engagement, ensure site security, and cast content to a second screen, making it easier to build powerful and secure web applications.

Related Reads

Up next
🚨 MANUS USERS: BACK UP NOW! What You Need to Know + This Week in AI
Alicia Lyttle
Watch →