I created one react app with CRA and integrated service worker to cache mainly JS and CSS files. When I ran the build for 2nd time and reload my page.
It's still loading the 1st build JS files (It should load the 2nd JS files from server and then should load from the cache in subsequent loads).
When I manually empty the cache and hard reload option then this time New js files load from the network and subsequent loads the correct JS files.
How can we resolve this as I am going to use this code in app where my code will run in the browser. I don't want to provide some WA like giving a button to the user to hard reload.
Is workbox providing some solution to this? Please check below code.
https://github.com/rsoni5519/sw-app
Service worker issue SS
Related
I am trying to build a simple PWA (no frameworks) with the help of Workbox. For that I have been following tutorials on how to use workbox as well as looking at the official documentation. I tried generating a Service Worker with Workbox but the files generated seem very different to what I have seen in those tutorials.
I have noticed that all these tutorials were done with pretty old versions of Workbox (3.0 e.g.), so I am curious if I am missing some requirements since I am working with Workbox 6.5.4.
The first steps I took after creating the App shell:
npm install workbox-cli -g
workbox wizard (to generate workbox-config.js)
workbox generateSW / workbox generateSW workbox-config.js
Register Service Worker in my index.html
In all the tutorials I have seen, I see that one js file named "sw.js" is created when running workbox generateSW. However, when I do so it creates 4 js files ("sw.js", "sw.js.map", "workbox-d249b2c8.js", "workbox-d249b2c8.js.map"). I don't understand the content of them at all.
Contents of sw.js e.g.
if(!self.define){let e,s={};const i=(i,r)=>(i=new URL(i+".js",r).href,s[i]||new Promise((s=>{if("document"in self){const e=document.createElement("script");e.src=i,e.onload=s,document.head.appendChild(e)}else e=i,importScripts(i),s()})).then((()=>{let e=s[i];if(!e)throw new Error(`Module ${i} didn’t register its module`);return e})));self.define=(r,t)=>{const d=e||("document"in self?document.currentScript.src:"")||location.href;if(s[d])return;let n={};const o=e=>i(e,d),c={module:{uri:d},exports:n,require:o};s[d]=Promise.all(r.map((e=>c[e]||o(e)))).then((e=>(t(...e),n)))}}define(["./workbox-d249b2c8"],(function(e){"use strict";self.addEventListener("message",(e=>{e.data&&"SKIP_WAITING"===e.data.type&&self.skipWaiting()})),e.precacheAndRoute([{url:"css/main.css",revision:"d3072ab3693c185313018e404e07d914"},{url:"index.html",revision:"4fc118da921f59395f9c5d3e2ddd85b0"},{url:"js/app.js",revision:"aa3d97a8701edd5dae0d6a9bb89d65bd"}],{ignoreURLParametersMatching:[/^utm_/,/^fbclid$/]})}));
//# sourceMappingURL=sw.js.map
It looks completely different to the template generated in other tutorials... In the official documentation I don't see them go into detail about the file(s) that is created after running workbox generateSW. I still tried to see if the Service Worker would work since it said The service worker will precache 3 URLs, totaling 1.65 kB after I ran the command. Sadly, when I ran my http-server and DevTools there was no Service Worker to be found.
Thanks a lot in advance (feel free to tell me, if you need more information in order to solve this issue)!!
I am interested to work on Streamsets. However, I would like to integrate into my codes not working on UI. How they have been written, Can I access the codes behind Directory and file tail. If they are using Spark streaming behind or other technologies?
Here are the steps for starting SDC in UI development mode.
When starting SDC, pass flag -Dsdc.static-web.dir=/<SDC_SOURCE_CODE_DIR>/datacollector/datacollector-ui/target/dist, like this:
export SDC_JAVA_OPTS="-Dsdc.static-web.dir=/Users/madhu/Documents/projects/datacollector/datacollector-ui/target/dist"
bin/streamsets dc -verbose
Go to folder <SDC_SOURCE_CODE_DIR>/datacollector/datacollector-ui/ and run below command for live reload
grunt watch --force
With above steps, you will be able to modify UI source files directly in folder <SDC_SOURCE_CODE_DIR>/datacollector/datacollector-ui/src and changes will be reflected in browser by just refreshing it, no need to build anything.
We are attempting to deploy new PHP code via Capistrano while running Opcache.
Capistrano creates a new deploy directory each time you deploy, then adjusts a symlink so that the webserver points to the new directory. Because Opcache caches by the real path of the file, that means that the newly deployed version of a site is cached completely separately from the old.
The problem we are running into is that Opcache runs out memory because each new deploy causes the full code base to be cached, and old code is never evicted. We could call opcache_reset(), but when the cache is reset, we briefly get 500 errors when the caches stampede. (We would also have the same errors if we tried to launch a new deploy without warming up the cache.)
Is there a better way to handle this? Some way to launch the new code while not filling up opcache until it runs out of memory (or empties itself because it has too many files) that allows us to avoid calling opcache_reset() on the live site? We are using (or trying to transition to, anyway) Nginx as our web server with PHP-FPM handling the PHP requests.
An option would be to call opcache_invalidate for each of the files in the old version of the site at the end of the deployment. You could prevent cache stampede by including the file following the invalidation.
A second option would be to setup fpm to have multiple pools, and to restart them one by one (they'll start with a clean opcache). You'll somewhat prevent the cache stampede only one server will have a clean cache at any given time, and the application will stay up because nginx will be able to balance the load on the various pool.
Another option is to delete the old versions of the script, so that opcache clears them from the cache once the revalidate_freq has passed, forcing it to load the new files from the filesystem.
I have started a new job from a couple months, I work as front developer in a company where up until now everyone was using classic development patterns, but the goal is to move to a new ajax/rest services approach and that's what I do.
In our local development environment our apps run on Resin which runs inside Eclipse and get deployed as war files to C:\Resin\resin-pro-4.0.27\webapps
My problem is that I work mostly on css html and js files, static resources so I shouldn't need to restart Resin and wait 15 seconds (when it doesn't crash) to see the effect of every little piece of code I change.
Other problem is that I need to edit some files in external editors (sublime text for js, Crunch for LESS); I managed to make Eclipse open the external editor but even with the "Refresh using native hooks or polling" build option it takes a while to realize files have changed and restart Resin.
I also tried just working on the unpacked war in C:\Resin\resin-pro-4.0.27\webapps\appname but even there it takes like one minute before you can see the changes on the browser (is there some caching going on the server? can I disable it?)
I welcome any suggestion as all this is really hurting my productivity
inside Resin.xml <host><web-app> add:
<cache-mapping url-pattern="*.js" expires="0s"/>
<cache-mapping url-pattern="*.css" expires="0s"/>
<cache-mapping url-pattern="*.htm" expires="0s"/>
<cache-mapping url-pattern="*.html" expires="0s"/>
This used to work for me (in resin.xml)
<!--
- For production sites, change dependency-check-interval to something
- like 600s, so it only checks for updates every 10 minutes.
-->
<dependency-check-interval>2s</dependency-check-interval>
Also check resin.properties for a variable definition in newer versions.
However I'm currently having problems picking up changes without a full redeploy.
I am using eclipse 3.5 with google app engine + spring framework to develop application. My problem is when I change the code and build the project, the new code doesn't come in to effect. I even deleted the old file but at runtime, the old version gets display in the browser. Why?
Your description is not explicit, so following are my assumptions:
You are changing jsp/js or view related files
You have Google app engine plugin for eclipse to deploy the code
Following might be one of the reasons:
Your view files are cached in the browser, so try deleting the browser cache
Google app engine might have cached your files, so try deleting the temp folder
Eclipse IDE wouldn't have deployed your changed code, so check the timestamp, if it still shows the old timestamp, then find out how to configure eclipse to detect your changes.
I found 3 workarounds for similar issue (changes to a servlet (.java file) were not taking effect).
Before editing the .java file, stop the application. It seems that if you edit it while running, the issue occurs, even if you edit it, stop then re-start.
Delete items in Temp folder e.g, (C:\Users\username\AppData\Local\Temp), then stop and re-start the app.
I think the culprit folder in the Temp folder is this:Jetty_127_0_0_1_8888_war__.g0qk00
Right click in in the console area and select 'Remove All Terminated'. Sometimes that reveals there are other instances running, which need to be stopped by clicking the terminate button.
I got the similar issue and the problem was due to not stopping the running server.
What i was doing was running the server, editing the java file, saving and again running the server. This created two instances of the server running and when checking into the browsers the old code was executed from the first instances.
So, the solution is terminate and relaunch the server, and your new changes will be in effect.