I have a Node application deployed to Azure, with a test branch leading to a staging instance, and a master branch pointed at the prod deployment. My application works fine on all instances of the application locally, but production and staging are having an issue in which they will not load if they are already cached, and will appear blank after a refresh, and lastly will work properly with a cache reset.
Whenever I refresh the page in production, it is just blank. The service worker is running (I can see it in the chrome serviceworkers-internal tool), but the page just never loads. The file references generated are correct. You can see an example of what is happening here: Live Site and then you can also see the testing site which is also failing with the exact same code deployed: Test Site.
The entirety of the ServiceWorker implementation is out of the box from create-react-app. I've spent several hours trying to track this bug down across a variety of GitHub issues under the react-boilerplate and create-react-app repos and none of them really get anywhere beyond restricting page caching, which I tried to do with no avail with:
Index.html
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
You can find any of the code you have questions about any code at the repo that hosts all of this code.
I'm just kind of getting my feet wet with React/Node, so I'm at a wall and don't really see how to get around this without completely ripping out the ServiceWorker registration.
EDIT: I completely removed the ServiceWorker code from the index.js file and the sight reloads without any issues now. Is there a step I need to complete to get the ServiceWorker to properly reload the page from cache or something?
In case someone else finds this question like me, the answer was to disable browser cache on the service worker file (service-worker.js for me) and index.html, and cache forever the rest.
It appears when a change is made the old version of the app continues to run, and on startup it then detects there is a new version. If like me you don't cache the static resources then when it tries to fetch the old version it gets a 404 resulting in a blank page. If you refresh a second time it gets the new version of the app.
I added some code into mine to automatically reload after 5 seconds by modifying registerServiceWorker.js
function registerValidSW(swUrl) {
console.debug('Registering serviceWorker URL [' + swUrl + ']');
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
reportInfo('App has been updated. This page will refresh in 5 seconds.');
setInterval(()=>window.location.reload(), 5000);
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
reportInfo('App is cached for offline use.');
}
}
};
};
})
.catch(error => {
reportError('Error during service worker registration:', error);
});
}
For anyone having the same issue as me using react and react-router-dom for a single page application, I had only a blank page on my installed application after calling window.location.reload() (on an android One Plus) because I was not redirecting from my route '/user' to the home '/' or '/index.html' on my server
If you have a single page application, please see this awnser for different ways to fix it: https://stackoverflow.com/a/36623117/17434198
Related
We have a cluster with 3 servers with Load Balancer in front (CloudFlare). Things worked well when we had 2 servers (A & B) in the cluster but after we added a 3-rd server (C) we noticed few odd things.
One of them is quite important and I do not understand how it happens at all.
Our web application makes AJAX requests to itself in order to get some JSON data back and if requests hit new server (C) response looks like that:
{
code: 404,
text: "Not Found",
message: "Database context not allowed."
}
Our application does not throw such error and so I searched in google a bit and noticed that it's mentioned on: OpenNTF XPagesExtensionLibrary
However, we do not use XPages at all so I wonder how could it be that our AJAX requests somehow involve that logic.
Any suggestion & tip would be appreciated.
UPDATE
The backend code of my agent is not important (it could be also an empty agent, I checked), because the request does not come to my agent.
The AJAX call is triggered by jQuery
let url = "domain.tld/api/key";
let params = {"a": 1};
$.post(url, params, function (data) {
// some code
},
"json"
).always(function() {
// some code
});
The URL, which I suspect is an issue starts with /api/key and I believe it's an issue (because all other ajax calls where endpoint do not start from /api/ work well).
Thanks.
Figured that our with help from comments (which you can see under my original post).
Apparently there is DAS servlet that handles all requests starting from /api/* and it runs if XPages engine is loaded.
In my case the 2 servers out of 3 have XPages shut down so the issue happened only on 1 server.
The solution would be:
Shut down XPages (or find a way to shut down DAS).
Alternatively change a URL from /api/path to something else (this is what we will do).
I was hoping one of you could help me out here. I ran out of ideas already.
I have a script with Cypress.io that basically access a website and clicks on a link for LOGIN. I have reduced the code to only access the LOGIN page directly, which was working perfectly for the past 1-2 months, but in the past week I ran the script and it's no longer working.
When it tries to access the URL https://sso.tce.sp.gov.br/cas-server/login it gives the error below.
The most weird thing is that I can access this URL manually from the other non-automated (EDGE, Chrome), but when I try to do it with the Cypress automated browser it doesn't work.
cy.visit() failed trying to load:
https://sso.tce.sp.gov.br/cas-server/login
We attempted to make an http request to this URL but the request
failed without a response.
We received this error at the network level:
Error: Parse Error: Duplicate Content-Length
Common situations why this would fail:
you don't have internet access
you forgot to run / boot your web server
your web server isn't accessible
you have weird network configuration settings on your computer
Apparently it's doesn't look like a proxy thing nor a code thing, do you guys have any idea of what it could be?
Code:
describe('Test', () => {
it('Access AUDESP Website', function () {
Cypress.config('chromeWebSecurity',false);
//cy.visit('https://www.tce.sp.gov.br/audesp')
//cy.get('.menu-superior-itens > [href="https://sso.tce.sp.gov.br/cas-server/login"]').click()
cy.visit('https://sso.tce.sp.gov.br/cas-server/login')
})
})
Any ideas would be very helpful!!
Thank you!
UPDATE:
Guys, I'm still with this error, but I have found out that the website is sending a duplicate header, but cypress is not able to process it. The browser, outside of Cypress, ignores it apparently... any ideas on how to fix it on Cypress?
I am trying to implement MEAN app for which I made node server
app.get("/posts",(req,res)=>{
posts=[{"title":"a","context":"b"},{"title":"c","context":"d"}]
res.send(posts); // tried even with res.status(200).json(posts)
});
when it checked with api tester it works well output snapshot
output snapshot with apitester
when i try to access with angular services
getposts()
{
var url='http://localhost:3000/posts';
this.http.get<post[]>(url).subscribe(data=>this.posts=data);
console.log(this.posts);
return this.posts;
}
when i do console.log(posts) it returning []
can someone please help i am struggling from last 2 days?
As you have not added the screenshot from the Browser's Inspector => Network Tab, I am guessing this answer will help you in case my guess is right.
Try setting the below in your front-end project (Angular in your case):
Try setting the below in your back-end project (Node in your case):
Also, verify your updates as in the below screengrab in the Browser's Inspector (Chrome in my case):
Please Note: - The mentioned response headers have special meaning, so kindly look for more info with a simple Google search. Use these settings during your development phase on localhost.
Hi I have done with following steps to implement Universal Link for IOS.
1.My sub domain is npd.nowconfer.com, and my apple-app-site-association file contains,
{
"applinks": {
"apps": [],
"details": [
{
"appID":"R3UDJNSN2P.com.sampleUniversal.teledna",
"paths": ["*"]
}
]
}
}
this file is uploaded into my subdomain npd.nowconfer.com and its serveing over https.
2.I tested using AASA Validator i.e https://branch.io/resources/aasa-validator/#resultsbox and i got Test result as all pass.
you can see attached screenshot.
3.Now In app side,my colleague did configuration such as
Added the domain to Capabilities i.e applinks:nowconfer.com and applinks:npd.nowconfer.com
Handled Universal Links in app i.e in delegate like this
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray *))restorationHandler {
NSURL *url = userActivity.webpageURL;
// handle url
}
4.my universalink is https://npd.nowconfer.com:5000/calendar/deeplink?url=nowconfer when i click on this link from email ,my app is not opening instead it is redirecting to app store(becasue server side request came handling to redirect app shore if app is not installed on device)
But when i tested universalink validator here https://search.developer.apple.com/appsearch-validation-tool ,i have got some error
Link to Application : Error no apps with domain entitlements
The entitlement data used to verify deep link dual authentication is from the current released version of your app. This data may take 48 hours to update.
I have seen lot of tutorials but not used anything for me.Can you guys help me to figure out what is happening here?
Universal Links have to be standard http:// or https:// links. This means they need to use the standard web ports, of which 5000 is not one. That is why your link is not working — it's not actually a valid Universal Link.
The Apple validator checks for some additional things, and is also somewhat unreliable. This particular error message is confusing, but it has nothing to do with whether your Universal Linking configuration is correct. What it actually means is Apple can't detect applinks: entitlements and 'proper' handling of passed-in link values in the version of your app that is currently live in the App Store. This is expected if you are just implementing Universal Links for the first time. You don't need to worry about this — a number of large and successful apps with working Universal Links implementations fail this step too.
It seems like the externally_connectable feature that allows a website to communicate with an extension is still in the dev channel and not yet stable. Are there any other ways to allow a specific website to communicate with my extension, while I wait for this feature to become stable? How have chrome extension developers traditionally done it?
Thanks Rob W for pointing me in the direction of HTML5 messaging. For the benefit of other chrome extension developers, I'm writing about the general problem I was trying to solve and the solution that worked in the end.
I am making a chrome extension that can control music playback on a tab via a popup player. When a user clicks on play/pause/etc on the popup player, the extension should be able to convey that message to the webpage and get back a response stating whether the action was accomplished.
My first approach was to inject a content script into the music player page. The problem is, though, that content scripts operate in a "sandbox" and cannot access native javascript on the page. Therefore, the content script was pretty useless (on its own), because while it could receive commands from the extension, it could not effect any change on the webpage itself.
One thing that worked in my favor was that the website where the music was playing belongs to me, so I could put whatever javascript I wanted there and have it be served from the server. That's exactly what I used to my advantage: I created another javascript file that would reside on the website and communicate with the content script mentioned above, via the window object of the page (i.e. HTML5 messaging). This only works because the content script and the javascript file both exist in the same webpage and can share the window object of the page. Thanks Rob W for pointing me to this capability. Here is an example of how the javascript file on the page can initiate a connection with the content script via the window object:
content_script.js (injected by extension into xyz.com):
window.addEventListener("message", function(event) {
if(event.data.secret_key &&
(event.data.secret_key === "my_secret_key") &&
event.data.source === "page"){
if(event.data.type){
switch(event.data.type) {
case 'init':
console.log("received connection request from page");
window.postMessage({source: "content_script", type: 'init',
secret_key: "my_secret_key"}, "*");
break;
}
}
}
}, false);
onpage.js (resides on server and served along with xyz.com):
window.postMessage({source: "page", type: 'init',
secret_key: "my_secret_key"}, "*");
window.addEventListener("message", function(event) {
if(event.data.secret_key &&
(event.data.secret_key === "my_secret_key") &&
event.data.source === "content_script"){
if(event.data.type){
switch(event.data.type) {
case 'init':
console.log("connection established");
break;
}
}
}
}, false);
I check the secret key just to make sure that the message originates from where I expect it to.
That's it! If anything is unclear, or if you have any questions, feel free to follow up!
You could have an extension inject a content script alongside a web page, and use that to pass messages back and forth between the website and the background page of the extension.
It's tedious, though, and externally connectable is a lot nicer.