Polymerfire
Polymer Web Components for Firebase
Install / Use
/learn @FirebaseExtended/PolymerfireREADME
Status
This library is no longer actively maintained. We do not recommend using this library in production.
If you maintain a fork of this library that you believe is healthier than the official version, we may consider recommending your fork. Please open a Pull Request if you believe that is the case.
<firebase-app>
The firebase-app element is used for initializing and configuring your connection to firebase.
<firebase-auth>
firebase-auth is a wrapper around the Firebase authentication API. It notifies
successful authentication, provides user information, and handles different
types of authentication including anonymous, email / password, and several OAuth
workflows.
Example Usage:
<firebase-app
auth-domain="polymerfire-test.firebaseapp.com"
database-url="https://polymerfire-test.firebaseio.com/"
api-key="AIzaSyDTP-eiQezleFsV2WddFBAhF_WEzx_8v_g"
storage-bucket="polymerfire-test.appspot.com"
messaging-sender-id="544817973908"
project-id="polymerfire-test">
</firebase-app>
<firebase-auth id="auth" user="{{user}}" provider="google" on-error="handleError">
</firebase-auth>
The firebase-app element initializes app in firebase-auth (see
firebase-app documentation for more information), but an app name can simply
be specified at firebase-auth's app-name property instead.
JavaScript sign-in calls can then be made to the firebase-auth object to
attempt authentication, e.g.:
this.$.auth.signInWithPopup()
.then(function(response) {// successful authentication response here})
.catch(function(error) {// unsuccessful authentication response here});
This popup sign-in will then attempt to sign in using Google as an OAuth
provider since there was no provider argument specified and since "google" was
defined as the default provider.
<firebase-document>
The firebase-document element is an easy way to interact with a firebase location as an object and expose it to the Polymer databinding system.
For example:
<firebase-document
path="/users/{{userId}}/notes/{{noteId}}"
data="{{noteData}}">
</firebase-document>
This fetches the noteData object from the firebase location at
/users/${userId}/notes/${noteId} and exposes it to the Polymer
databinding system. Changes to noteData will likewise be, sent back up
and stored.
<firebase-document> needs some information about how to talk to Firebase.
Set this configuration by adding a <firebase-app> element anywhere in your
app.
<firebase-query>
firebase-query combines the given properties into query options that generate
a query, a request for a filtered, ordered, immutable set of Firebase data. The
results of this Firebase query are then synchronized into the data parameter.
Example usage:
<firebase-query
id="query"
app-name="notes"
path="/notes/[[uid]]"
data="{{data}}">
</firebase-query>
<template is="dom-repeat" items="{{data}}" as="note">
<sticky-note note-data="{{note}}"></sticky-note>
</template>
<script>
Polymer({
properties: {
uid: String,
data: {
type: Object,
observer: 'dataChanged'
}
},
dataChanged: function (newData, oldData) {
// do something when the query returns values
}
});
</script>
Related Skills
node-connect
349.2kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
109.5kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
349.2kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
349.2kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。
