Created a simple PWA, made the manifest file and service worker and it works great in Chrome on my iMac. Looking at the console, I can see that the service worker is registered and running and it recognizes the manifest file. Simulate network loss and it still runs just fine like it's supposed to. All good, right?
When I serve it from an HTTPS it opens in the browser on the phone just fine and adds to the home screen just as it should but when I try to run it from the icon on the home screen, all I get is a blank white screen.
If I delete the icon and then serve it from an HTTP connection and save it to the home screen, it does everything just as it should, runs from the icon you place on the home screen (when done from http) but of course won't run offline.
What am I doing wrong? Not even sure where to start looking!
the problem could be the CROS access origin for HTTPS requests between your PWA and your API server . had the same issue with my PWA. it worked fine in chrome or desktop and run fine the first time I was opening it in mobile chrome but when the services worker get registered it return CROS access origin.
to debug this problem I recommend using chrome inspect on your mobile device.
you can find the guide here
check
Access-Control-Allow-Origin
between API and PWA servers.
you must allow your PWA URL to access to API server . you can either use the PWA URL or * to access all URLs.
check
Access-Control-Allow-Headers
in your API server.
if you are sending authentication or cache-control header with your requests you must add them to Access-Control-Allow-Headers.
and your PWA and API URL must have a valid SSL certificate.
also, check start_url in manifest.json
you have to set the full URL including protocol in start_url, index.html is not necessary.
Related
HTTPS conflicts with HTTP
I make my first full-stack project on React and NODEjs and deployed it on netlify.
My backend server runs on HTTP localhost.
And here is a problem:
My app works on my Mac in Chrome but doesn't work properly on other browsers and computers.
Other computers can download index.js (display sign-up and sign-in pages) and it seems there is no problem with CORS but authentication doesn't work.
Safari logs mistakes:
[blocked] The page at https://MYAPP.netlify.appwas not allowed to display insecure content from http://localhost:3500/register.
Not allowed to request resource
XMLHttpRequest cannot load http://localhost:3500/register due to access control checks.
I don't understand why the app works on my MAC but
doesn't on other computers and can't find an answer on how to solve this HTTPS - HTTP conflict
I have tried to find a problem in CORS but it looks like CORS is ok. Also, I tried rewriting the server with HTPPS but it didn't work.
I've never worked with Netlify, so I could be wrong, but I suspect your problem isn't directly related to Netlify.
The Safari error message indicates that your frontend is trying to talk directly to localhost. localhost is an alias for "the computer that is making the connection attempt" under normal circumstances. This means that when someone runs your frontend, the browser tries to talk to the backend running on the same computer that the browser is running on.
This works on your computer in Chrome because you probably have the backend running on your computer for testing. Safari is only complaining that the frontend was loaded via HTTPS but is trying to talk to non-HTTPS servers. It is not stating that it can't talk to the backend, it's stating that it won't even try.
If I'm right and you shut down the back end on your computer, it will start to fail on your computer as well, even on Chrome.
If this is the problem, the solution can be one of two things: You can either run the backend somewhere where it has a domain name/ip address that everyone can connect to, or you need to run a proxy for your backend somewhere where it also meets those conditions, and has a way to pass the request on to where your full backend does run.
You need to find a way to run your backend somewhere other than your own computer or have something somewhere else proxy requests to your computer which then gets relayed to the localhost address. How you go about that will depend on things you didn't specify in the original question.
Having a very confusing issue with passport and our node/express/react application using a domain name we purchased.
On our ip address for the server, we can access the app fine, the post for the /login works, each user gets their own passport session, and can use the logout post fine.
However when we use Microsoft IIS to reverse proxy to http:localhost:3000/ the website will show using the domain, but when we try to login it takes almost 30 seconds before it succeeds, you will have to refresh the page and the user will have their auth and can visit the site. /logout post acts the exact same way. All of the gets work fine.
This is the cache-related issue you could solve the issue by disabling the cache and kernel cache in iis.
1)Open iis manager, select your site.
2)Double click on the output caching from the middle pane.
3)On the right side under Actions, click on Edit Feature Settings
4)Uncheck Enable Cache and Enable kernel cache
5)Click OK
You could also disable client cache in iis:
Client Cache
When I am using desktop browser(Chrome) everything is fine, I type appname.herokuapp.com and I got redirected to https:// but when I try to enter my application on mobile version of Chrome for android and I do the same thing it gets redirected to http:// and then I have to add "s" to URL. What could be a reason behind this?
App is wrriten with react.js, node.js, express, no database.
I have a project, It's a web application that requires Windows Authentication.
I've setup an Active Directory at home using my NAS virtualization. Then I've created a VMWare Server for IIS which is a member of that domain on my desktop which I also use for development. I've created the Web API and installed it into that VMWare server. When I call a routine directly, it works and return results but when I use the Web API routine from my javascript web application I keep on getting 401 error. I then put the code on the IIS server and the web application works.
I've seen a lot of solutions like changing the sequence of the Provider in IIS Authentication. Added Everyone read/write permission on the folders. I've also added entry on the web.config. But none of them work.
*****Update as per request on the comment *****
Below is when I run directly from Web API
Calling the Web API from Javascript
Here's the error I'm getting
Just FYI, I tried running the web api from Visual Studio on the same machine but also with 401 error
Is there anything I could add to AD to make my development machine as trusted?
********************A new issue after the code change **********
****************Another Update******
This is definitely weird, so I installed Fiddler 4 to see what's going on. But still no luck.
Then I made changes on the IIS HTTP Response Header
The weird thing is when I run Fiddler the error is gone but when I close it it comes back.
There are two things going on here:
A 401 response is a normal first step to Windows Authentication. The client is then expected to resend the request with credentials. AJAX requests don't do this automatically unless you tell it to.
To tell it to send credentials in a cross-domain request (more on that later), you need to set the withCredentials option when you make the request in JavaScript.
With jQuery, that looks like this:
$.ajax({
url: url,
xhrFields: {
withCredentials: true
}
}).then(callback);
These problems pop up when the URL in the address bar of the browser is different than the URL of the API you are trying to connect to in the JavaScript. Browsers are very picky about when this is allowed. These are called "cross-domain requests", or "Cross-Origin Resource Sharing" (CORS).
It looks at the protocol, domain name and port. So if the website is http://localhost:8000, and it's making an AJAX request to http://localhost:8001, that is still considered a cross-domain request.
When a cross-domain AJAX request is made, the browser first sends an OPTIONS request to the URL, which contains the URL of the website that's making the request (e.g. http://localhost:8000). The API is expected to return a response with an Access-Control-Allow-Origin header that says whether the website making the request is allowed to.
If you are not planning on sending credentials, then the Access-Control-Allow-Origin header can be *, meaning that the API allows anyone to call it.
However, if you need to send credentials, like you do, you cannot use *. The Access-Control-Allow-Origin header must specifically contain the domain (and port) of your webpage, and the Access-Control-Allow-Credentials must be set to true. For example:
Access-Control-Allow-Origin: http://localhost:8000
Access-Control-Allow-Credentials: true
It's a bit of a pain in the butt, yes. But it's necessary for security.
You can read more about CORS here: Cross-Origin Resource Sharing (CORS)
2 weeks ago an authorization on all my sites stopped working. There is no record on log file. Looks like a page is just refreshing, but there is no access. Previously, everything worked fine.
There alco a console message:
This page includes a password or credit card input in a non-secure
context. A warning has been added to the URL bar.
In this time there is an access to CMS site's administration application
Options:
Reset all browser cache
Try in different browsers (FF, IE and etc)
Write the authorization script using the API and run it at the root.