Webpack-cli: Feature: Webpack PWA add-on/scaffold

[addyosmani]

As part of #101, we'd like to create a minimal, but useful, Webpack add-on for those getting started with Progressive Web Apps. This would build on the work that was done for the default --init starting point in https://github.com/webpack/webpack-cli/issues/119.

• Handle favicons and Web App Manifest. Either via a static include of some defaults (just the files) that get wired up using HTML Webpack Plugin with another plugin like https://github.com/jantimon/favicons-webpack-plugin. Most people do this statically.
• Add offline caching support for static assets (CSS, JS) w/sw-precache. We could also do it for HTML - if someone is building an SPA this would get them closer to an AppShell model style level of caching. If not, it would do full-page caching.
• Performance budgets by default?

Validation: It should be possible to take a simple app, even something like a rando TodoMVC implementation, run it with webpack-cli and this add-on and be able to generate an offline-first PWA that an get a decent score on Lighthouse.

I've also filed https://github.com/webpack/webpack.js.org/issues/1145 for us to think about guidance around this topic for the official Webpack docs.

[TheLarkInn]

@ev1stensberg Is this already started?

[evenstensberg]

@TheLarkInn Going to SF right now, will continue on this tomorrow.

Edit: That being said, I've got the webpack-addons-pwa namespace reserved ;)

[evenstensberg]

Leaving this for grabs within 30 days, or I'll make one myself.

[webpack-bot]

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

[evenstensberg]

This is still up for grabs and on the agenda

[sendilkumarn]

@addyosmani

Handle favicons and Web App Manifest.

Makes sense to add the static default and users to change them whatever they need to. Probably give an option to choose between advanced and simple configuration

Add offline caching support for static assets

I think workbox is mature enough to use it here. WDYT?

[Symphoria]

@ev1stensberg Hey, I am a newcomer here. I would like to work on this issue. Can you guide me how to approach?

[sendilkumarn]

@Symphoria You can have a look at how to create an addon over here

I have started something on this over here
(it is just a start)

[dhruvdutt]

@Symphoria @sendilkumarn Hey guys! :) I'm also looking to work on this. Maybe we all can do something in collaboration.

[sendilkumarn]

Well that sounds great and my idea is this. Lets have workbox plugin to take care of sw. and use copywebpackplugin for manifest and favicon.
If that sounds good to you lets start working on this

[evenstensberg]

@sendilkumarn create a collab team and get them in a slack / gitter 👍

(This way you can all work on it, while we collectively win, you also save yourselves time)

[Symphoria]

@ev1stensberg How do I test the addon? On running the command
webpack-cli init webpack-addons-pwa, I get TypeError: Package isn't registered on npm.

[evenstensberg]

Right, so it should work, but it's not officially published yet. I've got a alpha version registered on npm, but that is different from @sendilkumarn 's. Are you running webpack-cli version 2.0.6 ?

[Symphoria]

@ev1stensberg Yes, I am running webpack-cli version 2.0.6

[sendilkumarn]

Have you linked the project?

[evenstensberg]

@sendilkumarn any update on the PWA you're making?

[sendilkumarn]

Not at the moment, still few pending things to complete.

But I think we can close this Issue and redirect users to that addon would be a better option.

Also, the name is pending 😉

[rishabh3112]

@sendilkumarn @dhruvdutt is work is still in progress here ?
I have submitted a PR sendlikumarn/webpack-addons-pwa#19.
Also package on npm needs to be updated to webpack-scaffold-pwa

[sendilkumarn]

@rishabh3112 Yeah sure we can do this 👍

[sendilkumarn]

Lets close this 👍