Dev - Convert to PWA (checklist)

[hulkish]

• Refactor naming convention for react components. ( [PWA] rename components and move app specific code to /src #1490, fix(deploy): fix deploy script after restructuring #1538 )
• Refactor structure of app specific code to live in /src dir. ( [PWA] rename components and move app specific code to /src #1490, fix(deploy): fix deploy script after restructuring #1538 )
• Eliminate FOIT (Flash Of Invisible Text). ( Dev - Eliminate FOIT #1536 )
• Consider inlining svg icons instead of including them as a font. ( replace icon font with svg #4192 )
• Add Jest & create snapshot tests for react components.
• Add service worker. ( feat(pwa) use offline-plugin for service worker setup and offline sup… #3000 )
• Score at least a 92 on lighthouse.
• Create Web App Manifest (using webpack-pwa-manifest maybe?).
• Site appropriately informs the user when they're offline.
• Site use cache first networking. ( feat(pwa) use offline-plugin for service worker setup and offline sup… #3000 )
• Full offline support for all docs pages. ( feat(pwa) use offline-plugin for service worker setup and offline sup… #3000 )
• 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]

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]

@hulkish how's it going?

[hulkish]

@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 [email protected]:webpack/webpack.js.org.git
cd webpack.js.org
git checkout pwa-add-component-tests
yarn
yarn test

[Jorybraun]

Perfect,

I will get started tonight.

[EugeneHlushko]

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

[EugeneHlushko]

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]

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