slides-pwa.md

Slides PWA

Intro (What, why, how) -> Reliable (Databases, Always available) -> Fast () -> engajable

Web vs Native

13% web vs 87% App 80% of time spent is in users top 3 apps

Native app to open is fast and work offline and has push notification. Web is reacher than native apps

The average user install 0 apps per month Mobile user use 1000 sites per month.

40% of user abandona um site se demora mais de 3 segundos.

• Reach
  • 1B montly mobyle chrome users
  • Reach on mobile web 2.5x of apps
• 3.3 (app) vs 8.9 (web) montly unique visitors
• 201.8 (app) vs 10.9 (web) average minutes per visitor
• Acquisition costs
  • Selio: €4 vs €0.35 per user aquisition
• Conversion
  • AliExpress: 2x more page views, 74% increase in time, 82% more conversion on iOS

Progressive Web Apps

• Reliable
• fast
• engajable

Reliable

Load instatly and never show the downasaur, even in uncertain network conditions

Fast

Respond quickly to user interaction with silky smooth animations and no janky scrolling

Engajable

Fell like a natural app on the device withe an inmmersive user experience

Why

• No Play store or App store
• Easy access
• Simple A/B test
• Challanges to update an app on low networks
• On 2G net SW improve 3 times the loading

How

From the group up

• Konga.com
  • They started from scratch
  • 92% less data for inital data
  • 82% less data to make the first transactaion

A simple version

• Just a part of the site
  • airberlin
    • < 1s initial loading
• The wasthingon post
  • 80ms page load

A single feature

• Focus on feature (Just a specific feature)
  • The weather company (Pus notifications)
  • booking.com

What make it possible

• SW
• Web Manifest

PWA Arquitecture

• App shell vs content

App shell

• Minimum resources for the first view
• We cache it on the SW

Things to think

1. Break the design with the core components
2. What needs to be on screen
3. What are others ui component for the app
4. What supporting resource are needed (JS, css)

How to delivery App shell

• Server-Side Rendering
• AJAX requests
• Combination of Both. Inject the data into the JS

Databases

• Local Storage
• Caches
• IndexedDb

Local storage

• Easy to use
• Sync

Caches

• Easy to use

• Async

• Fast

• Not really well supported

IndexedDb

• Fast

• Async

• Well supported

• Hard to use (can use a lib like localforage or lovefield)

Data is not permanent

Service worker

Proxy between the client and the network

Run in background (Caches and offline) Listen events from browser or server (Push notifications) Intercept network request, modify or redirect.

Lifecycle

Image

Prerequisitos

• Browser support
• HTTPS (or localhost)

Registration

• inside your application
• Progressive enhacement

if ('serviceWorker' in navigator) {
	// the scope is the entire root
	navigator.serviceWorker.register('/sw.js')
		.then();
}

Install

• Cache files for the app-shell
• version of the cache (Every change should update the cache.)

var cacheName = 'weatherPWA-v1';
var filesToCache = [...] list of url

self.addEventListener('install', function(e) {
	e.waitUntil(
		caches.open(cacheName).then(function(cache) {
			return cache.addAll(filesToCache); //Atomic operation
		});
	);
})

activation

• clean old caches

self.addEventListener('activate', function(e) {
	e.waitUntil(
		caches.keys().then(function(keyList) {
			return Promise.all(keyList.map(function(key) {
				if (key !== cacheName && key !== dataCacheName) {
					return caches.delete(key)
				}
			}))
		})
	)
})

fetch

• fetch events for low connections and no network

self.addEventListener('fetch', function(e) {
	console.log('[ServiceWorker] Fetch', e.request.url);
	e.respondWith(
		caches.match(e.request).then(function (response) {
			return response || fetch(e.request);
		})
	)
})

Pay attention on update SW. The cache can never update.

Caching strategies

Cache first

network first

cache only

network only

cache and network race

cache then network

sw-precache

• Automagically pre-cache your files.
• Generate a sw

npm install sw-precache

 swPrecache.write(<'service-worker.js'>, swOptions);

Gulp

gulp.task('generate-sw', function () {
	var swOptions = {
		staticFileGlobs: [
			'./*.html',
			'./images/*.{png,svg,gif,jpg}',
			'./scripts/**/*.js',
			'./styles/**/*.css'
		],
		stripPrefix: '.',
		runtimeCaching: [{
			urlPattern: /^https:\/\/wtf-data-api\.com/,
			handler: 'networkFirst',
			options: {
				cache: {
					name: 'dataApi'
				}
			}
		}]
	}
	
	return swPrecache.write('service-worker.js', swOptions);
})

Web app manifest

• json
• how app appears to user
• how app behaviros when lunched
• chrome and opera

{
	name,
	short_name
	start_url: /index.html?hs=true,
	icons: [{
		src,
		sizes
	}],
	background_color,
	theme_color,
	display,
	orientation
}

Images size

48x48 96x96 128x128 144x144 192x192 256x256 384x384 512x512

Chrome use 48 and 128.

Usage

<link re=manifest href=manifest.json />

Safari

icon

<link rel="apple-touch-icon" sizes="" href="">

hide the browser ui component

<meta name="apple-mobile-web-app-capable" content="yes">

minimize status bar

<meta name="apple-mobile-web-status-bar-style" content="black-translucent">

Needs to add some padding for the status bar be visible.

Web app Install Banners

• Add your app to home screen
• Chrome logic:
  • service worker
  • web manifest
  • engaged user

What next?

• Offline cookbook
• Promises
• Push notifications
• Web Payments API
• Credential Management API
• pwa.rocks

For more resources on building progressive web apps, take a look at https://developers.google.com/web/progressive-web-apps

Service Worker cookbook: https://serviceworke.rs/

Pokedex.org: http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org

Offline Web Apps on GitHub Pages https://hacks.mozilla.org/2015/11/offline-web-apps-on-github-pages/

Progressive Web Apps: Escaping Tabs Without Losing Our Soul https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/