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…
Continue reading “My Experience With Progressive Web Apps – Renganatha Arunachalam – Medium”