pwa-construction
v0.0.2
Published
Display PWA Posts. use Firestore Document Data to render lit-HTML Elements with Redux State.
Downloads
3
Maintainers
Readme
Application Data
To provide a personalized experience, Apps need to know the identity of a user to securely store data in the cloud. pwa-auth is powered by The Firebase Authentication backend, consistently providing a centralized and predictable state behaviour with Redux, and declaratively render the DOM with Google Polymer's fast and light Lit-Element. This Component includes 3 HTML Tags, and 1 Boilerplate Function to display the user icon, sign up, login, log out, change account details, and delete the user's account.
pwa-construction includes Firebase's Cloud Firestore, Cloud Storage, and User Management that require Firebase setup to use this component.
Pollyfills
<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" async ></script>
Google & Firebase setup
- Add Google Analytics
- Setup Firebase Project
- Initialize Firebase Authentication - email, anonymous, google
- Initialize Firestore Database
<!-- FIREBASE -->
<script src="https://www.gstatic.com/firebasejs/6.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.2/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.2/firebase-storage.js"></script>
// Initialize Firebase
const admin = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxxx.firebaseio.com",
projectId: "xxxxxxx",
storageBucket: "xxxxxxx.appspot.com",
messagingSenderId: "xxxxxxxxxxx"
};
// REFERENCE TO SERVICES - Global
const application = firebase.initializeApp(admin);
const firestore = application.firestore();
const storage = firebase.storage();
const storageRef = storage.ref();
Website Setup:
import 'pwa-construction';
<contractors-listing></contractors-listing>
HTML Elements
| <contractors-listing>
|
| :-----------: |
Properties (in Development)
| Property | Description | Default | | :------: | :---------: | :------:|
Please send Feedback
All feedback, comments, bugs, and requests are welcome.