Introducing PPResume PWA

Introduction

I am very pleased to announce that PPResume (opens in a new tab) is now a PWA (opens in a new tab).

This is the result of several weeks of hard work. From now on, you can install PPResume as a standalone app on your devices, with improved performance, lower network latency and bandwidth cost, and an excellent user experience under weak or even offline network conditions.

Let us take a quick look first:

PPResume PWA Install Prompt PPResume PWA macOS App Search PPResume PWA macOS App Switch PPResume PWA macOS Window PPResume PWA iOS

What is a PWA?

An iPod, a phone, an internet mobile communicator...these are NOT three separate devices! And we are calling it iPhone!

— Steve Jobs, MacWorld 2007

The birth of the iPhone (opens in a new tab) ushered in a new era of mobile computing. When the iPhone 1 was released in 2007, it has a 3.5-inch display, with a mobile version of Safari for surfing the web. And the web was the only way to deliver apps to the iPhone at that time. As you can see, most websites back then were designed for desktop devices—only a small portion of wap (opens in a new tab) websites were designed for mobiles—so you have to pinch your fingers to zoom in and out in order to browse the websites on mobile devices.

Birth of iPhone, MacWorld 2007

Needless to say, the iPhone is a revolutionary mobile device, it was so successful that mobile first design became a trend afterwards as more and more traffic comes from mobiles.

At Apple's WWDC in 2007 (opens in a new tab), Steve Jobs announced that the iPhone would "run applications created with Web 2.0 Internet standards". No SDK was required, and there was no App Store. All apps were simply websites designed for mobile devices and delivered via the Safari browser engine.

However, the web standards back then were too weak to provide a good and consistent user experience—HTML5 (opens in a new tab) was first released to the public in January 2008, and it took 6 years to gain W3C Recommendation status in October 2014! People were not happy with web apps, developers were frustrated and Apple had to change its strategy. In October 2007, Steve Jobs announced that an SDK would be launched the following year. In July 2008, Apple released iPhone OS 2.0 (opens in a new tab) for the iPhone, along with the App Store (opens in a new tab). From then on, the vast majority of iOS applications shifted to the App Store.

The App Store has proven to be a great success. It provides a central location where users can find, download and install apps. It also provides developers with a secure and reliable way to distribute their apps to users. The App Store ecosystem has been so successful that it has been adopted by other platforms such as Google Play, Windows Store and Amazon Appstore etc. It has nurtured a whole new mobile app ecosystem. The first thing most users do when they open their phone is to find a suitable app and open it, or install it from the App Store if it is not already installed—the App Store has become an essential part of the mobile experience.

The App Store ecosystem continues to thrive, but the web has not stopped evolving either. With the advent of HTML5 (opens in a new tab), ECMAScript 6.0 (opens in a new tab), Node.js (opens in a new tab) and many other powerful web API (opens in a new tab)s, the web has become more powerful and capable than ever before.

In 2010, Ethan Marcotte (opens in a new tab) published an article on A List Apart (opens in a new tab), in which he introduced the concept of Responsive Web Design (opens in a new tab). Responsive Web Design is a design approach that aims to create websites that can adapt and fit to the vast majority of devices, from desktop computers to mobiles. The core idea of responsive web design is the use of CSS media queries (opens in a new tab) to apply different styles based on the characteristics of the device, such as screen size, orientation, and resolution, etc.

Content is like water

In 2015, designer Frances Berriman (opens in a new tab) and her husband Alex Russell (opens in a new tab), a Google Chrome engineer, coined the term "Progressive Web Apps" in a blog post of Alex: Progressive Web Apps: Escaping Tabs Without Losing Our Soul (opens in a new tab).

Over dinner last night, Frances and I enumerated the attributes of this new class of applications:

  • Responsive: to fit any form factor
  • Connectivity independent: Progressively-enhanced with Service Workers to let them work offline
  • App-like-interactions: Adopt a Shell + Content application model to create appy navigations & interactions
  • Fresh: Transparently always up-to-date thanks to the Service Worker update process
  • Safe: Served via TLS (a Service Worker requirement) to prevent snooping
  • Discoverable: Are identifiable as "applications" thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them
  • Re-engageable: Can access the re-engagement UIs of the OS; e.g. Push Notifications
  • Installable: to the home screen through browser-provided prompts, allowing users to "keep" apps they find most useful without the hassle of an app store
  • Linkable: meaning they're zero-friction, zero-install, and easy to share. The social power of URLs matters.

— Alex Russell

From my perspective, a PWA is still web at its core, however, it aims to provide an app-like user experience through progressive enhancement to a website.

So here comes the question: Why PWA?

Why PWA

Since the invention of the web, there have been two major ways to deliver services to users:

From a user perspective, native apps usually offer a better user experience, the best performance and the ability to use all the features of your devices. However, users need to take the time to download and install the app.

On the other hand, web apps are accessible via a web browser without the need to download and install anything, and users always get the latest web apps automatically. However, the user experience is usually not as good as native apps, especially on mobile devices, and web apps can not take advantage of all the capabilities of your devices because they run in browsers and rely on browser implementations to connect to device-specific features.

From a developer's perspective, developing and maintaining native apps for multiple platforms is very costly, and the app store review process can be lengthy and risky, while for web apps, it only involves a single codebase that can run on multiple platforms, and it's super easy to release updates to web apps since there are no app stores in between the middle.

Last but not least, web apps are essentially open and free, they are based on open standards, they can be used on any device with a browser, and most importantly, there is no benevolent dictator (opens in a new tab) deciding which web apps may be delivered to the public according to some kinds of app store guidelines. Freedom is priceless, isn't it?

Given the list of pros and cons of native apps and web apps, why should you bother with PWA? In a word, PWA gives you the best of both worlds.

At its core, PWA is still a web app that can be accessed via any web browser; it is discoverable and can be indexed by search engines and gain free organic traffic; it is built on top of URL and linkable by default, meaning it is zero-friction, zero-install, and easy to share. With the progressive enhancement, it can get many features that are only available for native apps, such as:

Overall PWA is an "invest small earn big" effort to provide the web with an app-like experience by progressive enhancement. By progressive enhancement, it means that you don't have to do all the enhancements at once, instead, you can start with the basic features and progressively enhance it with more advanced features. First make your website responsive, then make it installable by creating a manifest file, then adopt service worker to make it work offline, then integrate other advanced features. Agility, fast iteration, that's the spirit of web development, and that's all you need to create a PWA.

Show Time

OK long story short, it is show time now.

Future Improvements

PPResume PWA is far from perfect, there is still a lot of room for improvement. Here is a list of features and bug fixes that I am still working on:

There are also lots of engineering details that are worth a deep dive, such as:

However I will save these topics for future blog posts, otherwise it would be too long to have a pleasant reading experience.

Stay tuned!

Comments here (opens in a new tab).