What are Progressive Web Apps?

“A Progressive Web App uses modern web capabilities to deliver an app-like user experience.” – Progressive Web Apps

   Native app store apps do things like send push notifications, work offline, look and feel like an app (as Apple and Google have imagined them), load on the home-screen, and so on and so forth. Mobile Web Apps accessed in a mobile browser, by comparison, historically haven’t done those things. Progressive Web Apps fix that with new Web APIs, new design concepts, and new buzzwords.

PWA is like pulled out the web content from a hybrid app and load it in a mobile browser.

Service Workers

    Service Worker is a worker script that works behind the scenes, independent of your app, and runs in response to events like network requests, push notifications, connectivity changes, and more.
    We can listen for events like fetch that happen any time a network request occurs. We can handle that event with full control, checking for cached data and returning immediately, or allowing the request to continue to the remote server. Our script acts as a proxy, or middle-ware, for the request.

Main takeaway:

    Service Workers are just a JavaScript file like any other, running in the background and triggered via events, and it’s up to you to write code to handle caching, push notifications, content fetching, etc. Since developers end up using the same “recipes” to do common tasks (like offline support), we will most likely want to use existing recipes to make our lives easier. Service Workers are available on Android with Chrome 50 and not currently supported by other major mobile browsers.

App Shell

    The App Shell model is a simple design concept whereby the initial load of a mobile web app provides a basic shell of a app UI, and the content for the app is loaded after.
    We can load our web app layout immediately (tabs, navigation controller, side menu, etc.), cache it through a service worker, and then fetch and update the content through JS after the app shell has loaded.

Installability and App Manifest

    Historically, mobile web apps were not installed like an app to the homescreen. Sure, a user could “pin” a mobile website to their homescreen on iOS and Android, but the experience was second-rate, and the app still did not come with the local features we expect out of native apps
    This is changing. Recently, Chrome on Android added support for installing web apps to the homescreen with a native install banner, just like the native app banners we’re used to.
    To tell Chrome our mobile website is installable as an app, we write a manifest.json file and link to it from our main HTML page (see the second link above for a full example).
    Currently, iOS doesn’t have any additional features here beyond Pin to Homescreen, so the experience won’t be as fluid, but here’s hoping Apple gives us some goodies this year.

Conclusion

    Progressive Web Apps are equal parts new Web APIs, design patterns, and marketing fluff. The mobile web comes closer to parity with installable app store apps through app manifest and home-screen install support, background worker functionality with Service Workers, faster load time with App Shell, and a renewed belief that web developers, too, can build amazing mobile app experiences.