PWA Setup with Cloudfront CDN? - node.js

My web app has a service worker that was working fine before I added integration with Cloudfront CDN.
I'm registering the service worker on the client like so:
navigator.serviceWorker
.register('https://www.my-domain-name.com/sw.js')
.then(() => console.info('service worker registered.'))
.catch(error => {
console.log('Error registering serviceWorker: ', error)
})
I get this in the client console logs:
And Lighthouse is telling me this:
No matching service worker detected. You may need to reload the page,
or check that the scope of the service worker for the current page
encloses the scope and start URL from the manifest.
I've tried multiple URLs when registering the service worker, including:
"/sw.js"
"https://www.my-domain-name.com/sw.js"
"https://###.cloudfront.net/sw.js"
...but so far none have worked.
What am I missing?
UPDATES
I've learned a lot more but still have questions:
I got a great answer from
#JeffPosnick to my related SO post here. That explained the errors.
The URL for "failed to fetch" was the URL specified in my manifest "start_url". But I'm still getting a fetch error here, even outside of Lighthouse testing. Anybody know why?
I unchecked the Lighthouse "Clear Storage" checkbox. Now Lighthouse is saying my service worker is working.
Theory: when Lighthouse clears storage it blows away the service worker, explaining why I get a failing PWA score from Lighthouse when "Clear Storage" is checked. Is this theory correct?

Okay, I finally got this all working. In addition to the things I posted in the update to the original post, I also had to find a service worker that would work with React.
I went with this one.
Now if the network is offline, and I reload the page, I still see my React home page. Nice!

Related

HTTP Error 500.30 - ANCM In-Process Start Failure with newly created app service

we are created new development environment so I cloned a current working app service into a new one and changed the configurations and deployed same code but the new app service is returning HTTP Error 500.30 - ANCM In-Process Start Failure
after trying the console for more details that's what I get, I don't think its related to runtime identifier because same code runs on different exact app services
The dreaded 500.3x ACNM error can mean different things, so I'm going to assist you in pinpointing those things.
My recommendation:
Go to Azure Portal > Your App Service > development tools
Open console.
Screen should look like this:
Console Screen Azure
Type in (YourWebAppName).exe
What this will do, is show error messages that are relevant to your startup issue.
Also, some information regarding errors can be seen here:
https://learn.microsoft.com/en-us/aspnet/core/test/troubleshoot-azure-iis?view=aspnetcore-3.1#app-startup-errors

Blazor server side app on IIS frequently disconnects WebSocket connection

I have a Blazor server side app published on IIS 10.
When browsing to an arbitrary page and just letting it idle after a minute or so (sometimes only 45 sec, sometimes something between 1 and two minutes) the modal
Attempting to reconnect to server ...
appears for a couple of seconds.
In the browser console the logging shows either
Error: Connection disconnected with error 'Error: Server timeout
elapsed without receiving a message from the server.'.
or
Information: Connection disconnected.
Since this seems to be a timeout problem I added the following options to ConfigureServices in my startup.cs
services.AddServerSideBlazor()
.AddHubOptions(options =>
{
options.ClientTimeoutInterval = TimeSpan.FromMinutes(10);
options.KeepAliveInterval = TimeSpan.FromSeconds(3);
options.HandshakeTimeout = TimeSpan.FromMinutes(10);
});
This does not solve the problem though.
I also went to the advanced settings of my site in IIS and increased the connection timeout from the default 120 sec to 600 sec. This did not help either.
Those frequent disconnections only happen on the live site hosted on IIS 10.
If I start the app locally with Visual Studio the connection is stable.
Any hints of what I'm missing would be appreciated!
Update:
As suggested by #agua from mars in comment below I changed transport type like this
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapBlazorHub(options => { options.Transports = HttpTransportType.LongPolling; });
endpoints.MapFallbackToPage("/_Host");
});
With this change the connection is still closed. The console log shows
Information: (LongPolling transport) Poll terminated by server.
I also tried HttpTransportType.ServerSentEvents which does not work at all but gives this error
Error: Failed to start the connection: Error: Unable to connect to the
server with any of the available transports. ServerSentEvents failed:
Error: 'ServerSentEvents' does not support Binary.
Update 2:
The IIS is configured to use HTTP 1.1
I tried changing to HTTP/2 but this did not change anything regarding the disconnections.
This is related to application pool recycling in IIS as stated by #Programmer. You can reproduce this by going into the application pool, right click the pool and choose recycle to force it. Your blazor app will get the "reconnect modal screen".
For me, I did not want to disable pool recycle, so I added js in the _Hosts.cshtml file as
<script>Blazor.defaultReconnectionHandler._reconnectCallback = function (d) {document.location.reload();}</script>
to automatically reconnect when the server comes back up.
Try this out..
app.UseEndpoints(endpoints =>
{
//other settings
.
.
endpoints.MapBlazorHub(options => options.WebSockets.CloseTimeout = new TimeSpan(1, 1, 1));
//other settings
.
.
});
This could be related to IIS application pool recycling. Try disabling the recycling to see if that's casing the disconnection.
I suffer the same problem on my Blazor server too: Myspector.com
I am sure this comes from network of data provider. I use Othello in Germany with 4G and see disconnection in 5 sec . When I am with wifi with t online on same target server no disconnection at all.
I Think some operators are incompatible with Blazor server/websoscket....
My recent experience especially on a shared server, increase the pool memory. Connectivity issues went away when we bumped 256MB up to 1GB for a small user base.

