A Case for Writing Progressive Web Apps
In the time of COVID-19, more and more people are spending time on their mobile and desktops. While we’re not technically allowed to go anywhere, there are still some of us who exercise, take public transit to work, etc.
In general, more people use their mobile devices — so it’s imperative that apps provide two things: storage and high performance. There has long been a war between Native Apps and Progressive Web Apps (PWAs). Most apps are Native Apps, whereas PWAs are fairly new to browser support.
In order to answer the public demands, developers seek to choose the right solution for their product to make their users happy. The choice isn’t always simple, but I’m here to tell you that it kind of is — build a PWA.
What Are Progressive Web Apps (PWAs)?
PWAs are mobile apps that are delivered via your browser. They look and work just like native applications, but they’re developed on the web. PWAs are styled with responsive design and can be browsed on any mobile device, tablet, or desktop.
PWAs are essentially website that act like native applications on mobile devices. They can be recognized by search engines, users can share the URLs, they load and respond to user actions quickly. Two major differences between a traditional website and a PWA are the use of an App Manifest and Service Worker. As a bonus, we’ll get to those later.
Many platforms such as Medium(!), Twitter, NASA, Washington Post, Forbes, Pinterest, The Weather Channel, and more leverage the use of PWAs — they maintain a low development cost while maintaining high visibility and reach.
PWAs vs Native Apps
Did you know that an average smart phone user uses about 87% Native Apps and 13% utilize a browser? I know, this doesn’t sound like it helps my case but — that 87% is spent on the same few apps.
Let’s take Twitter as an example: we can browse Twitter on our mobile browser, but since Twitter is also a PWA, our mobile browser prompts the user to install it to their home screen as well!
PWAs leverage many of the same features as a Native app:
- Push notifications
- Home Screen Icons
- Camera and location access
However, only some Native apps work offline, whereas with the help of a Service Worker, PWAs provide offline functionality as well!
Service Workers
So what is a Service Worker? Well, they’re a new type of web worker — a JavaScript file that runs separately from the main browser. It intercepts network requests, caches or retrieves resources from the cache, and delivers push messages.
PWAs are progressively enhanced by service workers and allow them to be run offline. Service workers also allow for the app to stay up to date with every new app update. PWAs are also very secure — you must be running the app using a TLS (HTTPS) connection or from the system’s localhost address (referring to the local device running the browser). This all allows for your web app to run just like a Native app!
There’s a catch though: they’re easy to write incorrectly. Also, if a user denies permission to something when they first visit the website, the worker will never ask again, and your PWA may not always work. However, if the user is navigating within the app, we can prompt them for permission again!
Web App Manifest
Now, the second requirement to run a PWA is the Web App Manifest. To put it very simply, it’s a single JSON file added to a webapp that specifies that our webpages are to be loaded via the browser, makes it installable — on our home screen or desktop just like a Native application. In a Single Page Web Application, you only need to add this to your single HTML file. It ensures that our manifest configuration is available on all pages.
The manifest file is the first point of entry for all user interactions. All of the metadata for our application is included in this file: the full and short name of the app, description, icons, preferred orientation for views, theme colors, etc.
This metadata allows for our apps to be discovered by search engines and give our app more visibility!
Conclusion
Hopefully, the idea of writing a Service Worker and App Manifest are less daunting! Again, some of the main reasons why you should be writing your app as a PWA are:
- You’ll only need to use a single technology. Think: JavaScript and its frameworks or libraries. JavaScript/TypeScript, HTML, CSS.
- Reduce development costs and deliver faster apps.
- PWAs are reliable, fast, and engaging
- PWAs provide the best user experience using a Service Worker
- Still gives the Native App Look and Feel
- Enhances security and transparent access to device capabilities
These reasons alone inspired me to write my first PWA as a social networking site for climbers. If I happened to convince you, please do share in the comments what you’ve created!
