I have create-react-app app that uses its stock service worker to cache files.
I want the app to be a downloadable PWA but whenever I update (with heroku & node expressjs..) the users downloaded app never updates.. Even when I refresh (drag down from top).
Have I missed some configuration in the docs to enable the auto update when its a PWA?
or
What is something I can do to either force refresh when updated. (I have read that's bad UI but I'm fine with that)
Notes:
It works as expected when viewing from a browser on a PC. (updates when tabs are all closed)
I found the solution.
The problem wasn't refreshing the app. I had to permanently close it. by swiping up from the multitask view.
Leaving this here in case anyone else didn't realize
Related
I made a react web app. I added a service worker to get the PWA app. I just need the PWA app to add it on the home screen and use it on fullscreen view, I don't need any more functionalities like - offline browse, save cache, etc.
Now I am facing a problem, every time I deploy my app, I need to clear the browser cache. Sometimes I have to go to Incognito mode to see the changes.
So, How I will stop this?
I've completely deployed my website with Firebase CLI, and project.firebaseapp.com is accessible and works fine. However, project.web.app keeps showing "Site Not Found".
I'm building my web app with React and already set the folder to "build"
Edit1: I've tried safari, chrome, incognito of both, and also hard refresh and empty cache still showing SITE NOT FOUND.
Edit2: It's working on Line Application Built-in Browser (mobile), but not on Chrome (mobile).
Edit3: Sent the domain to my friends around the world and found out that it's not working for only people living in South East Asia.
As I mentioned in comments, try any other browser. Both the domains are working on my computer. It might just take some time for both to deploy and update the cache.
It's usually better to ask someone who stays far from you and maybe has a different ISP to test update website. I sometimes use Lighthouse and it turns up even it won't show up on my computer. (Apparently the older version gets cached).
I'd recommend disabling cache from network tab in browser console when in development stage:
I made a PWA (progressive web app) a few weeks ago with React and some PWA configuration. From that moment, the name I gave the app still displays in the top bar when I try to run any other app on localhost:3000.
Apart from this, there were no issues with running applications on localhost:3000 for a long time, so it didn't bother me. But since last week, when I tried starting my React app (yarn start) on port 3000, my app won't render anymore.
I figured it might have something to do with the browser's cache settings, so I tried opening the app in another browser and it suddenly worked.
Notice that the name has now changed back to "React App" instead of the PWA name. Since it worked on the other browser I started testing some routes and tried to delete my cache in the browsers I normally use.
I tried adding something to the route (for example: localhost:3000/test) and this also redirected me to the right page (from the right application).
Is my PWA running somewhere in the background and causing issues or is there some browser configuration I am not setting right?
It is probably cache, it's not possible to run two apps under same port at the same time (at least by default).
You should have set that cache shouldn't work on dev environment to prevent that happening.
You can try incognito or open dev tools in Chrome => right click on refresh icon and select "Empty cache and hard reload".
Also try unregistering service worker in your app or in browser dev tools.
A way good way to resolve this error is -
Right-click and press inspect element to open the dev tools.
Under the dev tools, head on to the "Application" tab.
Here, on the left side, you'll find an option "Service Worker".
Click on it, and from the left side, press unregister.
After this, you can press "Empty Cache & Hard Reload" and your application would work just fine.
Empty cache and hard reload
you should press Ctrl + F5 together
I'm using 2sxc 8.5.4 on DNN Evoq, i have an App which is in Portal 0 and i'm showing the content of this in child apps.
I created a template and created a query to fetch data from the App in Portal 0 by adding its App id and Zone id.
All works fine, when i update the App content in Portal 0, changes are shown instantly in Child portals.
Problem is that the changes only show instantly to the browser i'm currently editing the changes. Example: if i edit the changes in Chrome, changes reflect instantly on Chrome but in Firefox or another PC it takes awhile to show the changes.
I believe its a cache issues, but don't know what else i can do within the visual query to show changes instantly on all browsers.
Any help would be greatly appreciated
The following is the snapshot of the visual query:
I'm guessing it's something a bit different, since you're not using a cache-data-source as far as I can tell.
Could it be that you are providing the data as JSON to the browser using the API or similar? because then the browsers have a default behaviour to cache this, unless you are in F12 mode or something.
please try to provide more details if this is wrong.
Background:
I've built a Angular Application that works fine on browsers.
On the frontend side I have HTML/CSS/Angular/Bootstrap, backend side is Web API. So it is completely separated.
I took my front code zipped it, used Phonegap to build android app. When I run it I can see the first screen of my web site. I've confirmed that the angular code there works, cause I can see it filtered navigation based on the fact the user is not logged in.
But when I try to go to any other page of my app I get an empty screen, so I tried to remotely debug it using PG remote debugger. Every time I try to load anything but my homepage I loose connection to my target. I haven't seen any JS errors in console.
This is the only thing in the logs:
"exception firing pause event from native"
"exception firing resume event from native"
Is there some part of configuration that I missed that could cause this behavior, or is there another way I can debug this?
Since you are using angularJS, I'm guessing you are using a webserver locally to make the app run on your browser, so everything seem to work fine
Although PhoneGap uses a file server to run your app on WebView, which is similar to just opening the index.html on browser without webserver. Bottom line is if you can make your app work on desktop browser by just opening your index.html without webserver then it will work when u build as PhoneGap app.
You might run into Cross-Origin issues when testing your app on browser, this will happen if your app is making REST API calls or if you are loading angularJS templates from another .html file, these Cross-Origin restrictions are taken care in PhoneGap build. So when testing on local browser you might want to open Chrome with web security disabled.
If you have developed your app using a webserver to test, then you might have absolute URLs for loading assets or hrefs, you will have to change these to relative URL paths.
For example, change <a href="/#/next-page"> to <a href="#/next-page">, or <img src="/images/logo.png"> to <img src="images/logo.png">