search

gwg-women / gwg-women-techmakers

This is a Grow with Google project for an offline first app that provides information based on geolocation
https://gwg-women.github.io/gwg-women-techmakers/
MIT License
13 stars 18 forks source link

Develop manifest.json for project #122

Open tanyagupta opened 6 years ago

tanyagupta commented 6 years ago

https://developers.google.com/web/fundamentals/web-app-manifest/

The web app manifest is a simple JSON file that gives you, the developer, the ability to control how your app appears to the user in areas where they would expect to see apps (for example, a mobile device's home screen), direct what the user can launch, and define its appearance at launch.

Web app manifests provide the ability to save a site bookmark to a device's home screen. When a site is launched this way:

It has a unique icon and name so that users can distinguish it from other sites. It displays something to the user while resources are downloaded or restored from cache. It provides default display characterstics to the browser to avoid too abrupt transition when site resources become available. It does all this through the simple mechanism of metadata in a text file. That's the web app manifest.

amr08 commented 6 years ago

Just a quick note, a basic version of manifest.json is automatically created after npm run build in create-react-app. It will get rebuilt everytime so if someone adds to it, we would want to protect/copy that file somewhere else!

tanyagupta commented 6 years ago

True @amr08 Thanks for pointing that out. What do you think ?

Tagging some folks for views on whether we should leave it as a basic one or add more functionality @khusbuchandra @sonalikatara @agonzalez0515 @digilou @PepperAddict

agonzalez0515 commented 6 years ago

I think the one CRA creates should be ok for now. I'm wondering, should I be using that to cache the assets? Or adding it to the cache along with the assets?

digilou commented 6 years ago

@tanyagupta I'm curious about this. It sounds like a manifest is good to qualify this is a progressive web app (PWA) that people can then install on their home screen: https://developers.google.com/web/fundamentals/web-app-manifest/ This is a PWA issue that I see mentioned when running a full audit with Lighthouse.

But if @amr08 is saying it gets rebuilt, maybe we need to lock one to reap the benefits of a manifest that Google suggests?

tanyagupta commented 6 years ago

Angelica, I think we should cache it along with the assets. Not sure if there is any React specific angle but in the PWA course they cache the manifest. And ok let's hold off for now and come back to it later.

Amy yes exactly. I actually did this for the TheDevPath project and it was also mentioned in the PWA course. However Andrea is saying a basic one is automatically created. Once all the icons are done, we may have to come back to this since we want to be sure that they are all included in there. We also want to be sure a designer is involved when we work on it to make sure the theme color/background color are all working well.

And oh here's the link https://developers.google.com/web/fundamentals/web-app-manifest/

On Fri, Mar 30, 2018 at 12:40 AM, Amy Carney notifications@github.com wrote:

@tanyagupta https://github.com/tanyagupta I'm curious about this. It sounds like a manifest is good to qualify this is a progressive web app (PWA) that people can then install on their home screen: https://developers.google.com/web/fundamentals/web-app-manifest/ This is a PWA issue that I see mentioned when running a full audit with Lighthouse.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gwg-women/gwg-women-techmakers/issues/122#issuecomment-377443475, or mute the thread https://github.com/notifications/unsubscribe-auth/AIGoep7BZe__cvp7rhhzWe66znHj1kP_ks5tjbcqgaJpZM4TAhkm .

khusbuchandra commented 6 years ago

Where are we with this? Any plans on someone starting on it?

sonalikatara commented 6 years ago

While I was working on favicon I came across some interesting reads one of them is https://medium.com/front-end-hacking/react-by-example-part-4-5d32168db362 manifest.json needs to be put in public folder. I can put one in if you agree. @amr08 what is your take on this, does this make sense ? @tanyagupta @agonzalez0515 @khusbuchandra @digilou

digilou commented 6 years ago

WOW @sonalikatara this is perfect timing for me, as I'm working on a MERN app right now, and all of this architecture has been confusing. It looks like our structure is right on par with what John is saying, so manifest.json in the public folder sounds fine to me.

agonzalez0515 commented 6 years ago

Sounds good to me. I’m wondering, if we put it in the public/ folder in development, does the build command keep it there in production? Need to look into CRA build?

sonalikatara commented 6 years ago

@agonzalez0515 , this is what Jhon say's about the build process and manifest.json During the build process

The files favicon.ico and manifest.json were copied over from the public folder we discussed earlier.'