Stackdriver-trace on Google Cloud Run failing, while working fine on localhost

I have a node server running on Google Cloud Run. Now I want to enable stackdriver tracing. When I run the service locally, I am able to get the traces in the GCP. However, when I run the service as Google Cloud Run, I am getting an an error:
"#google-cloud/trace-agent ERROR TraceWriter#publish: Received error with status code 403 while publishing traces to cloudtrace.googleapis.com: Error: The request is missing a valid API key."
I made sure that the service account has tracing agent role.
First line in my app.js
require('#google-cloud/trace-agent').start();
running locally I am using .env file containing
GOOGLE_APPLICATION_CREDENTIALS=<path to credentials.json>
According to https://github.com/googleapis/cloud-trace-nodejs These values are auto-detected if the application is running on Google Cloud Platform so, I don't have this credentials on the gcp image
There are two challenges to using this library with Cloud Run:
Despite the note about auto-detection, Cloud Run is an exception. It is not yet autodetected. This can be addressed for now with some explicit configuration.
Because Cloud Run services only have resources until they respond to a request, queued up trace data may not be sent before CPU resources are withdrawn. This can be addressed for now by configuring the trace agent to flush ASAP
const tracer = require('#google-cloud/trace-agent').start({
serviceContext: {
service: process.env.K_SERVICE || "unknown-service",
version: process.env.K_REVISION || "unknown-revision"
},
flushDelaySeconds: 1,
});
On a quick review I couldn't see how to trigger the trace flush, but the shorter timeout should help avoid some delays in seeing the trace data appear in Stackdriver.
EDIT: While nice in theory, in practice there's still significant race conditions with CPU withdrawal. Filed https://github.com/googleapis/cloud-trace-nodejs/issues/1161 to see if we can find a more consistent solution.

InvalidOperationException in EPiServer edit mode after deploy to Azure

We are in the process of moving our functioning EPiServer 10 site to Azure.
After deploying our site to Azure, we get
[InvalidOperationException: This request has probably been tampered with. Close the browser and try again.]
EPiServer.Framework.Web.AspNetAntiForgery.ThrowForgeryException() +263
when edit interface is loaded.
Error message:
An unhandled error has occured in a background request.
Unable to load /EPiServer/cms/Stores/notification/ status: 500
The page may not function properly unless it's reloaded. Press the button below to reload the page now.
Screen shot of error message
The site seems to be working 'ok' in spite of error message.
If browser is reloaded, the same error message is shown.
We are running: EPiServer 10.5
Check this configuration setting:
<system.web><httpCookies requireSSL="true" /></system.web>
If you are using http, it should say "false".

Xamarin.Android & Azure Push Notifications Internal Server Error

I'm following the guide at https://learn.microsoft.com/en-us/azure/app-service-mobile/app-service-mobile-xamarin-android-get-started-push (as well as the original Xamarin one that this appears to have cribbed from), but I'm running into a problem registering my client.
I am successfully logging a user in prior to setting up the push notification service.
Both GcmClient.CheckDevice(...) and GcmClient.CheckManifest(...) succeed, and my PushHandlerService is being called.
Push.RegisterAsync(...) in my PushHandlerService is throwing a MobileServiceInvalidOperationException because it received an HTTP 500 Internal Server Error from the service.
Looking at FREB logs, it appears that the "error" is actually supposed to be a success, and interestingly is somehow related to the EasyAuthModule:
NOTIFY_MODULE_COMPLETION ModuleName="EasyAuthModule_64bit", Notification="AUTHENTICATE_REQUEST", fIsPostNotificationEvent="true", CompletionBytes="297", ErrorCode="The operation completed successfully.
(0x0)" 05:51:01.092
Module_set_response_error_status
Warning ModuleName="EasyAuthModule_64bit", Notification="AUTHENTICATE_REQUEST", HttpStatus="500", HttpReason="Internal Server Error", HttpSubStatus="79", ErrorCode="Unspecified error
(0x80004005)", ConfigExceptionInfo="" 05:51:01.092
NOTIFY_MODULE_COMPLETION ModuleName="EasyAuthModule_64bit", Notification="AUTHENTICATE_REQUEST", fIsPostNotificationEvent="true", CompletionBytes="0", ErrorCode="The operation completed successfully.
(0x0)" 05:51:01.092
I take it the error is happening when you call client.GetPush().RegisterAsync()? This is currently an issue and we are deploying a fix on the Azure side to fix this. In the interim, you can see the fix for this here: https://adrianhall.github.io/develop-mobile-apps-with-csharp-and-azure/chapter5/android/

Resources