Progressive Web Apps (PWA) are growing and so is the demand of PWA developers. This article is an introduction to PWA and talks about why PWA and PWA advantage over traditional web and mobile apps.
The number of web and cloud apps is growing every day. Today, there are 2 billion websites in the world and among them, 400 million are active. Mobile apps are growing at an even faster pace. There are close to 4.2 billion mobile apps in the world consumed by 4 billion mobile internet users. If you look at the global mobile app market, it is captured by two companies, Google, and Apple. The global mobile operating system market is dominated by Google’s Android with a 74% share and Apple’s iOS is 23%. Native apps are not confined to mobile. Windows has always had a rich native application eco-system. Windows applications are typically written in C#, C++, or even C. Other platforms, like Linux, cannot be excluded. We can classify these as desktop or workstation-based applications.
There are several technologies to build mobile apps and native apps are the most common way to build mobile apps. Apple’s Swift is used to build native iOS apps and Java/Kotlin are used to build Android native apps. Third-party tools including Xamarin, Reactive Native, Flutter, and NativeScript are some of the popular platforms used to build native apps. Hybrid platforms are another popular way to build mobile apps that use HTML, CSS, and JavaScript to build hybrid mobile apps. The newest technology in this field is progressive web apps.
PWA or Progressive Web Apps is a technology for building modern Web applications for mobile. Technically, a progressive web app is a web application written in HTML, CSS, and JavaScript and runs in a Web browser. A PWA can also be written using popular web frameworks such as Angular, React, and ASP.NET Core.
Why PWA?
Typically, languages used to develop Web applications are different than native mobile apps. No one language or technology covers both native and web. The application layer where a web app and native app differ is the front-end side. For example, HTML, CSS, and JavaScript are used to build web applications. Native requires one of the previously mentions platform-specific languages.
Other common technologies used to produce web applications are Angular, React, Vue, Ruby, Node, ASP.NET Core, and PHP. Those technologies reside either above the UI or on the server/cloud.
Java and/or Kotlin is the most common technology to build native Android apps and Swift is now the technology to build iOS native apps. Even when using a third-party platform like Xamarin the code must be transpiled to these native languages as they are compiled.
A classic web application/site has the following limitations:
- Served from a web server and web pages are served via a web browser.
- Requires internet connectivity.
- Runs within the visible confines of a browser.
- Does not support native notifications.
- Has limited access to device resources.
- The performance of a web application can be bad on a slow internet connection.
The above limitations of web applications lead businesses to build native mobile apps.
Even with latency in implementing the latest native APIs, the web has almost 100% feature parity with native. It does depend on the browser. Edge and Chrome are the leading browsers with Apple’s Safari lagging several years behind.
Even with Safari’s limitations many features can be polyfilled or ignored, as they are often not critical to an application’s success.
Now, here comes the biggest challenge for a business. To support both mobile and Web, a business must build and maintain two different technologies, one for Web and one for native. Native is then split among multiple platforms for many applications (iOS, Android, and Windows).
Not only it leads to a longer development period but also it becomes a costly affair. Post-deployment is not cheaper either. A business must maintain two or more different code bases and experts from separate technologies. For example, if a business builds a Website in Angular, and native mobile apps in Kotlin and Swift, it requires developers from all three technologies.
The idea behind PWAs was to have one technology that can make a Web application function, like a mobile app that not only gets developed cheaper. but to maintain and support it the business only needs experts in one technology.
Progressive Web Apps vs Native Apps
Swift and Objective-C are two programming languages to build iOS targeted native apps. Java and Kotlin are two programming languages to build Android targeted native apps.
Native apps have their own benefits. The key advantages of native apps are the following:
Key Features of Progressive Web Apps
The key features of PWAs include native app user experience, work offline, push notifications, and device hardware access.
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.
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.
3. Service Worker
A service worker is 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. A service worker cannot access local storage and DOM directly. To support local storage and DOM access, there are different workarounds.
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.
Limitations of Progressive Web Apps
The idea of PWAs sounds amazing. So, why isn’t every mobile app a PWA then? Here are some of the PWA’s limitations.
PWA is not native. Some app developers and users just love native. Native user interfaces are often changed when a new operating system is launched. Most of the native functionality is backward compatible.
PWA needs and runs in a browser. It is still a Web application and you need to be a Web developer to write PWAs.
New OS features support is often delayed in PWA as they matriculate through standard committees and browser teams.
Advantages of Progressive Web Apps
Besides the above key features, some additional advantages of PWAs include the following:
Faster development. PWA is only one application that functions as a web app as well as a mobile app. It is a Web application hosted on a web server and runs in a web browser.
One codebase. Web and mobile apps can be developed as the same codebase and support all devices and browsers.
Low maintenance. It's all developed and deployed on a web server, it has centralized control over the deployment and updates.
What is a Service Worker in Progressive Web Apps?
A service worker is a vital part of progressive web apps. It is a web worker that runs in the background thread without impacting the main browser thread. It is a JavaScript file that is responsible for intercepting network requests, caching, offline storage, push messages and notifications. A service worker helps improve performance of an app by using caching and offline storage.
If you have worked with web workers in the past a service worker will have a familiar feel. The key difference is a service worker intercepts all network requests and allow you to determine how that request will be handled.
Service workers use the following four APIs:
- Push Notifications API (not available on iOS) that allows app to work with operating system’s native notification system. Push messages handled by a service worker and does not need to run a browser.
- Background Sync API that syncs app in the background without impacting the main browser thread’s performance (limited to Edge and Chrome).
- Channel Messaging API allows web workers and service workers communicate with each other and with the host application.
How Does a Progressive Web App Work?
To make a web app a progressive app, a web app manifest, service worker and using HTTPS are the main requirements. Beyond these features it is up to you which enhanced web APIs you leverage to deliver the user experience.
Web App Manifest
A web app manifest adds native mobile app experience to a web application that includes a home app icon, splash screen, and launching an app from the icon in full-screen mode without a browser URL bar. The manifest also manages the app rotation and typography on different mobile screens.
The manifest file for a web application is a JSON file named manifest.json that is used to how an app will appear on the home screen, how it can be launched, what images and icons to load for what sizes, start URL, display mode, background color, and theme color.
Here is an example of a simple manifest.json file:
- MyApp/app/manifest.json
- {
- "name": "My App name",
- "short_name": "MyApp",
- "icons": [{
- "src": "images/img128x128.png",
- "sizes": "128x128",
- "type": "image/png"
- }, {
- "src": "images/img158x158.png",
- "sizes": "152x152",
- "type": "image/png"
- }, {
- "src": "images/img144x144.png",
- "sizes": "144x144",
- "type": "image/png"
- }, {
- "src": "images/img192x192.png",
- "sizes": "192x192",
- "type": "image/png"
- }],
- "start_url": "/index.html?homescreen=1",
- "display": "standalone",
- "background_color": "#333EEE",
- "theme_color": "#22FFBB"
- }
Here is another manifest file example of Google Chrome Install Banner Sample manifest.json:
- {
- "name": "App Install Banner Sample",
- "short_name": "App Install Banner Sample",
- "icons": [
- {
- "src": "launcher-icon-0-75x.png",
- "sizes": "36x36",
- "type": "image/png"
- },
- {
- "src": "launcher-icon-1x.png",
- "sizes": "48x48",
- "type": "image/png"
- },
- {
- "src": "launcher-icon-1-5x.png",
- "sizes": "72x72",
- "type": "image/png"
- },
- {
- "src": "launcher-icon-2x.png",
- "sizes": "96x96",
- "type": "image/png"
- },
- {
- "src": "launcher-icon-3x.png",
- "sizes": "144x144",
- "type": "image/png"
- },
- {
- "src": "launcher-icon-4x.png",
- "sizes": "192x192",
- "type": "image/png"
- }
- ],
- "start_url": "./index.html",
- "display": "standalone"
- }
If you don’t want to write your manifest.json by hand, you can also generate using PWA Starter, https://pwastarter.love2dev.com. It will create a full set of home screen icons, a manifest file, and a skeleton service worker.
Service Worker
As discussed earlier, a service worker in PWA is responsible for running some tasks such as notifications, push messages, and sync in the background.
A service worker is a script that runs in the background by the browser. A service worker’s life cycle is different than the life cycle of the web page. The following is the simplified server worker lifecycle.
Image source: Google
To install a service worker you need to kick start the process by registering it in your page. This tells the browser where your service worker JavaScript file lives.
- if ('serviceWorker' in navigator) {
- window.addEventListener('load', function() {
- navigator.serviceWorker.register('/sw.js').then(function(registration) {
-
- console.log('ServiceWorker registration successful with scope: ', registration.scope);
- }, function(err) {
-
- console.log('ServiceWorker registration failed: ', err);
- });
- });
- }
How to convert an existing website to a PWA
It’s very easy to convert an existing website into a progressive web app. In this below video, Chris Love shows how to upgrade an existing website to a progressive web app in 15 minutes.
Where can I find a PWA expert?
Chris Love, founder of
https://love2dev.com/ is one of the top advocates and experts of PWA. Chris has been building PWA apps for years and has written several technical papers on this topic.
Will a PWA skillset help me get a job?
Making a Web app a PWA is an additional skill of a web developer. While web developer jobs are in high demand for all web development technologies, including Angular, React, JavaScript, and ASP.NET Core, PWA is not needed for every project. However, the need for PWA components is growing day by day and hence the demand. Having PWA skills is definitely a plus for a web developer.
As a web developer, you are well on your way. Learning how to program using a service worker is an added skill. Plus, since any and all websites can be converted to a PWA it will pay to have some service worker skills on your CV.
What is the salary of PWA developers?
PWA developers are front-end developers. The salary of a developer depends on technology, location, and experience. For example, a React developer salary in the US is $120,000 a year. But this number can change drastically if the job is in San Jose, CA, or Boston, compared to a small town. A developer with 15 years of front-end experience with progressive web app can cost much higher compared to a developer with 5 years of experience.
How much time does it take to make a website a progressive app?
It depends on the web app. It can take from a few weeks to a couple of months to convert a web app into a progressive web app. The good news is, once a web app is progressive, you do not need to build separate apps for desktop and mobile. The same app works on all devices.
Which web browsers support PWA?
All modern web browsers such as Chrome, Edge, Firefox, and Safari support progressive web apps. Most mobile browsers also support PWA.
Does PWA work on mobile phones?
Yes, most of the mobile browsers support PWA. As a matter of fact, a progressive web app works like a native app on mobile phones. Not only mobile browsers make an app look like a mobile app, but also support native features such as notifications, messages, and local cache.
What are the most popular PWA apps?
Several popular companies have progressive web apps. Some of the popular PWA apps include Facebook, Pinterest, Flipkart, Telegram, Google Maps, Uber, Starbucks, Twitter, Forbes, and Tinder.
Where can I learn PWA?
In this training, you will learn the following:
- Introduction to PWA
- When should you use a PWA
- PWA development cycle
- Make a static website work offline
- Installing a PWA on the home screen
- Introduction to Service Worker
- Intro to Promises
- Using the Fetch API
- Advanced Promises
- Debugging Service Workers in Chrome
- Debugging Service Workers in Firefox
- Debugging Service Workers in Safari
- Tools for building PWA: Workbox
- Gulp setup
- Using Workbox to manager your caches
- Using Workbox to build systems
- When and how to update the cache
- PWA caching strategies
- Caching user content (social sites)
- Caching server-generated content (publishing/news sites)
- Client-side data for PWA – Using Cloud Firestore
- Working with live data in the service worker
- Indexing your PWA (Discoverability & SEO)
- Installing Google Analytics into web applications
- Authentication for PWA
- Implementing OAuth2 in PWAs
- Introduction to Web Push and Notifications
- Display Notifications
- Send and receive push messages
- Use VAPID to secure push messages
- Easier payments for PWAs
- Implementing the Web Payments API
- Responsive Design
- Responsive images
- IndexedDB
Conclusion
The need for progressive web apps is growing each day. This paper explains the basics of PWA and why a business should look into adding PWA to its product strategy. Not only is PWA a need today, with its offline abilities, local caching, and push notifications offerings, but it also builds one code base to target both desktop and mobile devices, making it more attractive to any business that is not married to native mobile apps and wants to save money and resources.
Need help with a PWA?
If you want to build a progressive web app and need help, advice, or developers, feel free to contact me here or on my LinkedIn or visit my company website,
www.mindcracker.us.
References
Wikipedia
https://developers.google.com/web/updates/2015/12/getting-started-pwa
https://web.dev/progressive-web-apps/
www.c-sharpcorner.com