Progressive Web Apps - the Return of the Web?

Chris Heilmann

Recorded at GOTO 2016


Get notified about Chris Heilmann

Sign up to a email when Chris Heilmann publishes a new video

take it away well one thing you can
never say is that's kinda Navion
conferences introduce you with too much
detail so we got a guy here and he's
talking now and you're like okay fair
enough like okay it's been long two days
you probably your brains are slightly
overloaded in mine as well so I I wanna
I wanted to write a talk for you to
think to make you think a bit about
what's going on with the web right now
and what's going on with web
technologies right now I'm not gonna go
into a lot of like life code or code
examples because I always find that more
frustrating than anything else when
you're sitting in the audience not on
your computer and you're not coding
along and everybody's like let's go to
the command line and show you how
awesome I am and you just go home and
you're like what did I just do it just
had no idea of repeating what's going on
here so that's what workshops are for
but I want to talk about especially
about what progressive web apps are and
what kind of good opportunity and great
opportunity they present right now in
all of our ideas that we want to do here
also while I'm doing that there's going
to be a copious amount of copyright
infringement in the Star Wars universe
so yeah that's that I'm Chris Hyman I'm
caught poet on Twitter and I've been a
web developer for 18 19 years now and I
started with with a little laptop and
dos edits and and the download of the
HTML 2o spec or something and then I
started typing things in and opened up
in Netscape 3 and and was excited that I
can make things aligned to left and
right these kind of things and sometimes
not most of the time not it was crud
good for me to it he out of a sudden
realized like there's something new I
used to do games on commodore 64 amiga
playstation 1 and all these kind of like
platforms that were always closed and
like sooner or later had to buy an sdk
or you had to get to a company and get
allowance to do to do something or you
had to crack the thing and they're
basically do something else and with the
web i realized like oh my god
this is cool before I went into AI team
I I was a radio journalist so I did news
casting in the mornings and I realized
when the web came out when I founded in
1996 I'm like this is amazing
I can be worldwide distributing and
writing and reading other people's stuff
and remix in other people's stuff
without having to spend money where it's
like in radio or television you had
every second has to be paid for and
radio only reaches a certain amount of
kilometer so you never know who's gonna
listen to it only the people in your
area so if you want to go nationwide you
have to do something really cool and if
you want to go one nationwide television
and with the web was much much easier
support this so I basically got god had
to go to hospital for a slight operation
took a laptop with me and taught myself
HTML there and started my career in the
web as it is right now and I realized
that the web is the most progressive
media out there all of a sudden it broke
the whole concept of like hey you're
sitting in front of a TV and you look at
what we give you and if it's 50 ads
tough luck you probably want to go watch
the video again I've watched the TV
again afterwards whereas with the web it
was a read and write medium it was a
bring your own content bring your own
ideas bring your own creativity kind of
medium and I was like this is
groundbreaking and I want to be part of
this and I was and I'm happy that I then
went to Yahoo and I went to Mozilla and
I did like McDonald's website visit
Britain comm 170,000 pages in 72
languages and all these fun things that
basically I should be really great but
I'm luckily I wasn't because I'm a
redhead the web is for everyone and it's
it's basically you have no right to tell
an end-user that they need to download a
certain browser or that they have to
have a faster phone or a better
connection to to access your things
people come to you and they are your
audience they are the people who bring
you money we are here as a
transportation system from knowledge to
people and people's knowledge back to
the systems we are here to empower
our people to make them creative on the
web and to allow them to let their voice
heard for us it's like yeah boring man
whatever
blockers are just Netflix I just want to
do the web anymore for some people it's
the only way out of their country it's
political statements that are not
colored by their come by their by their
country they're not censored by the
people in the government they can
actually go through the web or go
through hoops to go in the web and learn
about the world I live in England and
with brexit that may happen as well so I
don't know yet but what I find for
example very interesting is that people
in countries and in universities where
certain websites are for example blocked
they use Google Translate to translate
the site from English to English to get
around that issue because the Google
Translate server is in California so it
looks like it's an American website
going to that that other website so it's
they're breaking the web order they're
getting to content on the web and
breaking the stupidity of like
geofencing that way it was really really
nice now this was at the Olympics in
London where where Tim berners-lee Timbo
entered this is for everybody and
explained everyone that that the web
that he invented is for everyone he
typed that into Twitter which was kind
of bizarre seeing that that's a closed
system that is could be shut down
anytime but let's not dwell on that too
much but it was a nice picture now the
web itself had a lot of good features a
lot of really really powerful features
that we keep forgetting and when we try
to actually access it from a computer
science point of view or from a from or
like from that groats graphics kind of
view to me it's a medium its distributed
like what you put on the web will
survive and will go somewhere and people
can download it and people can print it
out and and paint with like crayons on
it or whatever you cannot protect your
stuff if you want to have it distributed
as well that was great when you had like
in 1998 I'd like photographers like how
can I put my web my stuff on the web and
people not downloaded well put it on the
memory stick leave in your desk and it's
the only way you can do that because as
soon as it's on a screen I can take a
picture of the screen if I wanted to I
could take the picture take the monitor
and put them on a photocopier
you know I could do whatever it's like
there's so many ways to actually get
your data there but you want it
distributed I have so many old websites
that basically are not online anymore or
the company's changed completely
and I got to Wayback Machine of
archive.org and I can see the website
that I built in 1997 and then I look at
the source code and I get drunk and I
and I wonder what I've been doing but we
had to jump through stupid who expect
them to do things it's independent of
hardware software and ability you cannot
expect your end-users to be able to see
you cannot expect your end-users to
understand language in in all its
nuances you know like trying sarcasm
online good luck you know it's not that
easy using puns in your navigation pop
references of influences of your country
not a good idea think about to reach as
many people as possible I worked with a
company in England an insurance company
that changed their inter login form from
very complex English to very simple
English and from seven steps to three
steps and they doubled their users in
that month just by making it easier for
people to access their things and it's
based on open documented and agreed
protocols and technologies HTTP tcp/ip
HTML asks the structure of your
documents and then later on others and
this is important they're open
documented and agreed on this gives you
a base to start from this is not like
let's make it happen and hope it doesn't
break so the web with these standards
had a reliability to it there is no
adapters there's a resilience and
there's a sturdiness in the web itself
that we should still benefit from and we
shouldn't break it just because of
convenience for us as developers there's
a trustworthiness as well like the
amount of people that go dead that quote
Wikipedia and on other pages on
like ok this is cool this is online I
prove it it has been archived it will be
there for the future and it's a home
base to explore from we can take these
technologies and build upon them with
better technologies faster cooler
technologies more modern amic
really nice
that's what the web came in and the web
to me as I said is a medium and it's
it's not only connected documents it's
connected images it's connected videos
it's connected flash games even they
were taking we're made accessible at one
time but we forgot about it as well so
the web is non intrusive or aggressive
it's there when you need it you go you
type that URL in you go to the website
look at kittens in uniforms or whatever
and happily go somewhere else when you
need it you can have it it's not telling
you like hey by the way please go to the
App Store download this thing install
that one oh you need a credit card I
know I'm free but you still need a
credit card to enter this thing and it
doesn't make you to jump through hoops
to get to content it's just there it
doesn't it's not in your face it doesn't
tell you every two seconds please
download a new version of me please do
something different with me it's built
for human interaction and as a read and
write medium HTTP has like get of course
posts of course but it also has put and
we don't use it for much we actually
write other things to do uploads HTTP
put is a really cool thing to do is well
we have delete as well an HTTP which is
not used much and we have like all kind
of like finger protocols and these kind
professionals and enthusiasts alike when
I started as a web developer you know
you had all these proper developers you
know Java people with beards like that
and like trousers up to here and coming
up to you and like oh well you don't
even know the stack and you didn't even
define your variables you know the coder
you're just a random person the web will
never touch you'll never be good and it
will never be a thing and it became a
thing because it's open to enthusiasts
and to other people we can make fun of
things like Geocities but it enabled
millions of people to put a little
website out there and have something on
the web have their voice on the web have
their their family on the web have their
enthusiasm for something on the web
there's no Naughton there's nothing you
can't find on the web you know like the
other day I was looking at I was so good
at goldeneye that James Bond movie and I
was like what is that cool train you
know that Russia
Russian train there was like none that
okay cool the web should know about this
and I found it's like intrinsic model of
it how it was done or somebody built the
model of that train and then also from
which train was made where it was shot
average track it was one done in England
and it was just every detail I'm like
nobody pays you for that but it's cool
to see these kind of things and these
enthusiasts the link is what makes the
web the link is I click on something I
go somewhere else or I click on
something I load the data from the thing
from somewhere else and stay in the same
page that's what we call Ajax before
that I really use iframes we use all
kind of things to stay on the same
document to not have a reload and it's
like the force in in in Star Wars it's
basically it is the thing that makes the
web don't break the link the link is the
distribution model and the access to
content out there and it's genius in its
simplicity it's very easy to do and it
was so scary for people to not
understand that like you're not the most
important thing on the web you're part
of the web so whenever your clients like
yeah well we want to link to others but
we don't want them to leave the page
what do we do you like don't link to
others it's like you know it's like if
they go to the other side and have a
good experience there they have you in
the back of their head that it was your
site to send them there it's it you're
part of a community you're part of a
distributed model you're not part of
like and I take all these people and
keep them there that's why we had
pop-ups that's why we have like frames
and all these kind of things was
horrible and they still are I'm sad
enough we still have pop-ups from time
to time the web will always be there
because it's resilience its simplicity
is really impossible to break ok there
worldwide that have access to the main
notes of the web servers so they could
shut it down if they all became crazy in
one moment or something but it's really
a distributed model with lots of caching
does will be there the problem is we
build terrible things at the beginning
cause browsers were we basically
had to do like table layouts and frame
sets and pop-ups that talk to each other
and what we built for people was not fun
it was just a Word documents with a bit
of forms
and every time you click the reload it
took ages and you hope everything worked
out
bad validation bad like no no immediate
validation of a of a form field it was
fun men men when yesterday when Scott
Hanselman was talking about form
validation that JavaScript was needed
for that nowadays we just put required
on an input element in HTML and a
browser if it's empty will not send off
the form
you don't need JavaScript for that we
put that in the new in the new standards
so when we realize that we build
terrible things because we had to jump
through hoops to make every browser
happy cuz I'm Netscape 4 was different
to opera 3 was different to Internet
Explorer 4 was different to whatever
other browser was out there at that
moment we realized we needed standards
and that's where the web standards
movement started that's where we have
the html5 spec at the HTML specification
we have to see his a spec later on we
have all these these standards that we
build and standard development was never
about limiting you and your developer as
a developer it was about making your job
easier it made your code predictable
that it will work in the next version
and in the old version as well and
nobody can stop people from using IE 5
to go online they should get something
they should get nothing beautiful they
should get something that works which is
HTML but a bit of CSS the rest
don't bother taking beautiful interfaces
and giving it to internet explorer 5 6
users they're not used to that you just
confused them you know nothing fancy but
standards-based development will never
bite you in the lower backside in the
future because you based it on something
that is so resilient and so fixed that
it works and of course when you do
something like that then we become
arrogant and we become like that there
was fighting of like the web standards
people you people who don't follow web
stone that shouldn't be on the web
you're all you may be you're terrible
people and it's like please go away and
the others like well I don't really care
about your standards and it's it's never
an absolute standards are there to make
our life easier it's pretty cool to be
able to have a screwdriver and no I can
do a screw and open it and not like okay
this screw has like five prongs this has
two prongs we please buy 600 different
screwdrivers
web standards are dare to make our job
easier and not to hit people over the
head with them and tell them like
they're doing it wrong if they're not
following them completely because only
assist is an absolute which is an
absolute statement but let's not
question the scriptwriting of of George
Lucas cause he obviously knows what to
do
rabbits stopping in poop and web
developers became too sure of themselves
and basically said like you know what
that Flash thing that's gonna die
you know like other things we're going
to live forever just following this HTML
and CSS thing and we make just the
websites prettier and put like good
images in there and there was that and
then of course some developers started
break off the group and said you know
what we have JavaScript and JavaScript
allows me to do really cool stuff I'm
giving a talk tomorrow at Microsoft here
to meet up about how Travis cream is not
evil so it's got to be interesting as
well and they started doing everything
with JavaScript because then it gives
you control over every little thing you
don't have any difference between
browsers anymore if you built the
interface with JavaScript and you resize
it pixel perfect and these kind of
things and people started doing that and
JavaScript became just like tool to do
everything with because you can do
you can generate CSS you can generate
HTML and of course you can write
JavaScript with JavaScript and make
everything interact with each other and
the cool thing for you as a developer is
like you're in control you have like a
debugging environment well back then it
was a lot basically and always fun when
you did in a loop and you're sitting
there with your enter button 600 times
but you know what happened where it's
like with HTML CSS you always have to
trust the browser to do it right and you
don't even have a call stack when
something went wrong and then you see
things like that where it's an aah riff
with a hash which is nothing hash
normally points to a target in the page
if you use it like that great if you use
it like this you have not understood the
web and you have not understood what a
link is because a link that goes nowhere
and trust fires of a JavaScript should
be a button
this is what the button element was
invented for instead of making broken
links that don't point anywhere if we
really have functionality that only
should be the available JavaScript we
it as a link do it as a league put a
click handler on that override it don't
follow it load it with Ajax or whatever
you want to do in the background with
your router's and whatever then of
course you got people who are just
utterly evil that use javascript:void 0
this shows you have no idea what you're
doing you just copied and pasted it from
somewhere it's like s developers we're
lazy I'm okay I'm lazy I like to type
less and I typed I like to type things
that make sense how can you write
JavaScript code on void 0 and knowing
you just wrote a lot of code that does
nothing why would you do this to
yourself and to your end-users a link
that's not a link I cannot right-click I
cannot download I cannot follow
I cannot bookmark these this is terrible
don't do that javascript is not fault
tolerant CSS and HTML are both fault
wrong the browser tries to fix it for
you you don't close your P tag the
browser closes the P tag for you you try
to put a span inside a div inside a span
so a block level element inside an
inline element it moves to dip out side
the span and renders them one after the
other CSS if a line is not understood by
the browser the browser goes and goes to
a next line maybe something cool there
I'm gonna I'm gonna keep rendering there
you know one line of JavaScript error oh
my god God has forsaken us we're all
dying it's like I'm not playing with you
anymore
and the JavaScript parser goes in the
corner and starts scowling at you and
not talking to you anymore which is just
the way JavaScript is built is a
just-in-time compilation language you
cannot have something that just randomly
insert stuff for you it's not a good
idea
but it's always important to understand
this that as soon as you make your stuff
dependent on JavaScript it's up to you
to make it defensive it's up to you to
make it safe and there's no I'm going to
talk about more about that tomorrow that
the Kay said that Scott talked about as
well with JavaScript turned off
it's a strawman javascript turned off
does not exist it's only people who want
to hate themselves and to want to break
things it's like the people who turn off
JavaScript on your web sites or spam
bots other people have JavaScript
enabled because it is a great thing for
the web we can do goo to great things
with it but we have to remember that
every download of the web can break if
you have one javascript relying on
another javascript relying on another
transcript without testing that they
have been loaded you will have a bad
time you will have problems with that
other than that like try to turn off
javascript in modern browsers we made it
really hard for you so nobody can tell
me oh I accidentally turned off
JavaScript you know or accidentally just
broke it to your house sell them strange
and a lot can go wrong on the way and
that's where if statements come in it's
as simple as that if this thing is
available use it if the river is deep
enough jump into it don't jump into it
and hope it's not a good idea we might
never be aware that there's an issue
because our in our environment is not
the inner end users environment they
have javascript errors that we don't
when people like why isn't why aren't
aren't all browsers on our platforms and
I'm like well if you have a chrome error
on Windows debugging it with Chrome on a
Mac is probably a stupid idea because
you will not run into the same issue its
OS and browser normally that causes
issues together so with JavaScript we
build a lot of stuff and we made things
much more complex but it's it we realize
that people need to use JavaScript you
got to do something about it so we
started to actually think about what can
be built large with JavaScript how can
we scale JavaScript and how can we make
JavaScript more reliable the way we
actually made the others reliable and we
call it an unobtrusive javascript I
wrote a self training course in 2002 or
something about this and later on we
called it Dom scripting that's when I
wrote my book in 2006 about it it's
basically like don't rely on random
stuff test before you do if you have
HTML and CSS that is dependent on
JavaScript write it with JavaScript
don't put it in the page and make it be
an empty
but that doesn't do anything and then we
started to stand javascript is
standardized as well and we're like okay
we had the Dom of Internet Explorer and
layer struck him at all and we had to
always do like if document layers this
if document all that or bad people did
like if navigator index of so-and-so is
browser never ever do that browsers are
liars they don't use it the user agent
is a pack of lies it does no information
in there for you that is useful because
I can turn any browser into any other
browser in the user agent my favorites
when we got Firefox 10 out and people
all got the car that gave us to CSS and
JavaScript files one because they only
tested for one digit in the browser name
these kind of things browser sniffing is
the root of all evil
think about just to what sniffing is
dirty don't do that but we standardized
on best practices in JavaScript and said
like you know what here is how to write
JavaScript the right way and here's how
to to have two Dom one specification at
Dom the Dom two specification document
get element by the document get elements
by tag name we have all these cool
features then you can now interact with
a document without having to resort a
document right and stuff like that of
course when you do that and you make it
a an absolute again then people like you
know what solid it you old people of the
web wanting to fix things for all
browsers I don't care
I used a query you know the Ajax
libraries jQuery prototype boot rules
mochi kid I used to write for Ajax II
and we had like 517 in one time and
they're all made our lives easier right
less achieve more which is a nice thing
but there's a lot of magic going on and
especially when error handling is is
silent and I don't know what happened
that's bad that to me is not a safe
thing to work I mean you could safely
say that jQuery made the web what it is
right now and a lot of what went into a
specification of html5 and new
JavaScript came from jQuery as well but
a lot of people just basically like
let's release release release we're
gonna fix it later fix it later it's the
biggest lie on this planet just after I
read the terms and conditions
you never get time to fix something
later stack overflow copy and paste is
my favorite I love that IIIi can to
charm full stack overflow developer
where people just copy and paste random
things and hope it works change some
numbers around and then when it doesn't
work complain their browsers are crap
and JavaScript is not good but we are in
that community right now we're not
taking the language serious we just like
make it work make it quick to front then
it's not necessary it's not a big thing
and that's why the average website is
2.2 megabyte because we put fix on top
of fix and parts of library on top of
abstraction on top of something else and
we're like oh you need you need to start
with this library before that you don't
know how to click a button and you're
like there's a standard for that which
is one line of code like yeah but it
doesn't work in Internet Explorer 5.5 on
a full moon when you've got green hair
and whatever and like who cares you know
then don't rely on that click make it
make it a link and and and enhance it
later on but that this average website
is 2.2 mega is ridiculous this is just
crazy if you think about it and market
forces of course bit us in the back
because we're like we made the web too
slow
we made this web too big we made the web
annoying pop-up windows all kind of
slowing things down when I'm scrolling
like we put a lot of interface in
people's ways and that's when the mobile
web came out and it became really weird
for us because it was a step back we had
these cool new machines that could have
lots of travel script running everything
was smooth and then all of a sudden
Mobile's came out and it was a throwback
to the web of old when it comes to web
technologies it was small screens bad
connectivity and unreliable browser
support you have no idea which browser
was on that phone and a lot of times the
browser was basically hardwired to the
phone there wasn't even a new way of
upgrading that browser ever which is
like screaming please turn me into a
zombie in your botnet to me constantly
changing conditions I am connected I'm
connected I'm not connected oh my
battery is empty or does another thing
coming in oh it's taken away from our
browser it's not like people said glued
in front of your browser like they did
on a desktop hardwired browser and
hardware with unpredictable upgrades
like it might get the new version of
Android maybe some time or not
and it will be like a fascination for
example I can't get Kindle on an older
iOS device but I can get Kindle and an
old Blackberry it's a PDF reader for
Christ's sake I shouldn't be he
shouldn't have a problem like that and
that's where apps came in and apps were
beating us around ahead of the web quite
heavily because people said like okay
the web html5 will never be good enough
for mobile devices will never be good as
native look how buttery smooth native
apps are who got graded is to actually
interact with them how much fun it is
and the web's just terrible and out of a
sudden we didn't have any links any
longer an app was something you had to
go to the supermarket or the App Store
downloaded after you locked enough do
you gave your credit card details after
your bank account and then you basically
could use that thing they didn't have
links the distribution model was taken
away from us the DTD deep pocket eyes
thing that is the web was taken away
from us and of course the people of the
web were like oh my god it's all over we
made to suffer and we're doomed
and it's probably I'm going to the goat
farming now or do some other stuff
because it's like over you know mobile
and and native is gonna eat the world
technology and I think the ability to
control the distribution and update
cycles is kind of cool and people very
much jumped on it because it goes back
to the terrible thing that got us in the
state of Parana in right now which is in
built obsolescence in the 1950s people
realized building things that last long
is a idea if you want to make money
so we break things we make through make
sure that things break quickly a website
you cannot sell you cannot say there's a
new version of the website please pay
five dollars to go to that one it just
doesn't work with an app totally
like hey you don't want you don't want
you want a Kindle you have to buy a new
$600 phone this is what what the people
that want to make money with software
they really loved cuz out of a sudden
like we had CD ROMs
and when CD ROMs got scratched you had
to buy a new CD ROM an app was the same
thing I gave a TED talk about this two
years ago and I'm really smoked that it
actually turned out to be myself saying
the right things for change but it was
just people loved it because we made
software a perishable product and we
made software a system that I can take
away from the user again and that is to
me completely turning the idea of the
web around the distributed model of
everybody can take part became out of a
sudden a specialist case again you want
to start building for iOS you better
download six Meg of Xcode six gig of
Xcode and if you're in India on a 56 K
connection you probably wait until the
next five years before you can start
coding the web will be with you always
we will survive this is what I said we
will actually match what native is doing
and we will the better and that's where
mobile web apps came in and this is when
we started packaging html5 and CSS and
JavaScript into zip files gave it a
manifest file put it in our own
marketplaces and asked you to download
it there we basically tried to match
native in its own powers in its own
benefits rather than just replacing with
something that wasn't there so it really
did not work it was like all of those
were doomed I worked on Firefox OS for
two years a Web OS failed
blackberry had its own html5 format all
of these things basically tried to do
exactly the same things that native did
except with lesser technology for that
card use case it was not making sense at
all and so people looking at people like
me like well you said html5 is good I
still cannot do it on iOS I can't still
kind of do it that they kind of do it
there what do we do now I'm like okay
let's wait no weird let's wait this can
only implode in itself the way a whole
generation of us is used to be able to
access content is used to be able to
play a game discard it and not and go
back again after we bookmarked it it
cannot be that out of a sudden software
becomes something that is perishable
like flowers or or fruit and the app
honeymoon period is completely over if
you think you're gonna make money with a
native application think again because
you have to be in the 0.2% of the main
market featured on the main part my main
find you and there is research to
numbers that to prove all that and it's
because people are not using apps any
longer they realized it's friggin
annoying to have ten thousand things on
my phone that keep telling me please use
me please use me please use me it makes
much more sense to just stay inside
Facebook or whatsapp and talk with my
friends there and from time to time go
into the browser and say like what's the
weather in Germany and Google gives me
the answer rather than download the
weather app or most of the apps that you
need today come already with the phone
pre-installed the more you tighten the
grip the more initial users would go
through your fingers if you go to a
marketplace right now
a thousand users interested in your app
eight hundred of them will go to the App
Store they just like no I'm not gonna so
again this is gonna tell me then my
other apps deed upgrading I don't want
to go there
your app is found by six hundred forty
people because they probably have to
fight all the other spam apps that like
oh talking dog talking elephant talking
trump whatever
click install five hundred twelve users
accept permissions because every app
wants to have every permission on my
player on my phone like hey I'm an I'm a
puzzle game I probably should be able to
access your credit card right download
and wait cause the law all apps are huge
download 328 users it's moving at 62
users you you lose a fifth of all the
market model and then of course as soon
as you have them every time I go back on
wireless 37 of apps on my phone tell me
I want to I want to get a new version I
haven't used these things in month but
why do they need a new version if I
haven't even started them that makes no
sense to me but it's always like oh
please download me please download me
it's all good Google Drive what the hell
and then you go I was in Germany the
other day and I try to take uber and
ubers of cause evil and everybody hates
it there so they make their own app
called my taxi cool I don't have a data
plan in Germany so I basically
downloaded at home and my wireless to go
and actually have it done in Germany
right this item is not available in your
country so hey we don't like uber so you
probably should be in our country to
download our app before you use it
what makes no sense but this is how we
are the web beats that all the time on
demand worldwide everywhere without
having to go through these downloads
without going through the marketplace
and all these things
of course people like it's not gonna
work why would why would it not why
would it work this time when the first
time we packaged html5 apps they were
terrible and nobody wanted to use them
well we have better technology mobile
browsers are much better now
and Android has understood that you
cannot have a browser that's very
outdated in an old version we have to
have a way to make the in make the
webview and DT the inbuilt browser
upgradable for everybody web views of
TOS are updating independently instead
of just having to wait for the new for a
new operating system again in your
browser a lot of the hardware access
ABAP eyes are standardized a lot of the
things that we had to use native for
because HTML was not allowed to access
an accelerometer a camera it was not
allowed to store things into a database
all these things are now in browsers and
on mobile devices and funnily enough
mobile devices upgrade much faster than
other hardware does although the pricing
is almost the same but people are
happier to get a new phone and most
phone contracts give you a new phone
after like a year rather than like then
like you stick with the old one battery
status is available in java script
camera axis is an input element if you
want to use it just accept image capture
camera and the rest is done by the
operating system for you device motion
and orientation is available file files
cannot be only uploaded or like only be
posted but can be read binary by a byte
by byte and I showed earlier how you can
use that for example to generate
previews of images on the fly file
transfer is now a byte transfer so you
can do proper upload bars like you used
to do in flash rather than just having
the browser die on you for five minutes
and then hopefully it uploaded it media
capture you can you can record a video
in the browser you can record audio in
the browser Network information you know
if it's a wireless if it's a if it's a
mobile or if it's a if it's online or
offline and vibration you can make the
ability mobile phone vibrate as well
which is sometimes really cool for like
for example turn left for one vibration
turn right for two vibrations
district used to be called web vibrator
so all the api's that we used PhoneGap
for which is like a gap stopgap solution
hence the name phone gap that converted
HTML into native code all of those
except for contexts are available now
across the platforms that we have on
mobile right now contacts probably a
good idea not to be make fully available
network access and notifications are
very much available as well and
notifications are the cool thing that
everybody wants that makes your app
sticky to help tell people that
something happen in your app to bring
him back to your app please don't
overuse this it's not it shouldn't
become the new top up window it's good
if you if you notification just says
something happened you're terrible
if you notification says like this
happened do you want to answer quickly
then you're good you know is it for what
it's worth for the end user not against
them serviceworker is the most most
interesting thing that's happening right
now and please look it up there's going
to be there's lots of information out
there already a serviceworker in essence
is a scriptable HTTP router in
JavaScript so you can make things go
offline you can do notifications you can
upgrade caches you can instead of
instead of putting things putting things
in an app cache where we could allowed
things to be offline we can now name the
cash we can purge them we can check
what's in the cache so our our network
resilience against bad network under
connections is much much better with
serviceworker and it's supported now iOS
are the only ones that are not really
into it yet we are we have it on our
plan for edge as well but on Android and
on mobile Mozilla and Chrome it's all
over the place actually I'm going in
three days I'd be in Seattle where we
haven't got a whole workshop on pwace
which is about serviceworker
it's an own worker thread in the
background in a known threat not slowing
down the browser that can talk and make
your application available offline and
that's what progressive web apps are
about it's an HTML Bay a document it's
an it could be a JavaScript document
it's what you put on the web and gets
the extra functionality with the
serviceworker to be
line to be installable and to end up on
your home screen as an icon the end user
doesn't need to know that the thing is
not a native app it just performs just
like a native app would and a better way
of dealing with it is because the that
the link is the distribution model so by
first time you already have it installed
you don't have to go to an extra install
process you don't lose your users by
sending them to a term and to an app
store so they work offline they can
hibernate and notify unchanged so they
don't need to be open all the time just
to get new data for example they have
their progressively enhanced meaning
that if the browser doesn't support it
you still have a proper html5
application in there it just doesn't do
the cool stuff it's an enhancement not a
replacement and it's more functionality
on subsequent visits that's what Google
defines it so the first time you go to a
page it caches it in the background the
second time you go to the page or like
6/7 I don't know what they're doing
right now it basically tells you hey I'm
offline available by now because you're
coming to me all the time and then the
next time it's like hey do you want me
as an icon on your home day on your home
page is okay if you don't need to but
I'm available now you're basically you
can use me offline I don't need to load
anything from the internet anymore have
fun with me and the link is the
distribution model you send your app to
other people by sending them the link
and how cool is that that could go in
your emails that could go in a text
messaging client that could go in
anywhere really all the benefits of
native apps and none of the sluggish
distribution issues none of these like
losing one-fifth of your end users just
because you put barriers in their way
it's a natural evolution of web content
into the mobile web form factor instead
of simulating the native form factor
with html5 technology and it's a big
opportunity to crack the close
distribution model which is rusting and
falling apart at the seams already and
good riddance I'm really really unhappy
about people forcing me to buy a new
phone just to play a game Flipkart in
India that now got bought I think
somebody by Walmart or mod is trying to
buy into them did a progressive web app
and they found three times more time
spent on site and that's not waiting
that's interacting with the side and
buying stuff 40% higher re-engagement
because of notifications 70% greater
conversion from home screen so instead
of going and having to type in a URL in
a browser on a mobile phone is never fun
having an icon to click it is fun and
three times lower data usage because it
uses JavaScript HTML and CSS it's a lot
smaller than a native application so
end-users don't have to download 50 mega
just to see a dancing rabbit or whatever
so look into this this is the future of
the web right now if you care about the
web if you if you don't care about the
it at least give it a chance because I
don't care about what I get paid for I
want to keep this distributed open model
this democratic way of getting
information disseminated open and
available for everybody any web product
can become a progressive web app all you
have to do is add a serviceworker which
is a javascript file a manifest file and
linking to 2d cache to cache your stuff
in there you reap the rewards of simple
maintenance and upgrades pass and the
form-factor mobile users expect people
expect an app they don't want to type in
your username all the time to your URL
all the time they expect an icon to
click on they expect it to be fullscreen
they expect it to basically have nice
buttons and all these kind of things it
makes sense to clean up before you go
there don't just put a serviceworker on
your current bloated website that will
not make happy users out there so take a
look at what we have right now can I use
calm is a great website telling you what
browsers are supporting right now and
you will find that most of the browser's
can use the cool new stuff that you
can't that then you get promised then
simplify your interfaces don't make it
complex for people to use your stuff
users are impatient and on flaky
connections they have terrible debt we
have a terrible temper on phones we're
much better on desktop reconsider the
ways you build deploy your products a
lot can be automated a lot of we talked
earlier in my other talk about image
optimization that can be automated in a
build process don't try too hard code
everything and just put 12 libraries in
there because you used to put
we've got document a query selector now
which is almost as good as the dollar of
jQuery and that's supported in every
browser you don't need that any longer
progressive web apps are not a
replacement of what we do now they are a
progressive way to enhance what we
already do as I said a progressive web
app when you go to it for the first time
you already installed it you already
have two thing on your device you just
need to get that extra I can and you
works offline it's a merger of the app
space and the web space and you can
benefit from both and users expect apps
web is really cool to distribute and
easy to upgrade and that's all I have so