Hello everyone, After converting one of my projects to PWA, I would like to share with you a brief overview of the following points:
- What is a progressive web application?
- Pros and Cons of PWA compared with Native Mobile Apps.
- Steps to convert your existing React App into PWA.
- Which one to use for your business (PWAs vs Native Mobile Apps)
1. What is a progressive web application?
PWAs are simply web apps which can be accessed via web browser like any standard web application, but they have been enhanced to be like native mobile apps in terms of appearance and user experience such as opening in a full screen, having the ability to be installed into home screen just like native mobile apps (So the user can use PWAs without the need to open the web browser to visit it). Also, they can have some offline functionality. Moreover, PWAs can even access user device’s hardware such as tracking your location, or using a camera and push notifications.
According to mdn web docs, PWA definition is
A progressive web app (PWA) is an app that's built using web platform technologies, but that provides a user experience like that of a platform-specific app.
2. Pros and Cons of PWA compared with Native Mobile Apps.
Pros:
- All static assets (webpack build) are cached. So, the page loads fast after the first visits, regardless of network connectivity. Also, some features can still be available even in offline mode.
- You can publish your Progressive Web App to the Google Play Store which limits the need to develop a native mobile app in many cases.
- By using PWAs, your app will be always up-to-date with no need to ask the users to download or to update their apps. Also, with no need to have multiple release schedules.
- Using PWA simplifies the development process compared to traditional native mobile development.
- "write once, deploy everywhere" Build once and you will have access to all devices (even desktop).
- Your PWAs will be indexed by Google. So, search engines can crawl your PWA and your app will be searchable. This feature will be attractive for all companies which already have their indexed websites and want to have their mobile apps without investing a lot in time and money. As a result, their apps can have an ability to be found by people searching on the web.
Cons:
Comparing with Native apps, PWAs have some limitations:
- By default the updated service worker* will stay in the "waiting" state. Which means that users will see older content until they close their existing tabs (reloading is not enough).
- Don’t have a good performance in terms of consuming device’s battery and processing power. Also, PWAs lack of features and have some integration problems with some mobile hardware.
- Many users are using iPhones or iPads. The iOS doesn’t fully support PWAs as the status of PWA still has not matured in iOS mobile phones. Which creates the most limiting issue regarding PWAs these days. PWAs can’t be installable in all browsers when using android and can be installable only in Safari when using iOS and with limited features. Moreover, many users have reported that PWAs are showing a white screen on iOS (16.4) which will cause a real issue regarding PWA adoption at the moment.
- Since PWA requires HTTPS to work (does not work with localhost) and the service worker is only enabled in the production environment, these will cause some difficulties in developing and trying any new features (There are some workarounds to handle these issues).
- Installing the PWA directly without the need to go to any apps store will raise doubts about the authenticity of the application unlike applications installed via Google play or Apple store. Of course PWA is designed to be secure. For example, PWA can’t read a user's phone's contacts, but here I am talking about what users are accustomed to and which takes a long time to change.
3. Steps to convert your existing React App into PWA
I. Run your app under HTTPS.
II. Update your web app manifest.json file.
You need to add some meta-data to your app to be installable such as name, description and corresponding icons to different mobile OS.
You can use the following website to generate as the required assets to run PWA in mobile device:
https://realfavicongenerator.net/
After that update your public/manifest.json and public/index.html files with the new generated ones.
You can review all details in the manifest.json from the browser DevTools => application tab.
III. Use service-worker in your app.
*service-worker.js is the heart of PWA which lives separated from browser pages. It acts as a network proxy for the web app. So, every network request originating from that app page passes through this service-worker. This is how PWA can control resource caching for the offline mode.
To add service-worker to the existing app:
- Create a new React app by using the following command
embed npx create-react-app my-app --template cra-template-pwa - Copy service-worker.js and serviceWorkerRegistration.js files from the new project to your existing one and into src/index.js, then, you should add the following
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
…
serviceWorkerRegistration.register();
In package.json copy add all "workbox… "dependencies from new project to existing one. Then re-install your packages using yarn or npm depending on which package manager you are using.
Add a simple notification to your app
First you need to request permission using:
Notification.requestPermission()
Then you can add your custom notification. For example, a daily notification as the following:
4. Which one to use for your business (PWAs vs Native Mobile Apps)
- PWAs could be the best choice for companies who don’t require mobile-specific capabilities in their apps and already have an existing website with Google ranking. So, in this case by using PWAs, their business can reach a wider audience than native apps.
- Native Mobile Apps are the best choice for businesses that require some features existing in modern mobile devices (or not supported by PWAs), or just require a higher security level.
Although PWA has some shortcomings, it is still a strong new competitor on the scene with a lot to offer and a promising future.
After all, PWA can be a suitable candidate for many businesses to have a mobile app that meets their business requirements in a short time and at a low cost, after taking into consideration PWA adoption delayed in iOS.
🎉🎉React PWA => https://phoenix-ecommerce-pwa.netlify.app/
Top comments (0)