Building progressive web online store
Building online store is challenging, especially nowadays when everyone uses a mobile device; and because I like challenges I tried to build super fast and easy to use online shop. Here is how I did:
Minimal dependencies
I want the users to load the page as quick as possible, sending less code, in that case, is important, that is why I use Preact instead React and Unistore instead Redux. Meanwhile, Braintree client library is super expensive ~200kb. I am still considering using WebPayments API instead Braintree, but for now, just lazyload it in the background.
My library code is: Preact + Preact-i18n + Preact-Router + Unistore less than 10kb
Code splitting
For creating the project, I use preact-cli ( its similar to create-react-app but for Preact ) and code splitting is included in it, so splitting the code based on routes or components is straightforward.
Critical CSS
I use Critical Webpack Plugin for critical CSS. The plugin can be integrated quite easy to webpack. It automatically inlines critical CSS and lazy load the rest.
Puppeteer — prerender home page
Preact CLI comes with prerender functionality; however, it doesn’t work with dynamic content. Recently, Chrome Team introduced headless Chrome which is like a browser without shell. On top of it, there is a project named Puppeteer ( nodejs API to handle chrome ). I run a script which opens the headless chrome, crawls the content and prepopulates the homepage ( only ) with products.
H2 + gzip
Firebase hosting supports a lot of cool stuff like H2 and gzip, so no additional work is required, just upload the static file. Bonus: all content is delivered by Google’s CDN
ServiceWorker and Caching
SW also comes with preact-cli, no need any additional configurations. For caching data I save all products in localStorage, so returned users don’t need to wait for HTTP response.
WebP
WebP has slightly better compression and respectively size than JPG, so I serve webp images when the browser supports them. Also, using picture tag with multiple sources for the different dimension.
Form autofill
Form autofill is a must for any online store, plus removing registration process should make checkout process faster. As I mentioned above, I am looking into WebPayments API as well.
Lighthouse score 84 is not so bad but still some work needs to be done.
I am quite happy with the fact that the website is working even on IE11 ( also tested on mobile Firefox, Samsung, Edge and Safari ) so I managed to execute the first and most essential element of PWA: Progressive
The code of the project can be found here, is far away from beautiful, but it is at least working.
