Why is my React app not loading app shell instantly? - google-chrome-devtools

As shown on the screen capture below: On page reload my webapp's required resources are fetched from service worker, but it still takes 1.42 for anything to render on the page. What i was expecting, on all reloads of the page the items cached by the service worker should render instantly.
Is it something I'm missing?

The files may not be cached and the installation of the Service Worker failed.
Its possible that there are files that failed to be downloaded, so it won't be considered as installed. As discussed on the Install a Service Worker page, having a long list of files can increase the chances of a caching failure, leading to the service worker not getting installed.

Related

How to use Flutter 2.2 background service workers for web

Today I see that many articles were released about Flutter 2.2 and its new functionality. One of them is background caching using service workers. Has anyone an idea of what does it mean and how to use it?
for web apps, we offer background caching using service workers
UPDATE:
Ok I've found some information in this article
Flutter’s newest stable platform, web, has been improved in this release.
To start, we’ve optimized caching behavior with a new service worker-loading mechanism, and fixed double-downloading of main.dart.js. In previous versions of Flutter web, the service worker downloaded updates to your app in the background while giving your user access to the stale version of your app. Once that update was downloaded, the user wouldn’t see those changes until they refreshed the browser page a couple times. As of Flutter 2.2, when the new service worker detects a change, the user will wait until the updates are downloaded to use the app, but then they’ll see the updates without requiring a second manual refresh of the page.
I can't tell you what exactly they changed in caching but for how to use it:
Just upgrade flutter
flutter upgrade
and recompile
flutter build web --release
It should automatically build with the new service worker

ionic app not able to refresh due to /home routing

Built a fresh ionic v5 app from blank template. Added minimal logic to the home page for a simple toy project and deployed to a static blob on Azure.
Copied www folder to a blob and then made it public. Surf to the URL of index.html but this produced many errors of runtime.js:1 Failed to load resource: the server responded with a status of 400 (One of the request inputs is out of range.)
So then I tried a fresh storage module and used the 'static website` option and that does work except...
when it runs, it adds /home to the address and if the user tries to refresh the page then it fails with The requested content does not exist. because of course it thinks that's a resource inside the site.
You can simulate this by running a server (eg. http-server) inside the www folder, run the app then refresh with F5. I notice there is no problem when running using the dev command ng serve
Older ionic projects didn't have this problem. Have I done something peculiar?
This prevents any mobile phone from viewing the app and then adding to home screen because it includes the /home in the address.
Have found a partial solution here
https://stackoverflow.com/a/56584151/769427
which describes using the 404 page setting of a static website to point at index.html.
It does make it work (and with deep linking too) but the disadvantage is that a 404 error is registered each time in the dev tools.

Lighthouse and bubblewrap PWA check fails when testing offline for start_url

I have a PWA that I am trying to use to create an Android app (apk) with a trusted web activity using bubblewrap tool (https://github.com/GoogleChromeLabs/bubblewrap). To check the PWA criteria, it uses Lighthouse which fails the following audit step (red):
start_url does not respond with a 200 when offline
Timed out waiting for start_url to respond.
But actually the step regarding to current page being offline is ok (green):
Current page responds with a 200 when offline
My PWA is hosted at an url: https://example.com/myapp/. So the service worker (manifest) has the startup url and Scope at "/myapp/". So if I access this page in Offline mode (Check the box "Offline" in the dev tools "Application" tab) it serves an offline page that is cached at the beginning when the service worker is installed (I followed this example: https://developer.mozilla.org/en-US/docs/Web/API/Cache/match and everything seems to work fine, I tested even on my mobile in airplane mode).
Also, the startup page redirects to ?locale=en but it is the same webpage (so in Offline mode every url seems to show my offline html page). What is even stranger is that in about 20-30 audit reports, one time this step passed, randomly)
I am doing the Lighthouse tests on Mac, Chrome 84.
EDIT:
So I made some tests and I saw that if I access http://example.com/myapp (instead of http://example.com/myapp/ - there is a / at the end), the offline html page is not shown anymore. But in the manifest the scope and start_url are set to "/myapp/" exactly so I don't know if this is an issue (if I set them to "/myapp" the PWA won't work anymore saying that there is no service worker at that path, which sounds strange because my jetty server redirects /myapp to /myapp/ which both should be the same resource)
The Bubblewrap lighthouse check is a wrapper around the [Pagespeed Insights API]. The PSI API can be a bit flaky and fail to run at times. If the failure is constant, I'd recommend running the URL against PSI, as you should get the same report, but with more detailed information.

GWT fail to load when I clear browser cache

I have deployed my GWT application on a JBoss server, which is located on a virtual machine. If I open Safari/Firefox/Chrome, clear the cache and then navigate to my app: the app fails to load! I just see a blank screen (the title is loaded).
I use SmartGWT and when I just httpfox to examine the traffic, I can see that most resources (images, javascript) is downloaded, but some SmartGWT js files seems to be hanging.
In the screenshot, ISC_core.js and ISC_Foundation.js has not been completely downloaded, and they never are. (It is not always these two files, it can also be different ones, and it changes everytime I retry).
Now, if I reload the browser my app loads perfectly and when I look in httpfox, the files that were not completely downloaded before, is now fetched from the browser cache.
If I clear the browser cache and try again: blank page and same issue.
Does anyone have a clue about what is causing this behaviour and where I should look to fix it?
Note: this only happens when I deploy on my remote virtual machine. If I deploy locally in the same JBoss server setup, I have no problem and cannot reproduce the above issue. Also no problems when I debug in Eclipse and use the Jetty server.
May be this is an Known issue ..Which is posted on Google groups .
As a side note enable gzip on your jboss also..please refer to this link to do that

Google App Engine: Deployed Source doesn't have Local updates

I'm working with Google App Engine in Eclipse w/ JSP pages in Windows 7.
I already have an app deployed and working, but I am unable to make changes to it for some reason.
If I make changes and debug locally, my localhost page is showing the changes that I implement.
While I am not getting any errors in the deployment, the same changes that work on my local debug are no longer showing up, so I can't update my app.
I thought updating the version number might help, but I had no luck with this.
Any ideas? Thanks.
Are you deploying the same version (as specified in appengine-web.xml) as the default version that is running on your app? If not, you'll have to access your new deployment at http://newversion.appname.appspot.com, or change your default version in app engine to your newly deployed version.
I have had the same problems too, especially when the changes concerned the static pages. Some little things to check:
If you have set an expiration date in your app.yaml, your browser cache could be holding the file.
If it’s specific to the online contents, it could be an intermediary cache (such as a squid server) serving the outdated contents, in which case you’d have to flush the cache to get the new version.
You could start by checking the log on the GAE console to see if the request is received by the server, that would help you debug.
Another trick, if you’re being served an outdated version of http://yourapp.appspot.com/index, try and pass a dummy argument to force the browser to update the version, for instance : http://yourapp.appspot.com/index?p=1