Is it possible to create an icon on the home screen of a phone using reactJS? - reactjs

I built a website with reactjs and the client wants that the web automatically creates a link on the phone home screen that opens chrome to the specific url of my website.
Is this possible without wrapping the reactjs with another framework like Cordoba, Ionic or React Native?
Thank you so much

A web application has no access to the device's internal APIs. Web applications are naturally subject to the browser's features, restrictions and limitations in which it is running on. Even native applications has to request access from the user to have such permissions. What your client asks is, regretably, impossible.

I agree with the above answer by #Lux Ilustre. You can't add the application link to the phones homepage without the users permission. But it is possible to make your website installable with a PWA. You can create a PWA with a manifest file and a service-worker file which makes possible to install the website to the users phone and load assets from cache which makes it possible to make some parts of your website function offline.

Related

Confusion of which Azure AD app Authentication platform redirect configuration to use

I am utterly confused about which platform configurations to use under Azure AD app's Authentication blade.
There are 2 platform configurations I am confused about:
"Web"
"Single-page application"
The app I have registered is a React JS app, which in my mind, is both a Web app AND a SPA.
This "rabbit hole" get's deeper as I'm trying to configure redirect URIs so i can use MSAL.js to authenticate and authorize within the app.
Essentially, it comes down to this (for my http://localhost:5000 development environment):
If I specify my URI under Web, then I get error:
AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type.
And from what ive been reading, Web platform is the way to go (not SPA).
Can somebody shed any light onto this convoluted area?
Which platform configuration should I be using for a ReactJS app?
Thank you.
• React js is mostly used to develop SPA (single page application) as it is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages. This means that the URL of your website will not change completely (page will not reload), instead it will keep getting content and rewriting the DOM with it instead of loading a new page. The goal is faster transitions that make the website feel more like a native app.
• When building you react-app, you can see that there is only one App.js from where your entire web-app is loaded in fragments and components. This behaviour of rendering components and pages on a single page and changing the DOM (is a single page behaviour and hence the name), instead of loading a new page with new content, this makes it feel like a single application.
• So, when you are using react js as a building code platform, I would suggest you use SPA as the platform in Azure AD app registration. That does not mean you cannot use react js to create an app on a remote web server and deploy it, you can but for hosting react js coded application script and running it as a worker process and provide a desirable output you need script execution backend runtime like ‘ngrok’ and ‘node.js’ to supplement the execution and provide compatibility with the web server environment.
Please refer below links for more information: -
Why is React Js called as Single Page Application
https://learn.microsoft.com/en-us/answers/questions/315313/azure-app-registration-causing-the-following-error.html

Is subdomain possible in React JS

Hi I am creating an app which have 3 parts- Admin, Client and User. Admin has all the features, while client has some of the features while client has some. So I thought to have a common code base and will be providing access based on subdomain.
Now I could not find any suitable article across the internet for the same.
Lets say the user clicks the link admin.company.in/login it will open admin login page.
Similarly, client.company.in/login will open client's login page
How can I achieve this and also test it locally?
React has nothing to do with this. You have to build two different react applications and server them client.company.in and admin.company.in respectively. To achieve this you have to deploy the application to the server and server with webserver (eg:nginx).

iOS Universal link support in salesforce

We are looking to deep link our mobile application from Web page.
As per apple's documentation it require to have apple-app-site-association json file at root of https://xxx-salesforce.com/
Can anybody tell me how to place apple-app-site-association json file at root of salesforce domain?
We are using a visual force page where we want to put our app links.
Regards,
Manish Kumar
You write that you are interested in deep linking into your mobile application from a web page. As you mention the AASA file, you must be talking about an iOS app and not an Android app. Check this link for a good overview of what is required to set up deep linking to iOS apps: https://blog.branch.io/how-to-setup-universal-links-to-deep-link-on-apple-ios-9/. Note that you would have to configure your own AASA file and host that on your own domain, not the Salesforce domain. You would then be able to use the deep links you create on Salesforce pages - or any other web pages, for that matter.
If I have misunderstood and you are actually hoping to deep link into an app that has been written by Salesforce, well this is a situation where Salesforce themselves would need to host the AASA file and configure the iOS project to support the deep linking scheme. This is something that only Salesforce is in a position to do.

Chrome desktop application for web based product

Chrome desktop application for web based product. Is this possible in chrome web apps
Product has following items
Angular JS --- Front-end framework
Rails --- JSon Communication
I have created the chrome desktop apps, which will directly open the site with icon. It's more feel like desktop application. In any OS it will run. The thing is working fine.
Problem:
It will always download the js and css files.
How i want to develop the chrome desktop apps
When launching the chrome desktop app, save all the assets locally.
Whenever chrome desktop app launched, it should refer the locally saved assets (I mean angular js files and css)
Before launching the chrome desktop app, it should request the server whether the assets are changed or not. If changed delete the locally saved files and save the latest one.
If assets are not changed use the old assets files. In this way, we can avoid the initial loading of all the files from the server.
Anybody did it previously or chrome provide any options for this?
Ideas are welcome!
Its totaly possible.
Read these docs: https://developer.chrome.com/apps/offline_apps
By myself i pack the css and javascript into the chrome app so you never have to download them on startup. But in your context its more like a webview app with caching functions.
You can use indexeddb or other local storage APIs to store assets in the client computer.
You can solve this on the web app side by employing ApplicationCache, which specifically fits what you describe.
Using the cache interface gives your application three advantages:
Offline browsing - users can navigate your full site when they're offline
Speed - resources come straight from disk, no trip to the network.
Resilience - if your site goes down for "maintenance" (as in, someone accidentally breaks everything), your users will get the offline experience
The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly, even if the user presses the refresh button while they're offline.
While it is primarily an offline-fallback technique, it allows you to cache resources locally just for speedup purposes. Actually having an offline fallback is a bonus in this case.
Actually building a Chrome app for this will probably not help - you cannot update local resources from your web app side, you'll need to update your app through WebStore channels only.

develop Web sites for mobiles

I want to implement "mobile website provider" tool. Basically, It intake desktop website url and generate a mobile version of website without edit/add additional content to the desktop website. I am planning to design a product like (what mofuse.com does. This website create mobile websites). This tool should be hassle free to client(who are not tech savvy.)
1.Q) I want to know kind of functionality involved in this process.
2.Q) In Java Technology, I need the tool set and functionality of this actitity.
As I am new to this mobile application environment. Any information(web links) regarding this will be appreciated.
Update:
its not like skweezer.com.
I had a website and I want to "mobile"ize it. 1) What kind of java tool set I have to use to create mobile web site? 2) How to test in multiple mobile devices 3) How the domain name will be created for mobile websites.
Check out our Wapple Architect tech (http://wapple.net) - we allow you to use the same content from web to mobile, but if it's mobile, instead of outputting the html, use a web service to turn it into the right content for that particular handset.
Mobilizes the same domain, no need for m.yourdomain.com or anything like that.
Check http://wapple.net on a mobile for example!
there are certain plugins which mobilise your website .
they check user agent and if user agent is of mobile browser they load another css of mobile and if you want to redirect some another redirect it ther.
you dont have to buy separate domain make sub domain or cname like
m.yourdomain.ccom
wap.yaourdomain.com
try some javacripts code which detect browser type and redirect accordingly.
The best place to learn about mobile toolkits are
WURFL - The open source community built around profiling devices and managing their capabilities (http://wurfl.sourceforge.net/)
Mobile Elements - A tool to help you build mobile sites using a proxy type approach (http://www.mobilelements.com)
Device Atlas - A device profiling tool (http://www.deviceatlas.com)

Resources