Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Progressive web apps

Introduction to progressive web applications

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen
  • Als Erste(r) kommentieren

Progressive web apps

  1. 1. Progressive Web Applications By Akshay (MCA - IInd Semester)
  2. 2. Topics Covered What is a Progressive Web Application? Characteristics of Progressive Web Applications. History of PWA’s. Features of PWA’s. Why To Build Progressive Web Applications? Technologies Used in PWA’s Pros and Cons of Progressive Web Applications. PWA’s and their influence. Impact of PWA’S Conclusion.
  3. 3. What is PWA? ● Progressive web apps (PWAs) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications. ● The application type attempts to combine features offered by most modern browsers with the benefits of mobile experience. ● A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. ● These apps meet certain requirements and are deployed to servers, accessible through URLs, and indexed by search engines.
  4. 4. Characteristics of Progressive Web Apps (PWA’s) ● Progressive - Work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet. ● Responsive - Fit 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- Use the app-shell model to provide app-style navigation and interactions. ● Fresh - Always up-to-date thanks to the service worker update process. ● Safe - Served via HTTPS to prevent snooping and ensure content has not been tampered with. ● Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
  5. 5. History of PWA’s ● In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term "progressive web apps" to describe apps taking advantage of new features supported by modern browsers, including service workers and web app manifests, that let users upgrade web apps to progressive web applications in their native operating system. ● Using a set of open standard technologies such as, service workers, the app manifest, and cache and push APIs, we can create applications that are platform independent and deliver app-like user experiences. This brings parity to web and native applications and helps mobile developers reach users beyond the walled garden of the app stores. Think of PWAs as websites that act and feel like native apps.
  6. 6. Features of PWA’s ● 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 poor quality scrolling. ● Engaging - Feel like a natural app on the device, with an immersive user experience.
  7. 7. Why to Build Progressive Web Applications
  8. 8. Why To Build Progressive Web Applications ● Can Be Added To Home Screen: When the Progressive Web App criteria are met, Chrome prompts users to add the Progressive Web App to their home screen. ● Increased Engagements : Web push notifications helped eXtra Electronics increase engagement by 4X. And those users spend twice as much time on the site. ● Work reliably, no matter the network conditions: Service workers enabled Konga to send 63% less data for initial page loads, and 84% less data to complete the first transaction! ● Improved Conversions :The ability to deliver an amazing user experience helped AliExpress improve conversions for new users across all browsers by 104% and on iOS by 82%.
  9. 9. Technologies Used In PWA’s ● Manifest. ● Service Workers. ● Application Shell Architecture.
  10. 10. Web App 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 including: ● The name of the web application. ● links to the web app icons or image objects. ● The preferred URL to launch or open the web app. ● The web app configuration data for a number of characteristics. ● Declaration for default orientation of the web app. ● Enables to set the display mode e.g. full screen. By setting and manipulating the metadata for the web manifest file, developers enable user agents to create seamless native-like mobile experiences through the progressive web app.
  11. 11. Service Workers Technically, service workers provide a scriptable network proxy in the web browser to manage the web/HTTP requests programmatically. The service workers 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. Properties of service workers 1. Trigger and keep alive by the relationship to the events, not by the documents 2. Generic in nature 3. Event-driven with time limit scripting contexts and running at the origin
  12. 12. Application Shell Architecture ● Some progressive web apps use an architectural approach called the App Shell Model. ● For rapid loading, service workers store the Basic User Interface or "shell" of the responsive web design web application. ● This shell provides an initial static frame, a layout or architecture into which content can be loaded progressively as well as dynamically, allowing users to engage with the app despite varying degrees of web connectivity. ● Technically, the shell is a code bundle stored locally in the browser cache of the mobile device.
  13. 13. Pros and Cons of PWA’s
  14. 14. Pros of PWA’s 1. The PWAs are the web pages: therefore they do not require installation. Nevertheless, you can install a progressive web app on your home screen for easy access anytime. 2. The same thing is with updates: Being essentially the web pages, the PWAs can only be refreshed using and require no update function. 3. High portability is another benefit of a PWA and it does not change your packaging or deployment model unlike the strategies for native apps. 4. Service Worker technology provides quick loading of your app regardless of the network connection quality. 5. The PWAs are always available on your home screen for easy run and return. 6. Compared to the native apps, the PWAs do not use much space and resources, which extends the battery life of a device and requires less data usage due to the Service Worker, which provides functioning even in offline mode. 7. The use of application shell model for building the PWAs provides an interface of native apps with scrolling, navigation and other features. 8. Due to the Service Worker technology, the PWAs sends push notifications to the device providing refreshed content even at the closed browser. 9. Security of the PWAs is ensured via HTTPS hosting.
  15. 15. Cons of PWA’S 1. There is No Central Download Store – Traditionally, app stores have been central repositories of applications helping users find apps and providing a level of legitimacy. PWAs do not require an app store and may have difficulty getting users to find their apps and instilling confidence that the apps are legitimate. 2. Not all Browsers are Supported – While newer versions of Chrome, Opera, and Samsung’s Android browser support PWA, IE, Edge, Safari and many custom and proprietary default browsers do not. At this point, Safari alone has close to 50% of the mobile browser market. 3. Not All Native Device Software Functionality is Supported – PWA support is limited on Android devices, and they do not support functionality such as home screen shortcut prompting and notifications on iOS devices. In the U.S., iOS is about 50% of the mobile device market. 4. The PWAs do not support cross application logins. Unlike many applications, requiring an individual login, the PWAs can not collect this data independently. 5. Developing high-quality web experiences can be difficult for less skilled development teams
  16. 16. Impact of PWA’s
  17. 17. Flipkart Lite ● Users time on site with Flipkart lite vs. previous mobile experience: 3.5 minutes vs 70 seconds. ● 3x more time spent on site ● 40% higher re-engagement rate ● 70% greater conversion rate among those arriving via Add to Homescreen ● 3x lower data usage
  18. 18. Book My Show ● BookMyShow's PWA drove an 80%+ increase in their conversion rates. ● The size of the PWA is 54x smaller than the Android app and 180x smaller than the iOS app. ● The PWA takes less than 2.94 seconds to load and enables checkout within 30 seconds.
  19. 19. Conclusion ● Google, Microsoft, and many others are embracing PWA’s. For Microsoft, there is recognition that they can make money providing service using their Azure platform, For Amazon, their Amazon Web Services. ● PWAs are exciting because they bring back some of the excitement of writing and sharing applications without all of the complexities of applications meant for wide market sales. ● Today’s PWAs are built on the current web, which is optimized for content distribution and commerce. As we explore new use cases, one should expect to see much innovation, including the development of more peer technologies rather than a focus on delivering services. ● The current technologies and protocols are already a strong basis for delivering these capabilities. Consumer electronics devices will increasingly use PWA’s either internally or as an interface.
  20. 20. Thank You!

    Als Erste(r) kommentieren

    Loggen Sie sich ein, um Kommentare anzuzeigen.

  • mmrd_2007

    Feb. 12, 2019

Introduction to progressive web applications

Aufrufe

Aufrufe insgesamt

200

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

0

Befehle

Downloads

9

Geteilt

0

Kommentare

0

Likes

1

×