React service worker not working? - reactjs

Hello Guys !
Today I deployed an app online to test it but didn't understood very well why it didn't work.
What I did :
I've created a sample react app using bootstrap and used firebase to deploy it. Here is the link.
What was expected ?
I wanted the app to be able to be downloaded on the phone as angular.io is.
Reality :
Nothing special. It's in fact registered in service worker and very fast to load and download, but nothing more.
Problem now :
I've done it today two times but wasn't able to use it as well as the image of service workers I had.
What should I do ?

You need a a 144px square PNG icon to be defined in your manifest.json to enable the web app install banner.
You can validate whether your application can be added to your homescreen from Chrome on a desktop computer.
To do so, open the Chrome developer tools on your website, open the 'Application' tab, click 'Manifest' in the left navigation and then click 'Add to homescreen'.
If there's a problem adding to homescreen an error will appear in the console, when trying it on the website you mentioned I received the error 'Site cannot be installed: a 144px square PNG icon is required, but no supplied icon meets this requirement'.
You can read more about the requirements for web app install banners here https://developers.google.com/web/fundamentals/app-install-banners/.

Related

Hosted React application shows blank page onn refresh

I have created a basic react login application using an external API from the following docuumentation : https://javascript.plainenglish.io/basic-react-login-using-external-api-e33322e480cd
So, I have made few changes in the code for routing part and it was working fine in the localhost.
Later I have created a build file for the react application and hosted it on the server.
After hosting I encountered the page showing blank so when I looked for a solution I came across this How to fix the white screen after build with create-react-app?
and it says to overcome we have to add "homepage":".", in package.json file
so I have added it in the package.json and created a build file.
On hosting that build file I was able to successfully see the homepage, but later what the problem is I'm unable either refresh the page or login to the page using the credentials. When I perform either of those actions the page shows the error not found message.
Can anyone tell me what the problem I'm facing and any mistake in my application or it might be the problem on the server side.
What is the reason that making me not able to stay on page when refreshing and also why the page doesn't redirect to other page on entering the credentials.
The hosted application is this : https://www.bizwy.in/signin
My github repo of the project is this : https://github.com/BhupathiVenkataSaiCharan/auth-app
Let me know if you need something to exactly understand my problem. And guide me through the problem and help me solve it.

Cypress can't load fonts from absolute url while open through its dashboard

I've a simple web server for e2e purposes, built with create react app and react app rewired.
Cypress runs perfectly against this web server, the only issue I am facing is about the fonts.
They are included with an external url.
Since I launch the web server regularly, the react application is able to be fed with the url for the proper fonts.
Once Cypress open the browser with the command cypress open the console log shows this error and fonts indeed are not loaded.
GET https://[URL.EXTENSION]/[FONT.WOFF2] net::ERR_EMPTY_RESPONSE
BEGIN EDIT
I noticed that the issue occurs on my company VPN and not on my regular network configuration, so as I already said, the fonts are not loaded just in the browser of Cypress, if I
view the website from a regular browser
access those fonts url copying them in the browser
any issue is occurring
END EDIT
Where is lying the error? Do I miss something in the configuration?
Thanks

After i create a APK to PWA i see toolbar of browser

I have a problem with my first PWA.
I have created one with reactjs and configured good manifest.
I follow step by step google guide.
PWA, works perfectly, and i see "add to home button".
After QA i wanted to publish it in store.
I used https://appmaker.xyz/pwa-to-apk.
Now i have app publish in the store but when i open it, i see a browser toolbar and i can't use it as a native app.
Someone can help me?
How about using TWA (Trusted Web Activity)?
Using Trusted Web Activities
This can be achieved by proving that the app and the web trust each other.
If you can prove it, you can prevent the browser toolbar from being displayed.
I'm sorry if you don't get the answer you want.

Show React Native app in "Open in" dialogue of another app

I'm new at creating React Native apps and I would like to know if there is a doc or a package that allow us to open my app from an external one by clicking on the "share" button, that open the "open in... / share" dialogue modal
Thanks by advance
EDIT :
I have read the instructions given in the following link : React Native Share Extension
but the thing is that it asks to edit some Java files for Android, and other ones for iOS. Since I'm working with javascript files, where am I supposed to find the files the documentation tells me to edit ?
There is nothing built-it to do this, but there's also some useful packages for doing that, the catch is that you will need to write some native code to make it work
first there is React-native-share-extension forn handle share intents, and for more advanced stuff there is react-native-deep-link for handling for example an url of a video, or a download url, or a mail intent .
Both packages requires to edit native ;-;

Angular FullStack Two instances same project

I use the angular-fullstack/generator-angular-fullstack for my project and for testing purpose I would like to run my project on two different browser windows.
The problem is that I got the same input for each text field on both browsers simultaneously.
For example:
On the login page, if I type my email address on one browser it will appear on the login email field in the other browser.
Any ideas of what I'm doing wrong?
Your project uses browserSync.
When your project is opened using localhost:3000, you should browse to localhost:3001 that will give you a BrowserSync configuration page.
Under Sync Options on that page you can disbable what to sync.

Resources