The document explains the evolution and advantages of Progressive Web Apps (PWAs) compared to traditional native mobile applications. It highlights that PWAs offer offline support, device hardware access, and a better user experience akin to native apps while being easier and less expensive to develop, deploy, and maintain. The document also notes notable success stories of companies benefiting from transitioning to PWAs, emphasizing their growing relevance in modern web development.

1. BUSINE$$ VALUES OF
Alan Semenov
Tech Lead at Enonic
@AlanSemenov

2. What is a Web App?
@AlanSemenov
Before we start talking about progressive web apps, let’s look at the definition of a web application in general. Here’s how Wikipedia defines it: “it’s a client-server
computer program which the client runs in a web browser”. So, by definition the web app is supposed to be contained inside a web browser which also implies that its
lifecycle depends on it being online.

3. Progressive Web App
@AlanSemenov
Progressive
So when we start talking about PROGRESSIVE web apps, that’s where the confusion starts. I found that the most difficult thing to explain when talking about the concept
is this “Progressive” word. Is it just a “cool” word? Is it just a sales pitch?

4. @AlanSemenov
No, the “progressiveness” of a web app means that the app will still interact with you even when the browser is closed. (click)
In fact, progressive web apps don’t even need a browser. They are self-contained and will use up the entire device screen just like native apps do. They will continue to
work when you’re offline, just like native apps do.
In a nutshell, PWA is a web app built to behave and engage the user just like native apps do.

5. Why would a
web app mimic
a native app?
@AlanSemenov
But why would a web app behave like a native app? Aren’t we told by Wikipedia and the rest of the world that web app can only run in a browser, which makes its usage
very limited on mobile devices?

6. State of the Web
2012
@AlanSemenov
To understand how and why the concept of PWA was born, we need to look at the progress of the web over the last decade. 7 years ago, having wasted god knows how
much money and resources building a web version of the Facebook app, this guy said the following…
And then he went on making native versions of the Facebook app. This was in year 2012.

7. State of the Web
Past:
• No offline support
• No access to device hardware
• Run only inside browser
• Not installable
• Not designed to run on a small device
• No user engagement
@AlanSemenov
Cannot blame him. State of the Web in 2012 was quite miserable…

8. State of the Web
Present:
• Offline support via Service Workers
• Access to most of the device hardware
• Don’t need a browser
• Can be installed on a device
• Responsive design
• User engagement via push notifications
@AlanSemenov
Read more at https://whatwebcando.today/
Let’s look at the present. Things are looking way much better now.

9. Mozilla, 2019
“Progressive Web Apps work everywhere
and provide several features that give them
the same user experience advantages as
native apps”
@AlanSemenov
This is a quote from Mozilla, developers of the Firefox browser and authors of web standards.
So, since now in 2019, Web development has more or less caught up with Mobile development in terms of feature support and user experience, we can now assume that
an average application can be built both as a progressive web application and as a native mobile app. But what are the costs for businesses? Do I, as a company owner
or IT director, have to spend time and resources building and maintaining both mobile app and web app?

10. Application Lifecycle
@AlanSemenov
BUILD DEPLOY SHARE UPDATE MAINTAIN
To answer this question, we need to look at the application lifecycle and analyse pros and cons of both technologies - native and web - on every stage.

11. Build
@AlanSemenov
Native App PWA
iOS Android
• Xcode
• Swift
• Objective C
• Java
• Kotlin
• C/C++
• Javascript
• HTML
• CSS
(at least 2 development teams)}$$$ $
}
Building a mobile app means building at least two versions of it, one for iOS and one for Android. These two platforms use totally different tech stack for mobile
development, so it means that you will most likely need two different teams to build the same app for both platforms. And these guys are usually expensive, so you can
imagine it won’t be cheap.
On the other hand, building a PWA in a nutshell means building a web site using Javascript, HTML and CSS which is something that any IT student knows nowadays.

12. Deploy
@AlanSemenov
Native App
Submitting a new mobile app to an app store or updating an existing one is also not an easy task. Here are diagrams showing stages of submitting process to Apple
Store and Google Play. It will take at least two days before your app is available in the store.

13. Discoverability
@AlanSemenov
Native App
More than half of smartphone users
don’t download any apps
on an average month
Let’s say your development teams finally build both iOS and Android versions of your mobile app and you went through all stages of verification to get them out in the
app stores.
After that you will face an issue of your app not being discoverable. You cannot share it simply enough, can’t get users to easily find it among thousands of other apps.
(click)Latest statistics show that more than half of users don’t download any apps on an average month.

14. Discoverability
@AlanSemenov
More than 75% of the downloaded
apps are opened only once
Native App
The percentage of people who return to an app after installing it, shown in days.
And if they do, there’s a very high chance that user will open the app once and forget about it.

15. Discoverability
@AlanSemenov
Native App
…and 60% of them were NEVER installed
There are 2,3 mln. apps in the App Store…
Here’s more mind-blowing statistics for you…

16. So why spend money and resources
building an app that no one will use?
@AlanSemenov
So the question is simply this… why waste time and money first building, then promoting an app that no one might ever use?
If you as a developer or owner of the app, want your app to be discovered, your chances are very slim without heavy promotion.

17. PWA
@AlanSemenov
Easy to:
• Deploy
• Update
• Share
• Discover
Progressive Web Apps are easy to deploy and update - developer simply uploads new version to the server, without having to go through registration, verification and
signing steps. They can be easily shared with other users - you simply send a link to the app’s main page. And discovering a PWA cannot be easier - they are indexed by
search engines just like regular web sites are. Users don’t need to open the app store to log in and download your app. They open a web page and the app is already on
their device.

18. Let’s sum it up
@AlanSemenov

19. Features
@AlanSemenov
Native App PWA
Offline support
Access to hardware
Installable
App-like UX
User Engagement
Safe
require HTTPS
When it comes to features or technical aspects of implementation, web applications have more or less caught up with native implementation.

20. Business aspects
@AlanSemenov
Native App PWA
Build
Maintenance
Deployment
Promotion
Install updates
$$$ $
Hard Easy
$$$ Easy
$$$ $
App Store Always fresh
Let’s look at business aspects.

21. @AlanSemenov
But I guess you are expecting to hear some success stories about business implementing progressive web apps.

22. @AlanSemenov
Read more at https://www.pwastats.com/
Tinder almost tripled the load time and decreased size by 90% upon switching to PWA.
Pinterest rebuilt their app as PWA and increased ad revenue by 40%.
Twitter Lite - which is a PWA version of their app - gained overall increase in pages per session, tweets and bounce rate.
Finally, two e-commerce behemoths Alibaba and AliExpress improved conversion rate by from 76% to 104%, and increased number of active users.

23. @AlanSemenov
And if you are still not convinced, here’s this last year’s news for you. Facebook is testing a Progressive Web App for its mobile website. 7 years ago Mark Zuckerberg
regretted betting on HTML for building the Facebook app and now he’s betting on it again. What better proof do you need?

24. Questions?
@AlanSemenov

25. ase@enonic.com
@AlanSemenov
Alan Semenov
Tech Lead at Enonic
This presentation:
http://bit.ly/uxdx-pwa