how to set multi paged website using firebase? - javascript

i'm working on a basic website using html/css/js and Firebase fire-store to store data along with authentication to authenticate users, my website consists of multiple HTML pages which most of utilise Firebase services, and i'm wondering what would be the best way to allow all the pages (and the scripts within them) to utilise the Firebase?
should i copy the Firebase SDK and configuration code snippet into each and every html page? i believe this wouldn't be a good practice and i doubt it would even work well..
how can i achieve what i want? is there a certain Firebase service that allows me to achieve it?

Firebase comes with a JavaScript SDK for Firestore, that you can use in your scenario.
The most common way to set up such a web app is as a single-page application, so that all HTML, JavaScript and CSS is loaded into a single page without ever reloading an entirely new page. This has the big advantage that you're only loading the Firebase SDKs once.
If you have multiple HTML pages, you will have to load Firebase into each page where you use it. But on all but the first page the SDK will likely be loaded from the user's browser cache, but it'll still be a lesser experience than with a single-page application.
For a good introduction of a single-page application, I recommend taking the Cloud Firestore for web developers codelab. As a more introductory tutorial to building single-page applications with Firebase and Firestore, I'd recommend Get to know Firebase for web and its companion video.

Related

Verify that a JS script only runs in whitelisted native apps

We have a chat interface that we allow our partners to embed into their websites and web apps using a JS snippet. We want to expand to integrating with native apps using WebViews.
I am seeking an approach to verify that our snippet is only running in specific apps.
As an example: A similar functionality that is easily achieved in web apps is a domain check.
A partner / client gets a JS snippet or a URL and a key,
on page load it looks up the partner details using the key,
if they're active and approved for this service,
check the requesting domain against a list of whitelisted domains for this key.
Is it possible to uniquely identify a native app from a JavaScript function that is running in a WebView to verify the app? Perhaps - are app store unique app IDs accessible from within a WebView?
Thank you
No, it is not possible to uniquely identify a native app from a JavaScript function that is running in a WebView.
"No" is a hard answer to find on the web. Phone a friend informed me that while some native information and functionality is accessible from within WebViews, the app ID or bundle identifier is not exposed programmatically. Of course a developer could add it, but that's not helpful in verification.

User Authentication on Github Pages

I am trying to build a website on GitHub pages. This website will have User Authentication ( think of Login ). Each user will have some private pages which only he is able to access. Since GitHub only allows Static Sites, I am unsure if this is even possible here.
Since I am a complete novice to website development I don't know how this will work/ whether this will even work ?
I know that GitHub Pages do not support PHP but they do support JavaScript, thus is there any way possible for this to be implemented ( even if it includes using third party apps/ websites )?
I don't think it's possible.
GitHub only allows Static Sites
So you won't be able to store any user sessions on Github. There's likely something "creative" you can do to manage users or sessions using Javascript and/or by making requests to 3rd party sites but it's likely not going to be worth the effort, especially if you are a complete novice to web development.
Many web hosting providers offer free or trial accounts, I would suggest trying those or running a VM locally while you learn.

Web App that uses a database from a seperate API

I'm in the process of creating a web app and native mobile apps. I've done a good amount of research and the best approach so far is to set up a separate API to handle a shared database between the web app and the mobile apps. Essentially, the database will be seperate from the web app.
For the web app, our stack is going to be React/Rails. I was wondering if someone could clarify ( what is probably really obvious ) how the rails controllers are going to communicate with the separate API ?
How will we render the components from the API database?
I'm probably over complicating things, but I could use some help.

Wrap javascript API?

We are looking for your input regarding architectural design of a Javascript API and a .Net (Rest) API.
Background
We are building an enterprise solution with several different channels (Site, App etc) that are consuming data through a service layer, or API. The API is on one hand a .Net WebAPI that are communicating with the business layer but we are also thinking of wrapping external Javascript services (Communication with Google Maps, Google Analytics, Social Login etc) in some sort of API, or maybe SDK. The idea is to have the possibility to quick change components in the Javascript Library (Replace Social Login Provider with someone else).
What is your ideas regarding the Javascript? Should that just be a SDK that wraps other libraries?
Thank you,
Robert
I think it will depend on how much control you want to give to your client side development groups. If the UI development group is faster (and on different release schedules) than the group that manages this SDK, then the SDK will just get in the way (unless they are in lock step with the UI group). It would be better to just give them access to the server side APIs then let me compose the page as they see fit.

JavaScript localstorage between multiple web apps?

One of my web apps (for iOS) save something with javascript localstorage.
For some reason, I can access that data from that same web app, but not from another one, which is on the same website.
I really need to do this, so why doesn't it work?
And, more importantly, how can I fix it?
This is just a hack, you can use web messaging between apps to share localstorage data.
Resources you can find about web messaging
https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
http://www.w3.org/TR/webmessaging/

Categories

Resources