This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
<p>PWA. Progressive Web Apps. Frances Berriman and Alex Russell coined the term
"progressive web apps" in 2015 with what I think is a seminal post
"<a href="https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/">Progressive Web Apps: Escaping Tabs
Without Losing Our
Soul</a>".</p>
<p>3 years later, we've come a long way. From a loose collection of technologies -
Service Worker, Manifest, Add to Homescreen, Web Push - that were originally
only implemented in one browser engine, to a brand that has started to stick
across the industry with businesses and developers, and all of the major browser
vendors implementing the majority of the 'PWA' stack.</p>
<p>We've now got <a href="https://appsco.pe/">app</a>
<a href="https://pwa-directory.appspot.com/">directories</a>,
<a href="https://blog.tomayac.com/2018/07/09/progressive-web-apps-in-the-http-archive-143748">tools</a>
that help us understand roughly how many PWA's there are in the wild, and a host
of awesome <a href="https://developers.google.com/web/showcase/">case studies about the benefits of
PWA</a>. But what defines a PWA?
Frances and Alex came up with this list of traits:</p>
<blockquote>
<p><strong><a href="http://alistapart.com/article/responsive-web-design">Responsive</a></strong><a href="http://alistapart.com/article/responsive-web-design">:</a>
to fit any form factor<br>
<strong>Connectivity independent</strong>: Progressively-enhanced with <a href="http://www.html5rocks.com/en/tutorials/service-worker/introduction/">Service
Workers</a>
to let them work offline<br>
<strong>App-like-interactions</strong>: Adopt a Shell + Content application model to create
appy navigations & interactions<br>
<strong>Fresh</strong>: Transparently always up-to-date thanks to the Service Worker update
process<br>
<strong>Safe</strong>: Served via TLS (a Service Worker requirement) to prevent snooping<br>
<strong>Discoverable</strong>: Are identifiable as "applications" thanks to
<a href="https://w3c.github.io/manifest/">W3C</a>
<a href="https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android">Manifests</a>
and Service Worker registration scope allowing search engines to find them<br>
<strong>Re-engageable</strong>: Can access the re-engagement UIs of the OS; e.g. <a href="https://developers.google.com/web/updates/2015/03/push-notificatons-on-the-open-web">Push
Notifications</a><br>
<strong><a href="https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android?hl=en">Installable</a></strong><a href="https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android?hl=en">:
to the home screen through browser-provided
prompts</a>,
allowing users to "keep" apps they find most useful without the hassle of an
app store<br>
<strong>Linkable</strong>: meaning they're zero-friction, zero-install, and easy to share.
The social <a href="http://www.theatlantic.com/technology/archive/2012/10/dark-social-we-have-the-whole-history-of-the-web-wrong/263523/">power of
URLs</a>
<em>matters</em>.</p>
</blockquote>
<p>Importantly, this description marked the moment where we were all a little
clearer about how we wanted to see the web and we've got
<a href="https://developers.google.com/web/tools/lighthouse/">tools</a> that helped us
understand if our site is a 'PWA' or not. Alex went even further and defined
some of the <a href="https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/">technical aspects that make a 'PWA' a
PWA</a>.</p>
<p>With the hyperbole of this post out of the way, why isn't everyone building
these things? <a href="https://paul.kinlan.me/challenges-for-web-developers/">Well, it can be hard. Very
hard</a>. We are asking developers and businesses
to do a lot. In some cases focusing on AppShell can be a complete
re-architecture of a site, in other cases <a href="https://paul.kinlan.me/progressive-progressive-web-apps/">'AppShell' isn't the correct
architecture</a>. And in many cases the value
or narrative isn't always quite clear.</p>
<p>I've been fortunate enough to be able to speak directly to businesses and
developers about their concerns building on the web, specifically things that I
have heard businesses and developers say about PWA, are:</p>
<blockquote>
<p>We've got our site... but we are also making a PWA.</p>
</blockquote>
<blockquote>
<p>— Many B2B sites we spoke (actually, I saw this a lot in India)</p>
</blockquote>
<p>Interesting. Are they different? Frequently not, but PWA is a 'thing' they
have heard about and it's another product to launch. Much like m.* sites
were the mobile version of the desktop site, PWA's can be another thing
they have to launch.</p>
<blockquote>
<p>I've got a PWA. It just does Push notifications.</p>
</blockquote>
<blockquote>
<p>— Too many people.</p>
</blockquote>
<p>Wah. That's not a PWA, that's just using a piece of technology that native apps
have had.</p>
<blockquote>
<p>I'm only building a blog... it's not a PWA</p>
</blockquote>
<blockquote>
<p>— Many bloggers we spoke to.</p>
</blockquote>
<p>Hmmm. It's a clear case that we've not been able to articulate why it's important
for content sites to make the move.</p>
<blockquote>
<p>I don't care about making it installable.. I don't need a Service Worker.</p>
</blockquote>
<blockquote>
<p>— Many publishers we spoke to.</p>
</blockquote>
<p>Huh. People associate App's with installs, and the thought that a site or
experience must act like an App install turns some people off from the concept
as a whole. In 2015 there was a very interesting discussion about
<a href="https://trib.tv/2015/10/11/progressive-apps/">carrots</a> that I encourage you to
disect.</p>
<blockquote>
<p>I don't need an app on desktop. I just need users to click 'checkout'</p>
</blockquote>
<blockquote>
<p>— Many retailers we spoke to.</p>
</blockquote>
<p>Ok. That's pretty clear. The value to a user or the business is not there,
and it's enough to stop a business prioritizing the traits of a PWA.</p>
<blockquote>
<p>Progressive Web Apps are just better sites.</p>
</blockquote>
<blockquote>
<p>— Many developers we speak to.</p>
</blockquote>
<p>Actually I hear this a lot from a lot of great web developers.</p>
<p>I encourage you to check out the writings of <a href="https://adactio.com/">Jeremy
Keith</a> who for a while has been pushing the 'PW' in PWA
for a long time and in a recent talk has said something similar:</p>
<blockquote>
<p>There's a common misconception that making a Progressive Web App means
creating a Single Page App with an app-shell architecture. But the truth is
that literally any website can benefit from the performance boost that results
from the combination of HTTPS + Service Worker + Web App Manifest.</p>
</blockquote>
<blockquote>
<p>— Jeremy Keith. "<a href="https://noti.st/adactio/d1zSa7/any-site-can-be-a-progressive-web-app">Any Site can be a Progressive Web
App</a>"</p>
</blockquote>
<p>My personal feeling is that everyone is really hung up on the A in PWA: 'App'.
It's the success and failure of the branding of the concept; 'App' is in the
name, 'App' is in the conscious of many users and businesses and so the
associations are quite clear.</p>
<p>To be absolutely clear, myself and many others across our team pushed hard on
the 'App' term in the context of PWA, specifically in relation to competing with
Mobile native experiences. <a href="https://trib.tv/2016/06/05/progressively-less-progressive/">Andrew Betts'
post</a> had a good
summary against our original positioning, and whilst I don't think we were
wrong, we did miss a chance to help the wider story specifically around
form-factors that were not so mobile centric.</p>
<p>I used to ask audiences this when we were talking about the Chrome Web Store. Is
Gmail an app or a site? An App, that's Easy. Is Twitter an app or a site? An
App.. is it? If I'm just reading content, it still feels like a web site. Is
Wikipedia an app or site? A site, absolutely; is it though? As an editor it
feels very much like a tool.</p>
<p>Ultimately, I don't think it actually matters too much if a site is an app or an
app is a site. People can and do create everything on the web: 'apps', games,
VR bobbins, retail stores or just traditional 'sites', and it could be for any
specific use case - media, entertainment, publishing, utilities, commerce...</p>
<p>If you tease apart the original definition of PWA, with the exception of
'installability' (see 'bag of carrots'), I don't think anybody could argue that
if a developer improves their site in any one of the points Alex referenced then
users get a better experience, and when user's get a better experience they
value the web more and more people have a meaningful engagement with the web and
keep using the web.</p>
<p>So how can we apply the PWA narrative in a way that every business and developer
knows what they should focus on?</p>
<hr>
<p>I've been thinking of a slight pivot based on the challenges we've seen in the
industry, and I've tried to prioritize the importance of where developers and
businesses can focus their efforts. (Note: I might channel
<a href="https://twitter.com/business_kinlan">BizKin</a>)</p>
<p>We want businesses and developers to succeed by leveraging the web’s unique
capabilities that allow them to: Reach the most users they can at the click of a
button; Retain their users by bringing their best experiences across devices
with a single set of code; and to meaningfully engage with their users by
building a direct and ownable relationship with them.</p>
<p>I've tried to articulate this as a set of principles that the user should feel
when using the web. Your experience should be:
DISCOVERABLE, SAFE, FAST, SMOOTH, RELIABLE, MEANINGFUL</p>
<dl>
<dt>Make it Discoverable</dt>
<dd>Enable users to find your experience. The web is made of links and pages.
Ideally every page and state should have a deep-link so that anyone can be sent
to it from any site, be it an aggregator, a message, an email or a billboard.
Content should be served so that any renderer can read it.</dd>
<dt>Make it Safe</dt>
<dd>Users and content owners can trust experiences built on the web, protecting
identity, confidentiality and data integrity.</dd>
<dt>Make it Fast</dt>
<dd>Once the user has the link to your site, then the instant they tap it they are in
your experience and able to start using it irrespective of the network or device
that the user has.</dd>
<dt>Make it Smooth</dt>
<dd>When users are on your site the experience is responsive and interactive to all
user gestures. Animations feel smooth and crisp, feedback is instant, scrolling
is silky, navigations are instant. Ideally if you think of the web performance
in terms of
<a href="https://developers.google.com/web/fundamentals/performance/rail">RAIL</a>, you are
focusing on the 'RAI'.</dd>
<dt>Make it Reliable</dt>
<dd>Users of your site perceive as few interruptions as possible when faced with
unreliable network or devices. The experience should work and be responsive
wherever the user is.</dd>
<dt>Make it Meaningful</dt>
<dd>You must provide value and meet your user's needs through
high-quality experiences that provide value. This can seem quite fluffy, but
<a href="https://medium.com/ben-and-dion/mission-improve-the-web-ecosystem-for-developers-3a8b55f46411">Dion Almaer described it
well</a>.
The focus is really about your site solving a need for the user, be it
entertainment, smoothing out a purchase, advancement of knowledge or quick
completion of a task. It's all about the UX.</dd>
</dl>
<p>A modern experience that meets these principle goals of <strong>fast, reliable, safe
and smooth</strong>. It becomes progressively more <strong>capable</strong> using modern APIs and
highly <strong>discoverable</strong> by harnessing the reach of the open web and at the core
of it. A PWA should naturally meet each of these "principle goals" based on user
expectations and continues to build on the experience as more technologies and
capabilities come in. But so should any modern experience on the web today....</p>
<p><span><span id='pw'>Progressive Web</span> <span id=name>Apps</span></span> — Progressive Web All-the-things.</p>
<p>This is where I want to push PWA over the next year. What do you think?</p>
<p><em>Thanks to Harleen Batra.</em></p>
<style>
dt {
font-weight: 600;
margin-bottom: 0.8em;
}
dd {
margin-bottom: 1em;
}
#pw {
font-weight: 700;
font-size: 1em;
}
#name {
font-size: 1em;
font-weight: 100;
}
</style>
<script>
const nameEl = document.getElementById('name');
const names = ['Apps', 'Sites', 'Stores', 'Blogs', 'Forums', 'Magazines', 'Block-chain doo-dads', 'Experiences', 'Wikis', 'Utilities', 'Games'];
let counter = 1;
setInterval(()=> {
nameEl.textContent = names[counter];
counter = (counter + 1) % names.length;
nameEl.animate([{opacity: 0}, {opacity: 1}], {duration: 1000, easing: 'cubic-bezier(1,.01,1,.99)'})
}, 2000)
</script>
This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
