WTF R PWAs?

WTF R PWA’s
What The Feck aRe Progressive Web Applications
By Bob Byron and Mike Wilcox
February 2018
CLUB AJAX

Wikipedia Says…
“Progressive web apps (PWAs) are web applications that are regular web pages
or websites, but can appear to the user like traditional applications or native
mobile applications.”
- Wikipedia

Alex Russell says…
u Reliable – Load instantly and never show the Downasaur, even in uncertain
network conditions.
u Fast – Respond quickly to user interactions with silky smooth animations and
no janky scrolling.
u Engaging – Feels like a natural app on the device with an immersive user
experience.
https://developers.google.com/web/progressive-web-apps/

Bob says…
I like to think of them more as simply anything a native application can do, a
Web Native Application can do and those can be considered PWAs.
u Web Native Applications
u A web application that utilizes the same features found in native applications.
u An application that you don’t realize is HTML based.

Mike says…
PWAs embrace the open web, whereas native (mobile) applications often are
built without standards and deployed from behind walled gardens (app stores).
A PWA evolves from a page in a browser tab to a first class application

PWA advantages over native apps
u low friction of distribution — PWAs eliminate the need to go to the app store,
search for the app, click Install, wait for the download, then open the app.
u discoverability — easily found by search engines.
u linkability — any page/screen can have a direct link, which can be shared easily
u bookmarkability — save that link to access an app’s view directly
u always fresh — no need to go through the app store approval process to push
updates
u universal access — not subject by app stores sometimes arbitrary policies or
(unintended) geographic restrictions
u large data savings, extremely important in emerging markets with expensive
and/or slow Internet access. For example, e-commerce website Konga cut data
usage by 92% for the first load by migrating to a PWA.

PWA Characteristics
u Progressive - Work for every user, regardless of browser choice because they’re built
with progressive enhancement as a core tenet.
u Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
u Connectivity independent - Service workers allow work offline, or on low quality networks.
u App-like - Feel like an app to the user with app-style interactions and navigation.
u Fresh - Always up-to-date thanks to the service worker update process.
u Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
u Discoverable - Are identifiable as “applications” thanks to W3C manifests[6] and service
worker registration scope allowing search engines to find them.
u Re-engageable - Make re-engagement easy through features like push notifications.
u Installable - Allow users to “keep” apps they find most useful on their home screen without
the hassle of an app store.
u Linkable - Easily shared via a URL and do not require complex installation.
https://addyosmani.com/blog/getting-started-with-progressive-web-apps/

PWA-Specific API Features
u Push notifications
u Working offline
u Adding an icon to the home screen
u Being installed into Android (i.e. in the apps drawer and in Settings)
u Receiving intents (open domain pages in your app)
u Triggering the native Android share dialog
u Launching in full-screen
u Persistent auto-login using the Credentials Manager API
u Accessing the filesystem (Chrome and Opera) and reading user-selected files
in any browser
https://medium.com/dev-channel/why-progressive-web-apps-vs-native-is-the-wrong-question-to-ask-fb8555addcbb

PWA Checklist – 1 of 4
u Site is served over https
u Responsive web design
u All URLs must work offline
u Must be able to add application to home screen
u First load must be fast on slow networks and weak devices
u Site supports cross-browser (modern browsers)
u Page Transitions must be snappy, on or off network
u You must be able to get to each page via a URL
https://developers.google.com/web/progressive-web-apps/checklist

u Site’s content must be index-able by search engines
u Schema.org metadata is provided where appropriate
u Social metadata is provided where appropriate
u Canonical URLs
u Use the history API
u Content doesn’t jump as the page loads
u Pressing back must maintain page scroll position

u Inputs aren't obscured by the on screen keyboard
u Content is easily shareable from standalone or full screen mode
u Any app install prompts are not used excessively
u The Add to Home Screen prompt is intercepted
u Site uses cache-first networking
u Site appropriately informs the user when they're offline

u Provide context to the user about how notifications will be used
u UI encouraging users to turn on Push Notifications must not be overly
aggressive
u Site dims the screen when permission request is showing
u Push notifications must be timely, precise and relevant
u Provides controls to enable and disable notifications

