Progressive Web Apps Development

Version 0.1.5 : 2019-07-12, 10:59:16

Work in Progress

Site Menu

PWA Development Architecture

This PWA development rachitecture is built using JAMstack, a modern web PWA Development Architecture based on client-side JavaScript, reusable APIs, and Markdown

This PWA was crafted using VScode, Gatsby PWA compiler, GitHub, the Netlify Application Delivery Network, and a huge cast of creative APIs



PWAs are built to run in web browsers supporting web standard programming languages. PWAs and web browsers use the same web standard programming languages enabling PWAs to run entirely in browsers on user devices independent of device hardware or operating systems

Web Standard Programming Languages

  • HTML - defines the content and structure of web pages

  • CSS - Specifies the layout and style of web pages

  • JavaScript - JavaScript is one of the most popular programming languages. It is used widely in backend servers, and for controling the behavior of browser web pages. The diagram above show JavaScript is central to the PWAs ecosystem

  • Markdown - a better way to write HTML


  • JavaScript - is a web standard programmaning language. It controls the behavior of web pages running in browsers. It is a primary ingredient for PWAs development ecosystems

  • Node - is a JavaScript runtime environment. It is an open-source, cross-platform, asynchronous event driven, JavaScript runtime environment. One thing Node does is create Node Programming Modules which can be added to the Npm package manager.

  • React - is an open-source JavaScript library for building user interfaces. It is developed and supported by Facebook. It uses JavaScript and Node Programming Modules to create User Interface Components

  • Gatsby - is a React program. It compiles PWA programs written in combinations of web standard programming languages JavaScript, HTML, CSS, and Markdown, and uses Node Programming Modules, Gatsby API Plugins, and React Components into PWAs

  • VScode - is central command for developing this PWA

  • GitHub - is a web hosted repository for Git projects. It helps software teams collaborate and maintain the entire history of a projects code changes. Developers can view history of changes and go back to a previous version.

  • Netlify - is an ADN: Application Delivery Network providing everything needed for continuous deployment of PWAs


Build a PWA development architecture using the PWA Elements

Most of the development flow uses VScode

  • Configure a GitHub repo
  • Configure Gatsby
  • Use the VScode to edit project web standard programming languages files
  • Test project using Gatsby
  • Use the VScode built-in git commands so update the repo
  • Configure Netlify