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?
Related
I want to show a snack bar to reload the page when the new version of the page is deployed and available. But in that deploy, the service worker file is the same as before because I didn't make changes on it, so it does not trigger the update.
when I deploy some modification in the service worker file it does trigger the snack bar.
I followed this tutorial: https://felixgerschau.com/create-a-pwa-update-notification-with-create-react-app/#service-workers-in-create-react-app
Maybe this approach with service worker is not the right one for what I'm trying to accomplish.
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 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
I have a challenge in my PWA. because of performance issues, I can't download all js files in the initial load, so each page, download its chunk, in loading time. in this case, if I deploy a new version and the previous' deploy chunk isn't downloaded yet, deploy time active users, will find a crash on application.
I need to know , is there any way to download all chunks and update PWA in background in service workers?
Under some scenarios, you could use Periodic Background Sync to keep cached data up to date via periodic refreshes. However, it's not intended as a way to allow you to cache critical resources for your web app—think of it more as a way of making optional, nice-to-have, updates.
If you have resources that need to be cached, and those resources are all versioned together, they should all be added to the cache inside of an install handler.
If you can't download all files inside of that install handler then I think you need to reconsider whether using a service worker is the right approach for you, because there's no guarantee that you'll end up with a consistent cache using a different approach.
One workaround that you might consider is to show a "Loading..." or "Download assets..." splash screen when a user first comes to your web app, before they can interact with it, and while that screen is up, register your service worker and allow it to populate its caches inside its install handler. Once the install handler completes, you can then remove the "Loading..." screen and allow your users to interact with your web app.
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">