What PWAs can’t do
u contacts, calendar and browser bookmarks access (though lack of access to
these could be viewed as a feature by privacy-conscious users)
u alarms
u telephony features — intercept SMSes or calls, send SMS/MMS, get the user’s
phone number, read voice mail, make phone calls without the Dialer dialog
u hardware low-level access: flashlight, atmospheric pressure sensor
u system access: task management, modifying system settings, logs
u registering to handle custom URL schemes and protocol, or file types
https://medium.com/dev-channel/why-progressive-web-apps-vs-native-is-the-wrong-question-to-ask-fb8555addcbb

Why Use HTTPS
u HTTP transfers data that can be sniffed
u Protects your users privacy
u Helps protect the server security
u Referrer data is preserved and can’t be stripped.
u Greater site/page ranking is given to secure sites/pages
u Use Let’s Encrypt: https://letsencrypt.org

Responsive Design
u One application adapts to many devices
u One codebase to debug – fixes apply to all devices
u One server to deliver the content / data
u SEO is the same regardless of device

Adding Your PWA to homepage
u Use a manifest.json file to create a homescreen icon – just like a native application!
u Have your application reference the manifest
u Set your starting URL in the manifest file
u Add custom icons to your manifest file
u Display can be standalone or browser
u Control the Orientation
https://developer.mozilla.org/en-US/docs/Web/Manifest

Example Manifest
{
"short_name":”CoolApp",
"name":”My Cool Application",
"icons":[
{
"src":"launch-icon-1x.png",
"type":"image/png",
"sizes":"48x48"
},
{
"type":"image/png",
"sizes":"96x96"
},
{
"type":"image/png",
"sizes":"192x192"
}
],
"start_url":"index.html?launch=true"
}
https://developers.google.com/web/fundamentals/web-app-manifest/

Working offline – use a ServiceWorker
u ServiceWorkers act as a proxy between the app and the server.
u Handle the Online vs Offline experience
u ServiceWorkers asynchronously handle the applications calls
u ServiceWorkers only run under HTTPS
u Ready on Chrome, Firefox, and Samsung Internet
u Ready in Safari 11.1, Edge 17
u https://caniuse.com/#feat=serviceworkers
u https://jakearchibald.github.io/isserviceworkerready/
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

Service Worker Basic Architecture
Service Worker Cookbook

Preview your content
u Run a fetch - See the content as google sees it.
https://support.google.com/webmasters/answer/6066468?hl=en

SEO metadata – Schema.org
u Founded by Google, Microsoft, Yahoo, and Yandex as a standard for all
webcrawlers
u Search engines try, but can’t always identify what the data in your site means.
u Microdata identifies the type of data found in your website
u Full list of itemtypes: https://schema.org/docs/full.html
https://schema.org/docs/gs.html

SEO Testing of Metadata
Run test for...
u Ibm.com – identifies a search facility
u Whitehouse.gov – identifies social sites
u Insight.com – identifies web page, corporation, website search, site
navigation
u nytimes.com – tickerSymbol incorrectly defined
https://search.google.com/structured-data/testing-tool

Test how your app handles network
problems
In Chrome
Change your speed - Fast 3G, slow 3G, or take it offline

Use other Speed Testing Tools
u Page Speed - https://developers.google.com/speed/pagespeed/insights/
u WebPageTest – https://www.webpagetest.org/

Cross Browser Testing
u CanIUse.com
u Not a drug legalization site
u Shows the availability of a feature in the common browsers.
u Online tools: http://browsershots.org/
u IE allows you to emulate older IE versions.
u Use Selenium to test each, but you have to write the scripts!
http://www.seleniumhq.org
u Or you can just test all the browsers manually

Demos
u Wiki Offline by Jake Archibald
u Voice Memos by Google
u AirHorner by Paul Kinlan
u Guitar Tuner by Paul lewis
u iFixit by Jeff Posnick
u ServiceWorker Basic Example by Google
u Using ServiceWorkers by Mozilla

WTF R PWAs?

More Related Content

What's hot (20)

Similar to WTF R PWAs? (20)

More from Mike Wilcox (20)

Recently uploaded (20)

WTF R PWAs?