How to remove PWA service worker from domain - reactjs

I was running an React PWA on my domain (example.com). Now I changed the DNS A record to an server running Wordpress. The problem is that old useres still get served the PWA and not the Wordpress page. How can I fix this?

You can remove the link to manifest file from the html pages similar to listed below, and also remove the manifest file from the domain.
<link rel="manifest" href="/manifest.webmanifest">

Related

.well-known not showing on production

I'm trying to create a deeplink on my website and one of the ways is by creating an assetslinks.json with a few informations about the connection. The problem is that I've created my .well-known following a few docs and on my localhost, the file shows perfectly on my web browser but as soon as I deploy it to my domain(which is a github page - I'm not sure if this is relevant) it does not show anymore.
I also tried adding the following in my index.html:
<link rel="assetlinks.json file" href="%PUBLIC_URL%/.well-known/assetlinks.json" />
<link href="/.well-known/assetslinks.json" >
<link rel="apple-app-site-association file" href="%PUBLIC_URL%/.well-known/apple-app-site-association" />
I've tried removing the dot in the fodler ".well-known" and then, the json file shows on my domain, that's not the way it should be implemented though, so I need it to work with the ".".
Does anyone have any idea on why this is happening?

GitHub pages custom domain 404

So basically, I bought the custom domain of nexus-cheats.com, and went to connect it to my GitHub pages website of archiemourad.github.io/Nexus (/Nexus is the homepage). I entered the custom domain and set up the DNS, did the DNS checks and everything seemed to be working (Image Below) (My website is using React.js) Now, when loading the domain nexus-cheats.com It brings me to a blank page, And it "seems" to be working in a way It loads the tab title but nothing else. In the console there are a bunch of cookie related warnings. But no errors. When I go to nexus-cheats.com/Nexus i get the default GitHub pages 404. And get two errors. One is the denail of loading of my favicon.ico (Tab logo) Error => Content Security Policy: The page’s settings blocked the loading of a resource at https://nexus-cheats.com/favicon.ico (“img-src”). The other is a server GET 404 error => GEThttps://nexus-cheats.com/NexusALTHOUGH after loading nexus-cheats.com/Nexus and going back to nexus-cheats.com I get two more errors, both being the failure to load certain files in my react app. Errors => GET https://nexus-cheats.com/Nexus/static/js/main.89be2f5c.js GET https://nexus-cheats.com/Nexus/static/css/main.1bf437ff.css These (I assume) Are the build version my GitHub pages website is running on. Anyone know a solution? Or the problem going on here?
DNS CONFIG: My A: Record is set to 185.199.108.153 My CNAME: Record is pointing to archiemourad.github.io. (www)
----edit: Solved, but I kept all of my original text for brevity---
I'm getting this same exact error and situation right now.
I don't have answers yet, but it looks like React is trying to connect the %PUBLICURL% to the wrong place now. This comes from my /public/index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
...
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
...
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I subtracted irrelevant code and added the ...'s, for the record.
Locally, my network tab in my browser's developer tools shows:
http://localhost:3000/{project-name}/manifest.json
But, when I hosted it the exact way you have (with it working properly before I added the custom domain), it returns:
{my-custom-domain}/{project-name}/manifest.json
The /public/index.html file has loaded, but it can't access the other files it calls correctly.
It seems that the index.html is adding an extra part to the address from the %PUBLICURL%. By that, I mean the %PUBLICURL% adds the {project-name} between the custom domain and the files it is trying to access. My url should read:
{my-custom-domain}/manifest.json
I can edit the values in the developer's tools to remove that part, and then the files will load. But, this still doesn't solve the issue.
---------edit: solved the issue---------
I am unsure if the above changes are necessary, but I did remove the %PUBLICURL% from my /public/index.html file.
Now for the good part - the fix!
In your package.json, be sure to change the:
"homepage": "your-github-url"
to:
"homepage": "your-fancy-new-custom-domain"
Save it up and then run your build script included in most of the resources I found ( like this: https://create-react-app.dev/docs/deployment/#step-2-install-gh-pages-and-add-deploy-to-scripts-in-packagejson ):
npm run deploy
This will update your project, post it to your GitHub, and deploy it. Then just check that you have the same settings as you originally posted an image of on your GitHub pages, and it should work!

React App in Azure Website caching issue, browser serves old version

I have a react app which works perfectly fine.
However we are pushing code after NPM BUILD and deploying the code manually via SFTP
We can see the JS and CSS files have different names.
However the browser keeps downloading css and js files form cache, even if I disable cache in the browser.
I tried deleting all files in FTP, and magically the website keeps working? so it looks all the files are retrieved from the browser cache even if nothing exists in the server
I tried stopping and starting the azure website, but didnt make any difference
I tried cleaning the browser, cache, history, etc, no difference.
I wonder if I need to setup something in web.config, or in Azure website settings to make this works
This seems to be not an issue with Azure app service (Web app), you need to remove the caching of the react app with the following steps
Step 1: adding the following to in index.html
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
Step 2: inserting the following to the js
import { unregister } from './registerServiceWorker';
and call
unregister()
Reference Answer
It depends on how your app is configured, but I would not recommend disabling cache on the JS & CSS. Instead, it's best to add some version-dependent information to the file name so every time the JS or CSS update the file name changes.
Last time I worked on a web project we had it such that our JS & CSS had a content hash at the end. Something along the lines of main.205199ab45963f6a62ec.js instead of just main.js. Also note that you don't even have to manage that hash yourself, as there are ways to get ASP.NET or webpack (etc...) to update the reference in the HTML/JSX for you.
Here's webpack's page about it: https://webpack.js.org/guides/caching/

hosting gh-pages on custom domain, white empty page

im new to coding and need some help.
I made a react project (using create-react-app), and the website has been running on my gh-pages branch
(heres my repo: https://github.com/simchaleh/shivisihashem.git)
ive been trying to host the gh-pages project on a custom domain instead.
my react project looks great when its hosted on gh-pages, but when i try to connect it to my custom domain, all i get is a solid white screen.
heres a screen pic of my dns settings on custom domain. (u can also see that gh-pages says its hosting on my domain):
dns settings and gh-pages/settings page
I have a CNAME file in gh-pages branch, with one line, where i put:
shivisihashem.com
does anyone have any ideas why im just getting a blank white screen on my custom domain?
thanks!
i just got an answer from github staff. it solved my issue.
heres the answer if anyone else has this same issue:
The file you need to edit is here:
https://github.com/simchaleh/shivisihashem/blob/gh-pages/index.html
Currently, these two sections have errors:
<script type="text/javascript"
> src="/ShivisiHashem/static/js/main.7cdb5ccf.js"></script>
>
> <link href="/ShivisiHashem/static/css/main.ff643f95.css"
> rel="stylesheet">
You should be able to resolve the issue by replacing them with these:
<script type="text/javascript"
> src="/static/js/main.7cdb5ccf.js"></script>
>
> <link href="/static/css/main.ff643f95.css" rel="stylesheet">
I hope that helps! Let us know if you have any other issues.
Simcha's solution worked for me temporarily. Every time I was deploying to Github pages, the index.html file was automatically reverted back to "/theNameOfMyApp/static/.... So I managed to get rid of this problem, by removing the "/theNameOfMyApp" part from the homepage: ... in package.json. So in package.json there I have: "homepage": "http://themitsoss.github.io".
Had this same problem. I believe this issue is caused when you use the PUBLIC_URL environment variable, like so:
%PUBLIC_URL%/main.css
which works for the github.io site but causes path problems in the custom domain, which adds the variable in front of the path like in Simcha's example. So, we need to manually remove every instance of the this variable (process.env.PUBLIC_URL) each time we build for gh-pages.

Application angular does not work in subfolder

My application works fine when I was running fine in local iis express. The application was running in the root url like 'http://localhost:61975/login'.
But in the web server the application was deployed in a folder and now I got the error 404 for all pages, scripts and content, because the app is ignoring the folder.
For instance:
Should be: http:\www.mydomain\folder\app\controller\mycontroller.js
as is: http:\www.mydomain\app\controller\mycontroller.js ERROR 404.
I already try to put the tag , but does not work too.
Any help, please?
Tks
If you are using html5mode: $locationProvider.html5Mode(true) you should be setting the HTML base tag:
<base href="/" target="_blank">
in your HTML header. This is a common reason why some scripts and assets are ignored.
Also refer to this question and see if it helps

Resources