MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Progressive web applications are like good old web sites but better. In a modern browser they exhibit super–powers and become…

 

Discoverable

Identifiable as applications, findable by search engines.

Installable

Available on the device, on users' home screens — without the hassle of an app store.

Linkable

Easily shareable via URLs, without requiring complex installation.

 
 

Network independent

Works offline or on low quality networks.

Progressive

Works for every user, regardless of browser choice.

Re-engageable

Makes user engagement easy by drawing attention, even when users aren't using their devices.

 
 

Responsive

Fits any form factor: desktop, mobile, tablet, or whatever comes next.

Safe

Delivery mechanism prevents snooping and ensures content hasn’t been tampered with.

 

 
 

How to build a progressive web application?

Building a progressive web application from scratch involves many steps. Lets look at each step of them:

  1. Create the App Shell or simply the minimal required files (HTML, CSS and JavaScript) for your application user interface.
  2. Install Lighthouse which is a tool built by Google to help developers automatically verify their PWAs against Google's checklist (of what makes an app a PWA).
  3. Add a service worker which is a sort of JavaScript proxy running a script in the background of your browser. It can be used for many tasks but most importantly for a PWA is caching which makes your app work offline (a required feature of a PWA).
  4. Create your actual app code (usually to add functionality for getting data from a server etc).
  5. Start your local dev server to serve your application locally.
  6. Run Lighthouse against your app to verify if you have successfully implemented all PWA rules.
  7. If everything is ok, host your application over an HTTPS secured server.

See also

Document Tags and Contributors

 Contributors to this page: born2code, stephaniehobson, chrisdavidmills
 Last updated by: born2code,