Dev - Convert to PWA (checklist)

hulkish commented 7 years ago

[x] Refactor naming convention for react components. ( #1490, #1538 )
[x] Refactor structure of app specific code to live in /src dir. ( #1490, #1538 )
[x] Eliminate FOIT (Flash Of Invisible Text). ( #1536 )
[x] Consider inlining svg icons instead of including them as a font. ( #4192 )
[ ] Add Jest & create snapshot tests for react components.
[x] Add service worker. ( #3000 )
[x] Score at least a 92 on lighthouse.
[x] Create Web App Manifest (using webpack-pwa-manifest maybe?).
[ ] Site appropriately informs the user when they're offline.
[x] Site use cache first networking. ( #3000 )
[x] Full offline support for all docs pages. ( #3000 )
[x] Upgrade to use latest webpack.
[ ] Discuss: Inferno instead of Preact?

Score at least a 92 on lighthouse

Test on lighthouse or now in the Audits section of chrome devtools.
Should follow these guidelines.

Create Web App Manifest

As described here https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

Site appropriately informs the user when they're offline

Use the Network Information API to show the user an indication when they're offline.
I'm thinking offline.js for this.

Dean-Coakley commented 7 years ago

Hoping to have a PR ready for Components naming convention refactor within 24 hours. (Depending on how my testing goes)

Should WebP be used for image optimization? (Whenever that is to be done) How would that work when new images are added when a new sponsor is added, etc? E.g Could that optimization be automated, or would we just force it to be done manually?

Jorybraun commented 7 years ago

@hulkish how's it going?

hulkish commented 7 years ago

@Jorybraun Sorry this took so long, here you go:

I've given you collaborator access to my fork: https://github.com/hulkish/webpack.js.org
branch: pwa-add-component-tests
I've added 1 test as an example, in test/Dropdown.test.js

run it:

git clone git@github.com:webpack/webpack.js.org.git
cd webpack.js.org
git checkout pwa-add-component-tests
yarn
yarn test

Jorybraun commented 7 years ago

Perfect,

I will get started tonight.

EugeneHlushko commented 6 years ago

@hulkish are the checkboxes up to date, anything can be done ? I can pick up something

EugeneHlushko commented 5 years ago

FOIT is now in progress, the google fonts part will soon land in support on Google's side so we dont need to resort to hosting a copy of the current version of the font on our side.

EugeneHlushko commented 5 years ago

Most of the items closed, whats left is svgs. To inline them we can convert them to react components

webpack / webpack.js.org