JONATHAN CHEN: Hi,
I'm Jonathan Chen.
DEMIAN RENZULI: And
I am Demian Renzuli.
JONATHAN CHEN: We
will talk about how
you can make the most
of progressive web apps
in native environments
with real world examples.
When we talk about
mobile developments,
we usually think of
multiple platforms
like progressive web apps,
native apps on Android and iOS.
These platforms rely on
different technologies
like JavaScript, Java,
Objective C, or Swift.
That means you may need
three different teams
to create cross
platform features, which
could be very expensive.
But from the user's
perspective, these platforms
may each run
similar applications
that address similar use cases.
There are many ways to reduce
these duplicate department
efforts.
We are going to show
you how you can better
blend your progressive web
apps into native environments.
Currently, the most popular way
of embedding existing web flows
is to use WebView for
Android and iOS apps.
If you are already using
full screen WebView
to embed your Webflows
in your Android app,
we recommend using Trusted
Web Activities which
runs a full browser
inside your native app,
instead of the rendering
engine like in WebView.
If you already have a
good progressive web app,
you can bring the same user
experience to Android users
with Trusted Web Activities
instead of using a full Android
app.
Let's see how these
solutions work.
Imagine that you view the
web application with home,
category, and product pages.
It's a great experience
for web users,
but that's not enough
to cover other users.
So you hire the team to build an
iOS app with identical features
to the web and another
team to view the Android
app for the Play Store.
At the end, there
are three teams
that work with quite
different tech stacks.
What if we made some
changes to the web?
For example, a new feature
on the product page.
To maintain the consistency
across the platforms,
the other two teams
need to implement
similar functionalities.
There is now an increased
maintenance cost.
So what can we do?
Since the product page would
have similar functionalities
and layout in the
platforms, you may
consider using WebView as
a contender in the Android
and iOS apps to embed
existing web content,
just like a mini
browser inside the app.
In addition to
reusable web content,
there are other advantages
of using WebView.
It is easy to keep
the web content up
to date without going through
the app deployment process.
You may also make some native
controls with web content.
For example, you can embed a
product page inside the app
while keeping the native
controls like navigation bar.
However, you might
need some extra effort
to take a part of web content
out from your existing WebView
out.
If you would like to embed
entire web functionalities,
including the header,
footer, menu from the web
into the apps, you may consider
using the full screen WebView
to wrap the entire application
inside the native app shell.
In fact, this is a
common approach used
by many Cordova beta solutions.
WebView based apps may
look like native apps,
but certainly there
are some caveats.
Since a WebView is
just rendering engine,
a user may have a
different experience
than in the full
browser, such as Chrome.
For example, push notification
in the payment APIs
are not supported.
Form autofills is isolated
from the regular browsers.
Most importantly, cookies are
not shareable between WebView
and browsers.
Hence, you may need a workaround
for user authentication,
like passing tokens between
the WebView and the app.
Using the full screen WebView
has been a popular way
to embed web content inside
the app, but with limitations.
Next, Damien will
walk us through how
we can use the power of the web
without losing its capabilities
in native environments.
DEMIAN RENZULI: If
you want to have
all the advantages of the
web without the limitations
of WebView, you should consider
using Trusted Web Activities.
TWA is not just a rendering
engine like a WebView.
It's the full browser
running in full screen mode.
For that reason, it's feature
complete and evergreen.
This means that it's
always up to date,
and it will give you access
to the latest web APIs.
Another important aspect is
that unlike WebView, the TWA
can share storage and cookies
with the main browser.
At the moment, the main
limitation of a TWA
is that you can't mix web
content with native controls
on the same screen.
For example, having a native
toolbar at the bottom of a TWA,
it's not possible.
In cases like this,
what you can do
is recreate these native
controls with web technology
to provide a full web
experience in TWA screens.
Regarding browser
support-- at this moment,
TWAs are fully available in
Chrome and in beta in Firefox.
Other browser vendors
have started working on it
and will provide support
for Trusted Web Activities
very soon.
Here is the flow for a common
use case for Trusted Web
Activities.
In this case, users can
navigate from an Android screen
to a TWA, and also from the
TWA to another Android screen.
All this happens without
taking users away
from the context
of the application.
Going one step farther,
TWA is not only
useful for certain screens
and flows inside your app.
If you have a
progressive web app that
is fast, reliable, and actually
looks and feel like an app,
you can use Trusted Web
Activities to launch your PWA
from the other launcher.
In this case, users can
arrive at the full screen PWA
by clicking on a
home screen icon.
As a result, they
would have the feeling
that they are opening a
native application instead
of a website.
A good example of usage
of this TWA use case
is Terra, one of the biggest
media companies from Brazil.
Terra stopped maintaining their
native Android app in 2019.
After a while, they
decided to replace it
with their progressive web app
through Trusted Web Activities.
This way, they could deliver
the same great experience
to web and Android
users with a single code
base, while reducing
the app size by 70%.
As a result, users reacted
very positively to the new UX.
The ratings in the
store went up 25%.
And that's not the only case.
We already see many companies
using TWA with great success
across all the regions.
Oyo, QuintoAndar, Tinder,
NBT, and Rakuten Pasha
are only a few examples of
companies actively using
Trusted Web Activities
around the world.
So wrapping up, we have
seen different ways
in which you can make
the most of your web
and PWA investment in
native environments.
Here are some
recommended approaches.
The most common approach is
having a good progressive web
app for users
coming from the web,
and also native Android and
iOS apps for those searching
for your app in the stores.
You can also reuse
parts of your website,
like different flows
inside your app.
This approach is commonly
achieved by using WebViews.
But remember, WebView is
not a full browser, just
a rendering engine.
And this has some limitations.
So if you're using
full screen WebViews,
the recommended approach is
to use Trusted Web Activities.
TWAs give you access to all the
features, latest APIs, and also
share storage and cookies
with the main browser.
Finally if you have a very
good progressive web app
and would like to bring the same
experience to your Android app
users, you can use
Trusted Web Activities
to launch your PWA
in full screen mode
from the Android launcher.
Now you have a picture
of how to blend your PWAs
into a native environment.
JONATHAN CHEN: Please also check
out the Main Stage sessions,
PWA and the installable web by
PJ McLachlan and Sam Thorogood.
Also, Bridging the native
app gap by SimTread.
Thank you for watching.
[MUSIC PLAYING]
