Characteristics of a Progressive Web App

In the previous video, you learned that progressive web apps provide a native 0:00 app experience using modern web technologies. 0:04 Fundamentally, progressive web apps are not much different from regular websites 0:07 that are built with HTML, CSS, and JavaScript, and displayed in the browser. 0:10 What makes progressive web apps different from normal websites 0:15 are ten distinct characteristics. 0:19 These app-like characteristics, 0:21 defined by developers at Google, when fulfilled, will boost the experience of 0:23 your web app by providing most of the capabilities of native apps. 0:27 First up, being progressive means that a web app must work for 0:31 every user on all devices, regardless of the browser being used. 0:35 Progressive enhancement lies at the heart of progressive web app development. 0:39 The native app experience should be available to users with browsers 0:44 that support the technologies for progressive web apps and 0:47 take advantage of any features available on the user's device and 0:50 browser, but still deliver a standard experience to users on older browsers. 0:53 A progressive web app is also responsive, meaning it should fit any form factor, 0:59 a desktop, mobile, or tablet device. 1:04 Like you saw in the Flipkart Light and Flipboard apps, progressive web apps 1:06 provide a fully immersive experience, so they should fill the screen of a device 1:10 perfectly, using the principles and techniques of responsive web design. 1:15 Now one important characteristic is connectivity independence, 1:19 progressive web apps should work in areas of low connectivity or, like I showed you 1:23 on Flipkart Light, even when there is no Internet connection available. 1:27 A user can launch the app and 1:31 still display useful information no matter the connection, this is 1:32 accomplished by enhancing your app with a browser feature called service workers. 1:36 The browser runs service worker scripts in the background 1:41 to load your content almost instantly in an online connection and 1:43 still display content so that your app works offline or in low-quality networks. 1:47 You'll learn about service workers in the next video. 1:52 A progressive web app needs to feel like an app to the user, 1:54 with app-like interactions navigation and 1:57 minimal page refreshes, the app should respond quickly to user interactions. 1:59 When there's motion on the screen, like scrolling, transitions, 2:05 or animations, users shouldn't experience any stuttering or 2:07 choppiness, the experience should be silky smooth. 2:11 Earlier, you saw how launching an app from a home screen icon 2:14 displays the app full screen, without the browser Chrome, meaning no URL bar or 2:17 the forward and back buttons usually provided by the browser. 2:22 The app is built using an architectural model called Application Shell, 2:25 which I'll cover in a later video. 2:28 Next, a progressive web app should always be up to date, using service worker 2:29 updates when new content is published and the user is connected to the Internet, 2:34 that content should be made available in the app. 2:39 An app should be safe, so every progressive web app has to be served 2:41 through an HTTPS connection to prevent snooping and 2:45 ensure content hasn't been tampered with. 2:48 You see, progressive web apps work with native APIs, service workers, and 2:51 technologies that deal with sensitive data, so 2:55 this should be handled with caution. 2:57 Now, a free and easy way to run your app in a secure environment 3:00 is via GitHub pages, which can host directly over HTTPS. 3:03 Next, a progressive web app is on the web, so users should be able to discover 3:07 the app in search engines, this is one of the biggest advantages over native apps, 3:12 native apps lack the searchability of progressive web apps. 3:16 And later we'll cover the features that make progressive web apps 3:20 easily searchable in search engines. 3:23 Progressive web apps make re-engagement easy 3:25 through features like push notifications, just like on native apps. 3:28 Using service workers and the push API, progressive web apps can deliver 3:31 asynchronous notifications and updates to users that opt in, 3:35 which results in better engagement with timely new content. 3:39 Now, a progressive web app can be installed on the device's home screen, 3:42 making it readily available to users, so 3:47 when they launch it, it will feel just like any other app on their device, and 3:49 when in use, it even appears as a top level app in a device's tasks switcher. 3:52 Finally, progressive web apps are easily shared via URLs, 3:57 users simply click a link to access the content they're looking for. 4:01 There is zero friction, so 4:04 there's no complex installation and anyone with a web browser has access to the app. 4:06 So with the right set of capabilities in a browser, a progressive web app can be 4:11 as performant, reliable and as engaging as a native app. 4:15 Up next, you'll learn more about the technologies that go into 4:19 progressive web app development. 4:22