Название: Implementing Progressive Web Apps with React: A Practical Guide to create Web Apps that provides a native experience to the users
Автор: Enrique Pablo Molinari
Издательство: Leanpub
Год: 2022-06-20
Страниц: 98
Язык: английский
Формат: pdf (true)
Размер: 10.2 MB

Did you know that with PWAs you can create Web Apps that deliver a user experience similar to native apps? Did you know that with the React tooling most of the work to create them is almost done? I will explain how to create PWAs with the React tooling and describe what the generated code does in order you can safely iterate over it.

In this book we are going to implement a Progressive Web App (PWA) using a step-by-step approach. This learning experience starts with an already crafted React application called Task List, created using the create-react-app tool with the cra-template-pwa template, which gives us a good starting point for building a progressive web app.

We will go into the details about how to make the web app installable and after that how to improve the user experience by adding offline support to the web app. To make the learning process smooth I will first add offline support for the read-only use cases of the application. After that, I will show how to provide full offline support by using the IndexedDB database and the Background Sync service. I will also explain how to update progressive web apps. How users get notified that there is a new release of the application waiting to be installed and how that actually happens.

Progressive Web Apps are Web Apps that thanks to modern browser features, give users an experience similar to native mobile apps. As described by Google web.dev, on the web platform you can create and run applications to reach anyone, anywhere and on any device with a single codebase. On the other hand, platform specific applications (like mobile native apps) are very rich and reliable. They work regardless of network connection. They can interact with the camera, read your contacts, share your calendar and many others. Progressive Web Apps fit in the middle of these. They can deliver enhanced capabilities like working offline, be reliable, installable and receive push notifications, like platform specific apps. The good thing is that they run on a browser. This is possible thanks to a technology implemented by modern browsers called Service Worker.

Capabilities of Progressive Web Apps:

- Installable: Progressive web apps can be installed in desktops or in mobile devices. Installing a PWA in mobile devices gives the users a similar experience as they have with native apps. An icon launcher is created the same as a native app, it will be listed in the applications section of the mobile operating system to be removed just like any other native app. It will run on its own windows without any browser evidence.

- Splash Screen: Related to the previous capability, an installed PWA when launched a splash screen is shown while loading. Same experience as native apps.

- Offline Support: Most of the PWA features were created to enable developers to create web apps that run even when connectivity has gone. The Service Worker is the piece of software that enables us to provide offline capabilities.

- Background Sync: This capability allows us to defer the access to server-side APIs once connectivity is back. I mean, under connectivity issues the web app might continue working, storing data on a browser’s database like indexedDB and syncing that data once connectivity is back.

- Push Notifications: This capability enables web apps to receive push notifications in a similar way that is possible for native apps.

- Other Capabilities: There are other capabilities like Web Share API that allows us to share content with other apps. The Contact Picker API allows us to interact with our contact list to share some limited details. The Media Session API allows us to interact with media keys on keyboards, headsets, remote controls, etc. And additionally, it is also possible to have our PWA on the Android app store, just like a native app. And the same might occur on the Apple Store, depending on the type of the application you are building. PWABuilder can help with this.

This book requires prior knowledge of jаvascript and React.