What is a Progressive Web App?

• App-like - Web App that acts like native

• Installable, Fresh - Saved to home screen and always up-to-date

• Connectivity independent - Offline functionality

• No App Store - No review process

• Progressive - Works on every platform

• Re-engageable - Push notification support

• Discoverable, Linkable - easily found through search and access via URL

Progressive Web App

or P.W.A.

• Safe - Served via HTTPS

Which type of mobile app should I develop?

Mobile strategy

4 types of mobile app

Native

Native JS

Hybrid

P.W.A

Mobile strategy

4 categories of analysis

Distribution

Capabilities

Performance

Productivity

Mobile strategy

Native

Native JS

Hybrid

P.W.A.

Capabilities

Performance

No single strategy has to be used in isolation

There’s no one-size-fits-all

https://youtu.be/FP1w89F5OtI

Productivity

Distribution

Analysis

Mobile strategy

Productivity

Native

Native JS

Hybrid

P.W.A.

Framework

Language

Number of team profiles

Code base & Build

• iOS SDK
• Android SDK
• Windows Universal SDK

NativeScript

or

ReactNative

Cordova

or

Phonegap

Any Web framework

with native like capability

• Swift / Objective-C
• Java
• .Net

HTML

CSS subset

JS / TS

HTML

CSS

JS / TS

HTML

CSS

JS / TS

Multiple

Single

Single

Single

3

1

1

1

Mobile strategy

Capabilities & Performance

Native

Native JS

Hybrid

P.W.A.

UI components

Native API

Offline

Push notification

Native

HTML, CSS, JS

in WebView

HTML, CSS, JS

Yes

Yes

Yes

Yes

Yes

Only Android for now

Yes

Yes

Yes

Yes

Native

Yes

Yes

No

Mobile strategy

Distribution

Native

Native JS

Hybrid

P.W.A.

Installation / Update

Searchability

Store

Web

Store

Web via Website

Web

1st time experience

Installation = friction = abandonment

Native experience

on the web

How to build

a Progressive Web App with Ionic 2?

Create an Ionic App

# Install ionic tools
$ npm install -g ionic 

# Create Ionic 2 project
$ ionic start AngularHackDayIonic2PWA --v2 

# Build the project
$ ionic build 

http://ionicframework.com/docs/v2/getting-started/installation/

Web app manifest

{
  "name": "Angular Hack Day Ionic 2 PWA",
  "short_name": "AngularHackDay",
  "description": "Ionic 2 PWA demo for Angular Hack Day - Sydney",
  "start_url": "index.html",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#79C273",
  "theme_color": "#79C273",
  "icons": [{
    "src": "../resources/android/icon/drawable-ldpi-icon.png",
    "sizes": "36x36",
    "type": "image/png"
  }, 
  ...
  ],
  "related_applications": [{
    "platform": "web",
    "url": "https://.../"
  }]
}

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json

Enable home screen install

Service Workers

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

• Cache data & files

• Send push notifications

• Intercept network requests

• Run by browser in the background

Enable offline capability

https://serviceworke.rs/

Service Workers

https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle

Install

Service Workers

https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle

Update

App Cache

https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

For incompatible browsers

As a fallback

https://goo.gl/ec1p6N

• Offline browsing - navigate even when offline

• Speed - fast loading via local cached resources

• No partial update - a byte-by-byte manifest comparison to trigger the update

• Deprecated - Service Workers offers a replacement for Application Cache

• Reduced server load - only downloads resources that have changed

• No background sync -  local cache only

App Shell

https://developers.google.com/web/fundamentals/architecture/app-shell

Enable instant loading

Demo

https://github.com/julienevano/angularhackday-ionic2-pwa-demo