Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Improving your User’ Web Experience -Progressive Web Application

Improving your User’ Web Experience -Progressive Web Application

Progressive Web Application, its importance, and usage.



July 17, 2021


  1. 1

  2. 2

  3. 3 Bio Ihedioha Chinonso Software Engineer Technical Writer

  4. Architecture 4 Improving your User’s Web Experience -Progressive Web Application

  5. Overview PWA What?🧐 PWA How?🤨 PWA Why?😏 5

  6. What is PWA Progressive Web Application is an Application built

    with Web Technologies such as HTML, CSS, Javascript and modern Web Api to create a native app-like user experience. This simply means that we could have a standalone web application and also create a cross-platform application from it. All that is needed is for us to just visit the PWA website and install the application to our device. This application then acts like a native application. A PWA can also be developed using popular web frameworks such as Angular, React, and ASP.NET Core. 6
  7. 7

  8. Does PWA increases Performance? Yes! PWAs helps you cache application

    assets more reliably. This makes it possible to retain the current assets instead of fetching it again, thereby increasing the speed of your application. It is only when the new visitor visits further pages during the session or returns back later that the PWA caching comes into picture. So, if a large number of first visitors are bouncing off your site due to slow loading, PWAs will not help improve their speed experience. 8
  9. 9

  10. Important Terminologies A complete PWA should have the following 3

    features 1. Secure contexts (HTTPS) The web application must be served over a secure network. Being a secure site is not only a best practice, but it also establishes your web application as a trusted site especially if users need to make secure transactions. Most of the features related to a PWA such as geolocation and even service workers are available only once the app has 10
  11. Important Terminologies 2. Service workers A service worker is a

    script that allows intercepting and control of how a web browser handles its network requests and asset caching. With service workers, web developers can create reliably fast web pages and offline experiences. 11
  12. Important Terminologies 3. Manifest file A JSON file that controls

    how your application appears to the user and ensures that progressive web apps are discoverable. It describes the name of the app, the start URL, icons, and all of the other details necessary to transform the website into an app-like format. 12
  13. Key Features of PWA The key features of PWAs include

    native app user experience, work offline, push notifications, and device hardware access. These features can be broken down into the following: 1. Progressive and Responsive PWAs support the majority of the modern browser with newer capabilities. The responsiveness of PWAs makes them fit and display well on mobile phones, tablets, laptops, and desktops. That means, once you build a PWA, you don’t need to worry about what browsers or devices users use. 13
  14. Key Features of PWA 2. Native Experiences The key functionality

    that separates a native app with a browser Web app includes native user experience, app icon on the mobile device screen, search in the app store, and push notifications. PWAs support all these key features. 14
  15. Key Features of PWA 3. Service Worker A service worker

    is a script that your browser runs in the background, separate from a web page, which enables features that don't need a web page or user interaction. These includes feature It is also a key component of PWAs that allows an app to provide offline sync, local caching, push notifications, and communication between the worker thread and the main browser thread. 15
  16. Key Features of PWA 4. Supports a wide range of

    web technologies The only key difference between a PWA and native apps is the technology and where the app runs. A PWA is a web application and is served from a web server. A native app runs on a local device. A well done PWA can run locally, just like a native application. On Windows and Android, the add to home screen process even compiles the PWA to a native app on the platform.While PWAs are written in web technologies, native apps are often written in proprietary technologies designed for a specific platform only. For example, Apple iOS apps are written on Swift and Objective-C, and Android apps are written in Java and Kotlin respectively. PWAs can be written in any web technologies such as a combination of HTML+ JavaScript, React, Angular, or ASP.NET Core. 16
  17. 17

  18. 18

  19. 19

  20. Companies using PWA 20

  21. 21

  22. User Flow 22

  23. 23

  24. Creating a Progressive Web Application 24

  25. Visit https://github.com/nonsodaniel/Simple-PWA-Demo and clone/download the repository 25

  26. Thank you! https://developer.mozilla.org/en- US/docs/Web/Progressive_web_a pps https://web.dev/progressive-web -apps/ https://developers.google.com/w eb/fundamentals/primers/service -workers

    https://www.tezify.com/post/will_ pwa_solve_your_speed_issues/ Resources 26 Ihedioha Chinonso - Frontend Engineer @Blip