Progressive Web Apps have really made the Web a powerful platform with lots of native capabilities narrowing the long lasting App Gap between the Web and Native Mobile platforms. The gap between what’s possible on the web and what’s possible on native.

Building blocks

  • Service Workers - Entry point to implementing Native Capabilities

  • Web Manifest - Entry point to implementing Native Capabilities

  • HTTPS - Entry point to implementing Native Capabilities

  • Native UI - Should also look Native


Service Worker

Enables applications to control network requests, cache those requests to improve performance, and provide offline access to cached content.


Web Manifest

This is the PWA entry point to your PWA when a user launches from the home screen. Includes information about the app name, icons it should use, the start_url it should start at when launched, and more.


Loading the App Manifest

Add a link tag to all the pages that encompass your web app

<link rel="manifest" href="/app.webmanifest">
App Name

The short_name is used on the user's home screen, launcher, or other places where space may be limited; name is used in the app install prompt. 

 {
      "name": "YOUR_APP",
      "short_name": "YOUR_APP",
 }
App Icons

These icons are used in places like the home screen, app launcher, task switcher, splash screen, etc. 

"icons": [
      {
        "src": "/images/icons-192.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "/images/icons-512.png",
        "type": "image/png",
        "sizes": "512x512"
      }
    ]
PWA Display
You can customize what browser UI is shown when your app is launched. 
 {
      "display": "standalone",
      "orientation": "portrait",
      "start_url": "/index.html",
      "scope": "/",
    }

HTTPS

Service workers sit between the browser and the network, so they actually manage every request that comes through. And you can imagine, it’s critically important that site owners own their service workers - or they are powned. This is why Service Workers require HTTPS.


Native UI

With all these native capabilities available on the web today. It's now important we also introduced an exciting topic in the picture; Progressive Web User Interface

Developer Notes

You want to join our developer program?