My Experience With Progressive Web Apps – Renganatha Arunachalam – Medium

My Experience With Progressive Web Apps  #webpack #progressivewebapp #react #reactjs

  • They are the future.I built a Progress Web App of WhatsApp Web using Webpack 2.0, React and Express.Note: This is not a complete clone of WhatsApp Web but minimal one to have an understanding of how to create a PWA app.Case StudyMain aim of PWA apps should be making the load time of webapp faster.Server Side RendingServer Side Rendering (App shell architecture) is a way of making the load time faster without JavaScript .
  • Sample Code of match api from react-routerBundlingVarious ways are available to bundle the app with minimum size using Webpack.I say separating the vendor libraries and components is the best way to reduce the bundling size.
  • The remaining two bundles are precisely due to code splitting.react-router can be used for Route based splitting out of box with WebpackWorkers From WebWeb workers and Service workers are most useful feature from web.
  • Both the workers have no access to DOM.Web Workers are use to do heavy operation in separate thread of browser and return result to the web app.Service workers are useful for caching the request.
  • All three attributes are used for loading the scripting without blocking onLoad function.Use Web manifest.json to have Native feel when users does Add to Home Screen in Mobile.Use LightHouse Chrome extension to validate your websiteUseful ArticlesProgressive web app with with React.js — Four LiteUber ClonePrefer defer over AsyncGetting most out of CommonChunksPluginVendor and Code Splitting in WebpackUseful webpack pluginsThe Offline CookbookHttp Browser Caching

Progressive Web Apps is a paradigm to make webapp more efficient on mobile devices. They are the future. Note: This is not a complete clone of WhatsApp Web but minimal one to have an understanding of…

@ReactDOM: My Experience With Progressive Web Apps #webpack #progressivewebapp #react #reactjs

Progressive Web Apps is a paradigm to make webapp more efficient on mobile devices. They are the future.

I built a Progress Web App of WhatsApp Web using Webpack 2.0, React and Express.

Note: This is not a complete clone of WhatsApp Web but minimal one to have an understanding of how to create a PWA app.

Main aim of PWA apps should be making the load time of webapp faster.

Server Side Rendering (App shell architecture) is a way of making the load time faster without JavaScript . Initially we can render a simple HTML, CSS as string from the server. Once the DOM is loaded JS will take over the website (Isomorphic more precisely).

Various ways are available to bundle the app with minimum size using Webpack.

to serve as new file for every requests.

can be used to create a common chunk as separate bundle from source code.

Gzip all the resources used on the webApp using CompressionPlugin.

Use Preact instead of React to further reduce bundled size. Add the following lines of code in webpack.config.js to use React.

resolve: {

alias: {

react: ‘preact-compat’,

react-dom: ‘preact-compat’

Plugins like AggressiveMergingPlugin, OccurrenceOrderPlugin are also used to reduce the bundle size.

Web pack 2.0 provides a nice way to do the code splitting.

is the way to split the code. Webpack reads for it and creates separate bundles.

this.forceUpdate();

this.forceUpdate();

You can see how I have done that for two components which results as below.

If you examine the above picture Webpack have created four bundles (app.js, bundle.vendor.js, bundle.0.js and bundle.1.js).

This is because I have separated the app.js for components and vendor.js for Vendor libraries. The remaining two bundles are precisely due to code splitting.

can be used for Route based splitting out of box with Webpack

Web workers and Service workers are most useful feature from web. Both the workers have no access to DOM.

Web Workers are use to do heavy operation in separate thread of browser and return result to the web app.

Service workers are useful for caching the request. It acts as an intermediate for every request and caches it. If the same request is made again it responds from SW. Once the responses have arrived from the server, Service Workers replace the particular response from cache. Service Workers are useful receiving Push and doing background sync

My Experience With Progressive Web Apps – Renganatha Arunachalam – Medium