If you're in your thirties, like me, or older, you know that mobile phones have not always been so ubiquitous.
In this article, we are going to cover the history of the mobile phone, and more specifically "Web Development", by focusing on the rise and benefits of PWAs.
The article is going to be divided in the following sections:
- History of the Mobile Phone
- The evolution of Mobile Web Development
- The Rise of PWA (Progressive Web App)
History of the Smart Phone
It is hard to remember a time when we all lived without smart phones in our pockets. How about when mobile phones could not be called "smart" since they had a single purpose: to make calls?
Let's travel in time, and cover the main milestones that shaped our beloved handsets.
March 1991
Even if it feels like ancient history, the story of mobile phones starts just shy of the millenium's turn. Phones started to become everyday accessories in the last decade of the 20th Century, with the first ever phone call on GSM network being made on March 1991.
1996
During their first few years of existence, phones rapidly advanced. In 1996, Nokia released the first phone with access to the "mobile web".
1998
1998 did not have any specific technological breakthroughs, but in my opinion, it marks the creation of a new industry: premium downloadable content.
You may be curiuous to know which app was the first to be downloaded, but here, we are not talking about any app, as the phones did not even have web browsers yet. The first content to be sold were ringtones.
This is one of the most succesful (and annoying) ringtone of the early 2000s "crazy frog":
{% youtube awAKzaGrrbY %}
1999
Right before the end of the decade, phones reached another very important milesone. In this year, the first version of a mobile specific web browser was created, and our handsets were connected to the World Wide Web.
2000-2007
If I would have to list all the great phones and enhancements of these few years, this blogpost would become a book.
Phones started to get much smarter. There were multiple improvements, from the size of the devices, to the signal coverage, all the way up to improved services, such as colored screens and cameras.
All of the above made consumers interested in the products, and more and more people started to use them. Making it a very profitable market to invest in.
2007
The fast growth of this market made Apple decide to move into this growing sector. In the year 2007 Steve Jobs release the company's first mobile device: the Iphone.
The Iphone was the first mobile interface to be completely touch-based. This was a big evolution, not only in terms of user experience, but also on the web development side.
2007+
Following the Iphone, all major companies of the time, such as Blackberry, and Nokia, started to emulate the success of Apple, and consumers were inundated with different devices every year.
By the end of this decade, Mobile Phones were common devices for adults and teenagers, and have since developed and improved to what we have today.
The evolution of Mobile Web Development
Now that we have covered the actual evolution of our beloved handsets in terms of hardware, it is time to go back in time again to analyze the evolution of "mobile web development".
As shown from the above section, the "web" made its first apprearance on Mobile phones in 1999.
WML - 1999
I never had a chance to develop a mobile site in the late 90s. If I had, I would have had to use WML (Wireless Markup Language). This language (now obsolete), started to provide powerful features (link, forms, image, etc..), and was based on XML.
Mobile development was specific, as this language was specific to devices that implemented the WAP (Wireless Application Protocol). The use of these sites on desktop was limited, or required the use of browser extensions.
cHTML / iHTML - 1999
The browser capabilities on mobile phones developed quite quickly. Devices started to have access to subsets of HTML (cHTML and iHTML). This allowed developers to be able to create one asset (HTML) and serve a multitude of users, both on mobile and desktop.
M.dot
Mobile phone resolution was quite low, and phones in this period did not have touchscreens, making it difficult to surf the wed.
To help in this matter, the industry respondend by utilizing what was called M.Dot methodology. This allowed a website to have two different entities, on two separate Urls. For example, if your site was myShop.com, when accessed from a mobile phone, you would have redirected users to m.myShop.com.
Having different websites, allowed the developer to "eliminate" surplus content, and create a design that was more suited for the hardware of the time. This "duplication" came, of course, with a big development cost price tag.
Native - 2008
The App store, and the Google Play store, were release in 2008. These events marked the beginning of a completely new industry.
Internet speed on phones was very slow, and the price of data usage was still quite high. This enabled many companies to specialize in Native App development. These apps provided a quick and smooth experience to users, but with a great cost factor in terms of development and specialization.
The distinct programming languages, and methodology needed to create Native Apps, was so wide across different devices, that many companies decided to specialize in a specific platform (Android, Apple or Windows).
Native applications had the possibility to "connect" with the device, in unique ways, by having access to a huge set of APIs (eg. Push notification, background sync, use device space, etc..)
Responsive Web design - 2008
But with the rise of Native App, another methodology started to gain traction: Responsive Web Design.
This approach allowed the same website to render well on a variety of devices. Using this approach made the use of M.Dot methodology obsolete, and helped many companies save thousands of dollars in Native development.
Unfortunately, "web apps" built this way would just be simple websites, and would require the user to access the internet, and specifically access the site URL.
Hybrid App development - 2010
Responsive web design never managed to fully respond to customer requests. This was most likely due to the look and feel of the app being somehow different from a Native app. As phones developed, the gap between Native and Web Based widened, as the latter was not able to use many of the in-built features.
In 2010, PhoneGap was revealed (currently known as Apache Cordova). This sofware enabled the development of applications using known web skills (html, css, javascript) to build Native Applications.
More software followed this trend, enabling companies to start in-house development of Native Apps, without the need to incur high costs.
PWA - NOW
The last decade has been a roller coaster, as companies were torn among the use of Native app, Hybrid solutions, and responsive designs.
In recent years, a new contender, or more precisely described as an upgrade of the Web App, entered the ring. This is known as the Progressive Web App (PWA).
The primary intent of PWAs is to reduce the gap between web development and Native apps, by enchancing the user experience.
In the next section, we are going to cover why the industry is responsing so positively to PWAs, and provide you useful insight to help you get up to speed with this methodology.
The Rise of PWA (Progressive Web App)
As you may have probably noticed from the way I speak about PWAs, I am personally really excited about this methodology, and in this section, we are going to explain the reason behind my interest in this technology.
Feels like "home"
First and foremost, the main advantage of PWAs is the ability for our websites/web application to be downloaded as real applications.
When a website is fully setup as a PWA, mobile users are prompted with a "install now" action. Doing this will allow specific content (manually set as part of the PWA setting) to be downloaded directly on the phone, by allowing extremely quick load times and more.
Furthermore, installing a PWA will also add it directly to the main mobile interface (homescreen), making it feel like a Native App.
Be connected
If you own a business, you are fully aware that connecting with the customer is essential. Therefore, if your customers are using your services online, being able to interact, and catch their attention, is vital.
One of the main benefits of Native and Hybrid apps, as previously mentioned, was the ability to access the multitude of APIs offered by our handset.
Thanks to PWAs, and more specifically to the use of a service worker, we will be able to make use of this powerful feature.
Two of the most important features available on Web applications are:
- Sync notification: Ability to sync your data, even if the app is not running. This is essential to provide quick content to your user.
- Push notification: Ability to provide an alert to the customer, even if the app is not running ( eg. New notification in a specific app, or a reminder to use the app)
It is true that the list of avaialble APIs is still small compared to that of Native implementation, but the community is working extremely hard to reduce this gap.
Write for Web, serve on mobile
When we previously covered RWD, we highlighted one ot its biggest advantages: being able to develop one single interface to serve a multitude of devices.
PWAs offer the same advantages, with the added feature of providing the ability to display fullscreen like a "real app".
This feature (part of the display setting of PWA) allows your app to take the full screen. This not only increases the space available to your app, but it also enhances the User Experience, by making sure the customer is not distracted by the "url" bar, by providing a "native look and feel".
Additionally, we should highlight that the front end industry has seen a big rise in the use of frameworks, such as Vue, React, and Angular.
The development of applications with "component based" architectures has supported the rise of theUI component library which is:
A cloud-based folder that consists of all the designed/styled parts of a website or piece of software. It helps designers to work in a consistent way and becomes very time efficient when executed correctly.
The use of these libraries (most available for free), have supported the development of nice looking applications across multiple devices, without the need to develop all individual elements from scratch.
Ready for shopping
In recent months, the Google Play Store has supported PWAs as shown by this article.
This service, though still in its early stages of implementation, provides a reassuring signal for the future of PWAs.
You may be thinking, what about the Apple Store? Unfortuantely, Apple has not disclosed any information about PWA adoptation, but recent signals, highlighted in this medium article, show Apple's support of PWA development.
At a fraction of the cost
Unfortuantely, when it comes to business, cost is usually the most important factor.
To further emphasise the above point, where we shared the introduction and use of "component based" architecture for speed, we also need to talk about development cost.
There are three main aspects of PWAs that help reduce cost:
- Existing skills
- Development speed
- Re-usability
Existing skills
Apart from some tinkering, and the introduction of the service worker, PWAs are just simple websites. They would allow a multitude of in-house development teams to be able to carry out development and/or support mobile apps, reducing the need to pay third party companies.
Development speed
As already mentioned above, component based achitectures, and the multitude of available community based components, have provided frontend developers the ability to quickly build performant PWAs in record time.
Re-usability
Many companies fail to quantify the financial savings produced by being able to re-use existing features. In a recent project I was involved with, we were able to transition from a Native App (supported by a third party company), to a fully in-house build PWA in record time, all thanks to the reusability of their Vue domponents!
Versioning
I have read many different articles that introduced PWAw, but I have personally learned this last point though experience.
Until now, you would have never associated the word "versioning" with a website, but thanks to PWAs, this ability is also possible for web based applications.
The main reason behind the need for versioning is purely technical, but its existence within PWAs is surely favorable to the many "Native" developers wanting to swap.
Conclusion
The war for Mobile Application domination is still on, but I personally believe that PWAs will hold a big share of the market within the next few years.
Most of the advantages that support Native and Hybrid development, such as APIs, Native-look and feel, and the ability to publish within the big stores, are slowly being added to Web App.
Even if Native applications are not going anytime soon, as there are many use cases that require its full control of the handset API,I believe that in the next few years, PWAs will become the standard choice for most in the mobile industry.
