PWA features

[maximromanyuk]

Can I use PWA features with create-react-app, such as manifest, service workers? Where to put manifest?

[maximromanyuk]

@gaearon, what you think about PWA features? It is possible?

[gaearon]

I'd be interested in supporting that. I just don't know enough / don't have enough time to work on this. If somebody could lead this effort and write up a proposal for how that would work I’d be thrilled!

[bashmakoff]

Here is a good PWA analyzer

[fleischie]

What about this project as a starting point? (As well as the before-mentioned of course.)

[jasanst]

Previously discussed here #192

[gaearon]

I'm often getting confused about which technologies exactly are being marketed under the "PWA" umbrella. Can I ask somebody to make a comprehensive list? Is jeffposnick/create-react-pwa@starting-point...pwa "enough"? Is there anything we could enable by default there?

cc @addyosmani

[timarney]

Someone from this episode of JavaScript Air might be able to chime in as well https://javascriptair.com/episodes/2016-05-25

Also here's a Baseline PWA checklist
https://developers.google.com/web/progressive-web-apps/checklist

[NekR]

To be a PWA (in todays terms) you need following:

• HTTPS
• manifest.json file (with display: 'standalone' at least)
• ServiceWorker

This all need to make browsers display "Add to Homescreen" popup. Though, any website can be added manually to the home screen (in Chrome) even if it doesn't have anything from that list.

[addyosmani]

@gaearon Thanks for the ping! 🔔 The current baseline we recommend for apps trying to be a PWA is that they're:

• Responsive by default (use a viewport metatag correctly at min). You already do this.
• Can be added to the homescreen (have a valid Web App manifest and favicons. c-r-a could use some defaults here that we encourage folks to customize via docs)
• Are served over HTTPS (c-r-a would likely leave that up to the end dev)
• Provide something (ideally, meaningful) while offline via Service Worker
• Load fast over real networks (e.g 3G). It wouldn't be hard to accomplish this with what c-r-a does out of the box, however we might think about what else can be done to help folks stay fast. There's a ton that could be done to prescribe basic code-splitting and perf budgets though your thoughts on interest in that would be awesome.
• Work cross browser. This is another one of those things c-r-a does fine out of the box.

As you've noted elsewhere (e.g #1056) it looks like the loading part of this can be tackled once you've switched to Webpack 2 and use System.import().

Otherwise, happy to work on a PR for c-r-a to add PWA support or ask someone on my team to.

[gaearon]

There's a ton that could be done to prescribe basic code-splitting and perf budgets though your thoughts on interest in that would be awesome.

Once we switch over to WP2 and document System.import() support I’d like to integrate your bundle post-build "size nudge" (unless it’s already a part of WP?)

[addyosmani]

Once we switch over to WP2 and document System.import() support I’d like to integrate your bundle post-build "size nudge"

🎉 So happy to hear that. It just went into PR phase on WP webpack/webpack#3350.

[gaearon]

Call for help on adding dynamic import support: #1192