Progressive Web Apps: new way to deliver amazing user experiences on web using Manifest and Service workers #DograsWeblog
Basically to convert the basic types of applications into the modern browser based application PWA is designed. The application type attempts to combine features offered by most modern browsers with the benefits of mobile experience. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience.
A Progressive Web App is:
Progressive — Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
Responsive — Fits any form factor: desktop, mobile, tablet, or whatever is next.
Connectivity independent — Enhanced with service workers to work offline or on low-quality networks.
App-like — Feels like an app, because the app shell model separates the application functionality from application content.
Fresh — Always up-to-date thanks to the service worker update process.
Safe — Served via HTTPS to prevent snooping and to ensure content hasn’t been tampered with.
Discoverable — Is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
Re-engageable — Makes re-engagement easy through features like push notifications.
Installable — Allows users to add apps they find most useful to their home screen without the hassle of an app store.
Linkable — Easily share the application via URL, does not require complex installation.
Progressive Web Apps are user experiences that have the reach of the web, and are:
Reliable — Load instantly and never show the downasaur, even in uncertain network conditions.
Fast — Respond quickly to user interactions with silky smooth animations and no janky scrolling.
Engaging — Feel like a natural app on the device, with an immersive user experience. This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.
Technologies
Manifest: The web app manifest is a simple JSON file that gives you, the developer, the ability to control how your app appears to the user in areas where they would expect to see apps (for example, a mobile device’s home screen), direct what the user can launch, and define its appearance at launch.
Service workers: Rich off-line experiences, periodic background syncs, push notifications — functionality that would normally require a native application — are coming to the web. Service workers provide the technical foundation that all these features rely on.
Finally, let’s update the list of files required for the app shell. In the array, we need to include all of the files our app needs, including images, JavaScript, stylesheets, etc. Near the top of your service-worker.js file, replace var filesToCache = []; with the code below:
Resources:
Originally published at codepen.io.
