Chrome desktop application for web based product - angularjs

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.

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

Webview2 SPA SSO

Is it possible to setup SSO with oauth and open id connect between a SPA that runs only in the browser and another SPA that runs in a webview2 within a WPF application?
I can not manage to get it working. It does not seem like the SPA in the browser and the webview2 hosted SPA share the same session at my IdentityProvider?
WebView2 cannot directly share state with the Edge browser.
When you create WebView2 you specify (or get a default location that is specific to your app) a user data folder in which WebView2 stores all state. This includes cookies, local storage, indexeddb and so on. The Edge browser has its own separate user data folder (each Edge browser install between canary, dev, beta, and stable channels all have their own folders) and WebView2 cannot use those folders as its user data folder.
You can make a feature request on the WebView2 feedback github project.
You can read more about WebView2's user data folder at Manage user data folder in WebView2.
As a workaround I'm not sure but it may be possible to use some other API supported by the Edge browser to extract state such as WebDriver.

Is it possible to create an icon on the home screen of a phone using 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.

When using cloud foundry to deploy react apps, my users cannot see the changes unless they delete browser data

I just released my react app in a production environment in Cloud Foundry, but the only problem is that if I make changes to the app, and reupload the app, my users don't see the changes unless they clear their browser data, what can I do?
Reason for this issue: Browser is using its cache not your build to serve the client
Remedy to outcome: Inform the changes in metadata.json
metadata.json is a file that swings between request and browser checks for any mismatch with it's cache. if no then cache is served to client.
There are more then one way, thus am not telling direct solution, instead gothrough the below link will take to through various steps to follow
flexdinesh blog from dev.to

google app engine gwt application doesnt load with custom domain

I have deployed my app on google app engine here is the link
Than I have done all the stuff to create custom domain link to my app with custom domain
Obviously the static data from app is loaded without the gwt module
(Right now no data is inserted in highly replicated Datastore for sake of simplicity)
That's not an Gae issue but a Gwt issue. By the way - on my browser (Chrome 27) both domains work and the Gwt client is loaded. Without having any knowledge about your Gwt app it is really hard to debug.
There is one issue however:
http://hawt-project.appspot.com/hawtproject/hawtproject.nocache.js
has cache headers. And this might cause your browser to load an old version of your application. And this might cause your page to look broken. It would also explain why it works for me - and not for you.
Try to clean your browser cache and reload your page. If it works => Adjust Gae's static file cache settings in appengine-web.xml (If it's Java) - well you should do that anyway - caching nocache.js is just wrong.

Resources