Platinum elements可用于提供诸如推送通知,脱机使用,与附近的蓝牙设备通信等功能,并提供将网页转换为真正的Web应用程序的功能。
下表列出了Polymer.js中的platinum元素。
Platinum Bluetooth
它用于使用<platinum-bluetooth>元素与附近的蓝牙设备进行交互。
您可以通过运行以下命令在应用程序中使用此元素,以将其安装在项目目录中。
bower install --save PolymerElements/platinum-bluetooth
例子
以下示例指定了Polymer.js中铂-蓝牙元素的使用。创建一个index.html文件,并在其中添加以下代码。
<!doctype html> <html> <head> <title>Polymer Example</title> <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script> <link rel = "import" href = "bower_components/polymer/polymer.html"> <link rel = "import" href = "bower_components/paper-styles/demo-pages.html"> <link rel = "import" href = "bower_components/paper-button/paper-button.html"> <link rel = "import" href = "bower_components/platinum-bluetooth/platinum-bluetooth-device.html"> </head> <body> <section> <paper-button raised>Get bluetooth device</paper-button> </section> <script src = "platinum_bluetooth.js"></script> </body> </html>
现在,创建另一个名为Platinum_bluetooth.js的文件,并包含以下代码-
document.addEventListener('WebComponentsReady', function() { var mybatteryDevice = document.querySelector('platinum-bluetooth-device'); var mybutton = document.querySelector('paper-button'); mybutton.addEventListener('click', function() { console.log('The requested bluetooth device advertising a battery service...'); mybatteryDevice.request().then(function(device) { console.log('Bluetooth device has been found...'); console.log('The device name is: ' + device.name); }) .catch(function(error) { console.error('Sorry!No device found...', error); }); }); });
输出
要运行该应用程序,请导航到创建的项目目录并运行以下命令。
polymer serve
现在打开浏览器并导航到http://127.0.0.1:8081/。以下将是输出:
当您单击该按钮时,它将在控制台中显示为“请求的蓝牙设备宣传电池服务…”消息,并且如果未找到任何设备,则会显示一条错误消息。
Platinum Push Messaging
它用于使用<platinum-push-messaging>元素定义接收到的推送消息,可以放置在任何位置,但在页面中仅需使用一次。
您可以通过运行以下命令在应用程序中使用此元素,以将其安装在项目目录中。
bower install --save PolymerElements/platinum-push-messaging
推送消息订阅仅在需要配置Google Cloud Messaging的Google Chrome中可用,并且Chrome使用清单文件中存在的gcm_sender_id字段来链接页面。
通知详情
通知消息可以三种方式显示:
使用第一种方法,您可以通过指定URL来获取通知消息。
<platinum-push-messaging message-url = "message_notification.json"> </platinum-push-messaging>
使用第二种方法,您可以从服务器的正文中发送通知消息。
<platinum-push-messaging></platinum-push-messaging>
使用第三种方法,可以在元素上手动指定属性。
<platinum-push-messaging title = "Message Application" message = "Your application data is updated in the background" icon-url = "icon.png" click-url = "message_notification.html"> </platinum-push-messaging>
如果您使用的是Google Cloud Messaging服务,则可以将推送消息发送到浏览器。按照此链接中给出的说明,在服务器和客户端应用程序之间发送消息。
作者:terry,如若转载,请注明出处:https://www.web176.com/polymer/2336.html