Progressive Web App
- 2. PROGRESSIVE WEB APP Author: Saleh Rahimzadeh
- 3. PROGRESSIVE WEB APP Native Apps vs. Traditional Web Apps A brief comparison between Native Apps and Traditional Web Apps
- 4. PROGRESSIVE WEB APP Native Apps A native mobile app is a smartphone app that is coded in a programming language like Objective-C for iOS or Java for Android operating systems. Positive features: Fast performance and a high degree of reliability. Complete access to phone’s hardware. They can modify system settings. They can access phone’s devices and features, (camera and address book). Negative features: They take longer to build They have slower iterations, which means it takes a while for updates to be available to users. A bigger budget to build your app for multiple platforms (i.e. iPhones and Android) and to keep your native app updated.
- 5. PROGRESSIVE WEB APP Traditional Web Apps Web applications are basically websites application that is accessed via a web browser which are built using standard HTML, CSS, and JavaScript. Positive features: Real-Time Delivery. You don’t need to install the web app on your device. Any update will be instantly delivered to all the users. Running in multiple browsers and device. Doesn’t require complex functionalities or access to operating system features. Building a web app can be the least expensive option. Developing a web app can be simple and quick. Negative features: Limited access to device’s features. Web apps depend on internet connectivity. They can be slower.
- 6. PROGRESSIVE WEB APP What are Progressive Web Apps (PWA)? Simply, a Progressive Web App is a mixture of a mobile and web app! A Progressive Web App is a modern website that uses modern web capabilities to deliver fast, engaging, and reliable mobile app-like experience for users.
- 7. PROGRESSIVE WEB APP This new application model attempts to combine features offered by modern browsers (modern web APIs) to create cross-platform web applications that can bring native-like performance and mobile experience to web apps.
- 8. PROGRESSIVE WEB APP Background In 2015, Google Chrome engineer Alex Russell coined the term "progressive web apps" to describe apps taking advantage of new features supported by modern browsers.
- 9. PROGRESSIVE WEB APP Terms and Characteristics According to Google Developers, A PWA application has these characteristics:
- 10. PROGRESSIVE WEB APP Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core principle. Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to emerge. Connectivity independent - Working offline, or on low quality networks. App-like - Feel like an app to the user with app-style interactions and navigation. Fresh - Always up-to-date. Safe - Served via HTTPS to ensure content hasn’t been tampered. Discoverable - Allowing search engines to find them. Re-engageable - Make re-engagement easy through features like push notifications. Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store. Linkable - Easily shared via a URL and do not require complex installation.
- 11. PROGRESSIVE WEB APP Fast loading Working offline Launching from home screen Receiving push notification
- 12. PROGRESSIVE WEB APP Technologies Commonly used technologies serve to create progressive web apps are the following: Manifest The web app manifest is a W3C specification defining a JSON-based manifest to provide developers a centralized place to put metadata associated with a web application . Service workers Service workers provide a scriptable network proxy in the web browser to manage the web/HTTP requests programmatically. They lie between the network and device to supply the content. They are capable of using the cache mechanisms efficiently and allow error-free behavior during offline periods. Push Notifications The Notifications API lets a web page or app send notifications that are displayed outside the page at the system level; this lets web apps send information to a user even if the application is idle or in the background. Application shell architecture ‘shell’ that offers an initial static frame, layout, or a sort of architecture wherein the content may be loaded progressively as well as dynamically.
- 13. PROGRESSIVE WEB APP Example: flipboard.com Progressive Apps are web apps, they begin life in a tab. Here we see flipboard.com in Chrome for Android with regular tab treatment. When users engage with Progressive Apps enough, browsers offer prompts that ask users if they want to keep them. The app shortcut appears on the homescreen or launcher of the OS. When launched, Progressive Apps can choose to be full- screen. Progressive Apps are top- level activities in the OS’s application switcher.
- 14. PROGRESSIVE WEB APP PWAs in browsers
- 15. PROGRESSIVE WEB APP Why Progressive Web Apps are important? Why we need them? A PWA is an all-in-one solution for a site/app to be delivered across all devices with hassle-free app-store distribution. “Web apps upgraded to be first-class apps” They can work in poor internet connectivity. They are taking off around the world. Global marketers use them to create a seamless user experience on mobile without building an app. They use Low Data Consumption in compare to Mobile Apps. Cost of a progressive web app: For an app publisher, the biggest advantage is the cost saving in terms of app development and maintenance. Average costs may be up to ten times smaller compared to those of native applications. They will Save Money for Companies Instance Update Costs are Significantly Low Work Great from SEO Perspective Business Results Expandable Cross-platform Backed by Google Improved Performance Zero install No Need for App Store Submission Technology has Reached Ideal Maturity Level
- 16. PROGRESSIVE WEB APP Companies • Big Brands are Coming On Board • Google, Microsoft, and Apple are All Jumping on Board for Progressive Web Applications • Google Will Take Lion’s Share of the Benefits • PWAs will Bridge the App Gap for Microsoft • Microsoft is Working Hard • Chrome Apps Going the PWA Way • Google Has Some Exciting Developments • There are Endless Opportunities for FinTech
- 17. PROGRESSIVE WEB APP PWA on 2018 conferences Google IO 2018 Microsoft Build 2018
- 18. PROGRESSIVE WEB APP The Outcome Twitter •The number of tweets sent increased by 75% •The number of pages per session increases by 65% •The bounce rate for them came down by 20% •Images were optimized and the data consumption came down by as much as 70% Pinterest •There was a 40% increase in the average time spent on the site •There was a 44% appreciation in the user-generated ad revenue for the site •There was a 50% increase in the ad click throughs on the site •There was an overall 60% elevation in the core user engagement Forbes •There was a 43% increase in session per user •There was a 20% appreciation in ad viewability •There was a three-fold increase in in-depth scroll •There was a whopping 100% increase in User engagement Alibaba •There was a 76% increase in the conversion all across the browsers •They witnessed a 4 times higher interaction rate from “Add to Home Screen” •They had 14% more monthly active users and 30% more on Android
- 19. PROGRESSIVE WEB APP Cons of PWAs Limited Access to Native Features Limited Support for Software Functionality Cross Application Logins Inexperience of In-House IT Teams Slow first delivery Not easy implementation (20% - 100% effort to implement) Pros of native-apps They are faster NFC Support Interact Among Themselves Wake Lock Hidden Advantages of App Stores
- 20. PROGRESSIVE WEB APP What Are Progressive Web Apps? Progressive Web Apps Are Efficient And Economical. Progressive Web Apps Are The Future. Progressive Web Apps Are A Mobile-First Approach.
- 21. PROGRESSIVE WEB APP Future • Progressive web apps are very much in their infancy as a technology and concept. • With time, the PWAs should become more of the standard for web applications than just the interesting idea. • PWAs are starting to become more of a desired feature, with development companies being hired to update a website to match the new standards needed.