White screen on initial load when updating my progressive web app - javascript

I'm using create react app and recently added a service worker so as to make it a PWA. It was very easy and seemed to work great. However, now whenever I build a new version of my app I get the following error on the initial load of the website:
I believe the problem is that when I build my app the file names are randomly generated and don't match the old ones. The PWA is using the old index.html trying to fetch the old files which don't exist anymore.
What is the best way of fixing this?

It turns out that the js file is too large to be precached. There are two approaches to solving the problem:
split the bundle into smaller chunks (each <5mb)
eject from create react app and increase the maximumFileSizeToCacheInBytes
You can read more in this StackOverflow answer:
Create React App serviceworker is not including one of the generated files

Related

React js installation for different projects

I'm currently new to reactjs I installed it & I have only one doubt that every time do I need to download entire reactjs(which was almost of 100mb) for different projects or is there any other way to do it

Setting up reactjs environemt for production

I have followed below link to set up first react Js project.
https://medium.com/#vikasharry03/react-setup-on-local-computer-912f9a551af3
Now my question is.
Do I need to setup all this process again for my next app or there is some thing like some same environment setup and then we can use that in our apps?
Yes,
You will every time you have to follow same steps because react and other helping module frequently updated by vendors, but you can paste same code files and public folder files.
and if you use this steps every time for new project, you will be aware for new changes done by vendors eg: by facebook , bable, webpack , redux etc...
Yes you would have but then agen you could use an application like visual studio to do the job for you.

How to run two different projects simultaneously in Angular 7

We are working as two teams on an application with two different work spaces. One work space is main project and another work space was getting exported as module to our private npm repository, From there we are getting that our module through our package.json. One problem we are facing every time is ,If we want to test the module with main app we are pushing to repo and getting it again and again. By this we are wasting so much time in development phase. Is there any way we can avoid this.
Look into using a mono repo. Mono repos were added in Angular 6 and enhanced in Angular 7 where your lib can be in the same project as the main app. You will need to run up a new Angular 7.
I read a good post about it on Reddit the other day but am at work and can't get to Reddit to link to the article. Have a browse of http://reddit.com/r/angular2
Found it: https://nezhar.com/blog/up-and-running-library-development-with-angular-7/

Should I create a single file app?

I have a website and I am creating an app for it using phonegap? So far I have have been updating my files and build the app every time I want to do a minor change.
My question: what is the downside to create a single html page with js (angular is) that will check the app version and download all pages needed?
Note the pages are to be cached for long time (month- year) if the version was not updated.
Thanks
There is no problem in doing that, in fact, is more safe in case that you have calls to APIs that you dont want to be visible to users, even some major apps do that in some cases.

Trigger.io Collaboration

Hey I'm collaborating on a Trigger.io project and I'm curious if there is documentation on how to best do this? I have other guys who are loading my project into their environments (via github) using TriggerToolkit, and they can't run the projects because there are conflicts with identity.json.
We're working on a simpler way for team collaboration, but for now the process for importing and existing Trigger.io will be similar to the instructions here for one of our demo apps:
https://github.com/amirnathoo/Sales-Square
Basically each app you create has a unique src/identity.json file which is also specific to your account. You should avoid checking in your src/identity.json file and a collaborator should create their own by creating a new app and then copying your code into the src directory.
Update: we've now enabled better collaboration with our Projects launch announced last week:
http://trigger.io/cross-platform-application-development-blog/2013/01/15/introducing-projects/
This should remove the need to manually create / overwrite the src/identity.json file to share Trigger.io app code

Categories

Resources