Progressive Web Apps Across All Frameworks

Progressive Web Apps Across All Frameworks + AddyOsmani @addyosmani

Built with a JavaScript framework / library Existing apps Progressively
Enhanced

Web App install banner Splash screen Offline support

Add to home screen Offline support Web App install banner

Mobile Safari on iOS

5miles FlipKart 70% BETTER CONVERSIONS A2HS USERS HAD 30% BETTER
CONVERSIONS A2HS USERS HAD

selioapp.com 10x 6+ cheaper than native minutes USER ACQUISITION AVERAGE
SESSION Client-side JavaScript Server-side JavaScript

INSTANT

Time to first paint

Time to first meaningful paint

Time to first meaningful interaction

navigator.serviceWorker .register('sw.js',{ scope: ‘./' }) .then((registration) => { // Service
Worker registered });

App Shell App Shell App Shell Index About Contact App
Shell Application Shell Content I swear I can hear Google sigh every time I start typing in the search bar. Google Earth: useful for checking which yards have milkshakes. Just ran a 10K (Ice cream truck wouldn't stop)

App Shell Inline critical CSS in <head> Async load CSS/JS
for current view App Shell I swear I can hear Google sigh every time I start typing in the search bar. Google Earth: useful for checking which yards have milkshakes. Just ran a 10K (Ice cream truck wouldn't stop) .toolbar { } .card { } .drawer { } <script async> loadCSS

Responsive Web App Manifest Service Worker Content caching Universal rendering
1 2 3 4 5

Responsive Web App Manifest Service Worker App Shell Content caching
Universal rendering 1 2 3 4 5

React HN

{ "name": "React HN", "short_name": "React HN", "icons": [{ "src":
"img/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },...], "start_url": "index.html", "background_color": "#4CC1FC", "display": "standalone", "theme_color": "#222222" }

Command-line "scripts": { "build": "cp node_modules/sw-toolbox/sw-toolbox.js && nwb build &&
npm run precache", "precache": "sw-precache --root=public --config=sw-precache-config.json", ... }, package.json

{ "importScripts": [ "sw-toolbox.js", "runtime-caching.js" ], "stripPrefix": "public/", "verbose": true,
"staticFileGlobs": [ "app/css/**.css", "app/**.html", "app/images/**.*", "app/js/**.js" ], } sw-precache-config.json

(function(global) { 'use strict’ global.toolbox.router.get('/(.*)', global.toolbox.fastest, { origin: /\.(?:googleapis|gstatic)\.com$/ });
global.toolbox.router.get('/(.+)', global.toolbox.fastest, { origin: 'https://hacker-news.firebaseio.com' }); })(self) runtime-caching.js

<div id="app"></div> <script src="build/vendor.js"></script> <script src="build/app.js"></script> <script> if ('serviceWorker' in
navigator) { navigator.serviceWorker.register('./service-worker.js', { scope: './' }) .then(function(registration) { registration.onupdatefound = function() { if (navigator.serviceWorker.controller) { var installingWorker = registration.installing; installingWorker.onstatechange = function() { switch (installingWorker.state) { case 'installed': break; case 'redundant': index.html

Go offline. App shell cached! Current session data.

BUT…relaunch and…

INDEXED DB LOCALFORAGE DEXIE IDB

var Firebase = require('firebase') var api = new Firebase('https://hacker-news.firebaseio.com/ v0')
function fetchItem(id, cb) { itemRef(id).once('value', function(snapshot) { cb(snapshot.val()) }) } function fetchItems(ids, cb) { … } } function storiesRef(path) { return api.child(path) } HNService.js

After loading just one page of comments.

importScripts('./localforage.js') onmessage = (e) => { const batch = e.data;
// Write batch to Indexed DB } …Web Workers? INDEXED DB

REST https://www.flickr.com/photos/oakleyoriginals/8544765375/

require('isomorphic-fetch') var endPoint = 'https://hacker-news.firebaseio.com/v0' var options = { method:
'GET', headers: { 'Accept': 'application/json' } } function itemRef(id) { return fetch(endPoint + '/item/' + id + '.json', options) } HNServiceRest.js https://hacker-news.ﬁrebaseio.com/v0/item/11643791.json

// server.js var express = require('express') var React = require('react')
var renderToString = require('react-dom/server').renderToString var ReactRouter = require('react-router') require('babel/register') var routes = require('./src/routes') var app = express() app.set('view engine', 'ejs') app.set('views', process.cwd() + '/src/views') app.set('port', (process.env.PORT || 5000)) app.use(express.static('public')) app.get('*', function(req, res) { ReactRouter.match({ routes: routes, location: req.url }, function(err, redirectLocation, props) { React Router

// Deserialise caches from sessionStorage. loadSession() { if (typeof window
=== 'undefined') return idCache = parseJSON(window.sessionStorage.idCache, {}) itemCache = parseJSON(window.sessionStorage.itemCache, {}) }, // Serialise caches to sessionStorage as JSON. saveSession() { if (typeof window === 'undefined') return window.sessionStorage.idCache = JSON.stringify(idCache) window.sessionStorage.itemCache = JSON.stringify(itemCache) } Globals guards

var parseHost = (function() { var a = document.createElement('a') return
function(url) { a.href = url var parts = a.hostname.split('.').slice(-3) if (parts[0] === 'www') { parts.shift() } return parts.join('.') } })() Minimise reliance on the DOM var url = require('url') var parseHost = function(uri) { var hostname = url.parse(uri).hostname var parts = hostname.split('.').slice(-3) if (parts[0] === 'www') { parts.shift() } return parts.join('.') }

Performance Cable Speed Index 0 1000 2000 3000 4000 Original
Service Worker Server-rendering SSR + SW Content caching 1,004 1,106 1,140 1,062 2,063

Angular 1.5?

Add to home screen Splash screen Offline support

Fast ﬁrst paint of content (target value: 1,000ms) Speed Index
Metric (target value: 1,000ms) Speed Index Metric for repeat visit (target value: 1,000ms) 2500ms 8432ms 4181ms https://cherry-app.appspot.com

Angular Mobile Toolkit

Angular CLI

Command-line $ npm install -g angular-cli $ ng new webapp
--mobile && cd webapp $ ng serve

Create Project Install Deps Scaffold App Generate Service Worker Build
step for AppShell Generate App Manifest Run Tests Preprocess CSS Build --mobile

App Manifest

{ "name": "Progressive", "short_name": "Progressive", "icons": [{ "src": "/android-chrome-192x192.png", "sizes":
"192x192", "type": "image/png", },...], "theme_color": "#000000", "background_color": "#e0e0e0", "start_url": "/index.html", "display": "standalone", "orientation": "portrait" }

Application Shell

Command-line $ npm install --save @angular2-material/toolbar $ npm install --save
@angular2-material/core

import { Component } from '@angular/core'; import { APP_SHELL_DIRECTIVES }
from '@angular/app-shell'; import { MdToolbar } from '@angular2-material/toolbar'; @Component({ moduleId: module.id, selector: 'hello-mobile-app', template: ` <h1> {{title}} </h1> `, styles: [], directives: [APP_SHELL_DIRECTIVES, MdToolbar] }) export class HelloMobileAppComponent { title = 'hello-mobile works!'; } hello-mobile works!

import { Component } from '@angular/core'; import { APP_SHELL_DIRECTIVES }
from '@angular/app-shell'; import { MdToolbar } from '@angular2-material/toolbar'; @Component({ moduleId: module.id, selector: 'hello-mobile-app', template: ` <md-toolbar> {{title}} </md-toolbar> `, styles: [], directives: [APP_SHELL_DIRECTIVES, MdToolbar] }) export class HelloMobileAppComponent { title = 'Hello Mobile'; } Hello Mobile

@Component({ moduleId: module.id, selector: 'hello-mobile-app', template: ` <md-toolbar> {{title}} </md-toolbar>
<md-spinner *shellRender></md-spinner> <div *shellNoRender>App is Fully Rendered</div> `, directives: [APP_SHELL_DIRECTIVES, MdToolbar, MdSpinner] })

shellRender shellNoRender

SERVICE WORKER

Command-line $ ng serve --prod $ ng build --prod Berry
PWA

"{ "group": { "app": { "url": { "/app-concat.js": { "hash":
"2431d95f572a2a23ee6df7d619d2b68ad65f1084" }, "/favicon.ico": { "hash": "164f9754ba7b676197a4974992da8fc3d3606dbf" }, "/icons/android-chrome-144x144.png": { "hash": "2eb2986d6c5050612d99e6a0fb93815942c63b02" }, dist/ngsw-manifest.json

Angular 2 Weather Fast ﬁrst paint of content (target value:
1,000ms) Speed Index Metric (target value: 1,000ms) Speed Index Metric repeat visit (target: 1,000ms) 1083ms 2271ms 599ms

OFFLINE COMPILATION

Template compilation Angular 1 (Browser) Angular 2 XHR Parser DOM
NG1/JS Template Parser AST Source/JS NG2/JS Source NODE NODE FILE BROWSER BUILD

Angular 2 Weather Fast ﬁrst paint of content (target value:
1,000ms) Speed Index Metric (target value: 1,000ms) Speed Index Metric repeat visit (target: 1,000ms) 479ms 1049ms 294ms

Angular Universal

server view displayed server response asset download client init client
data paint client takes over initial page load

server view displayed user events in uncanny valley? client takes
over initial page load

import {AppComponent} from "./app” import {expressEngine} from "@angular/universal” import *
as express from "express” let server = express(); server.engine(".html”, expressEngine); server.get("/”, (req, res) => { res.render("index”, { directives: [ AppComponent ] }); }); server.listen(8080); server.js

Performance https://ng2-weather-pwa.ﬁrebaseapp.com/ 3G Speed Index 0 750 1500 2250 3000
Original Offline compilation Universal rendering Service Worker 294 638 1,049 2,640

In my opinion, the data for Angular and Ember flat
out disqualify them for mobile use. Henrik Joreteg

Load Time First Boot Repeat Boot FastBoot Engines String Loading
Project Svelte Service Worker String Loading

# Get access to the ember command-line runner $ npm
install -g ember-cli bower # Run `new` with an app name to create a new project $ ember new my-new-app # Once generation is complete, launch the app $ cd my-new-app && ember server

// ember-progressive-webapp/app/router.js import Ember from 'ember'; import config from './config/environment';
const Router = Ember.Router.extend({ location: config.locationType }); Router.map(function() { this.route('art', function() { this.route('detail', { path: '/detail/:slug'}); }); this.route('film', function() { this.route('detail', { path: '/detail/:slug'}); }); this.route('photography'); this.route('design'); }); export default Router;

[{ "title": "Tooling Up", "slug": "tooling-up", "primaryColor": "#5a7785", "secondaryColor": "#455a64",
"image": "/images/tooling-up.svg" }, { "title": "Expressing Brand in Material", "slug": "expressing-brand-in-material", "primaryColor": "#202226", "secondaryColor": "#333", "image": "/images/expressing-brand.svg" }, ..

Web App Manifest Service Worker Server Rendering (FastBoot) Performance Optimisation
1 2 3 4

{ "name": "Zuperkülblog", "short_name": "Zuperkülblog", "icons": [{ "src": "assets/images/touch/touch-icon-192x192.png", "sizes":
"192x192", "type": "image/png" },...], "start_url": "/", "background_color": "#497886", "display": "standalone", "theme_color": "#FFFFFF" }

1 2 3 4

Command-line $ ember install broccoli-serviceworker

//app/config/environment.js ENV.serviceWorker = { enabled: true, debug: true, fallback: [
'/online.html /offline.html' ], precacheURLs: ['/mystaticresource'], networkFirstURLs: [ '/api/todos' ], excludePaths: ['test.*', 'robots.txt'], includeRegistration: true, serviceWorkerFile: "service-worker.js", skipWaiting: true, swIncludeFiles: [ 'bower_components/pouchdb/dist/pouchdb.js' ] }; Minimal conﬁg

toolbox.cacheFirst toolbox.fastest toolbox.networkFirst toolbox.cacheOnly toolbox.networkOnly sw-toolbox

1 2 3 4

network boundary Browser GET /my-app FastBoot initial render HTML +CSS
JavaScript payload App GET /user.json JSON payload API server GET /posts.json GET /cats.json JSON payload UI Ready

Command-line $ ember install ember-cli-fastboot $ ember fastboot —serve-assets #
Visit your app at http://localhost:3000 $ ember fastboot --environment production

// $ ember install ember-network import Ember from 'ember'; import
fetch from 'ember-network/fetch'; import ENV from 'ember-progressive-webapp/config/environment'; export default Ember.Route.extend({ model() { return fetch(ENV.baseURL + '/data/art.json') .then(function(response) { return response.json(); }); }, serialize(model) { return { post_slug: '/art/detail/' + model.get('slug') }; } }); Universal fetch

Works without JavaScript too.

1 2 3 4

{{content-for "head"}} {{content-for 'critical-path-css'}} {{content-for "head-footer"}} </head> {{content-for "body"}} <script
src="assets/vendor.js" defer></script> <script src="assets/ember-progressive-webapp.js" defer></script> {{content-for "body-footer"}} index.html App Shell CSS

Command-line $ ember install ember-cli-inline-content

Command-line # If using ember-cli-deploy $ ember install ember-cli-deploy-gzip

{{content-for "head"}} {{content-for 'critical-path-css'}} {{content-for "head-footer"}} </head> {{content-for "body"}} <script
src="assets/vendor.js" defer></script> <script src="assets/ember-progressive-webapp.js" defer></script> {{content-for "body-footer"}} index.html Deferred script execution

Performance Cable Speed Index 0 1250 2500 3750 5000 Original
FastBoot Optimisations Service Worker 414 972 1,304 2,884

DO LESS lazy BE

DESIGN FOR ENVIRONMENTS constrained

GO PROGRESSIVE g.co/ProgressiveWebApps

+ AddyOsmani @addyosmani MANY DINOSAURS WERE HARMED IN THE MAKING
OF THIS PRODUCTION. Thanks!

Progressive Web Apps Across All Frameworks

Progressive Web Apps Across All Frameworks

More Decks by Addy Osmani

Other Decks in Programming

Featured

Transcript