Ionic

1. Progressive
2. Responsive
3. Connectivity Independent
4. App-Like
5. Fresh
6. Discoverable
7. Re-engageable
8. Installable
9. Linkable

BitSrc

1. Reliable
2. Fast
3. Responsive
4. Installable
5. Splash Screen
6. Highly engage-able

Google

1. Reliable
2. Fast
3. Engaging
4. See Lighthouse

PWA

Progressive Web App

Progressive Web App

Progressive Web Experience

Progressive Web Experience

native-like

Load Time

Mobile First

Mobile > 50% usage in 2017

70% mobile active

12% + mobile only

~ 80% of time on mobile is spent in 3 apps

INDUSTRY SUPPORT ?

Google

1. Primary proponents
2. Multiple talks per year at I/O
3. Maintain the Lighthouse project
4. Tons of resources to get you started

Apple

1. First on the scene
2. Part of Jobs vision for the iPhone
3. Slowly integrated into iOS

Big Name Tech

BARRIER TO ENTRY

Why ?

1. Reduced load time
2. Mobile trending market
3. Industry support

How to progressive web experience?

Choose what matters the most to you

Requirements

1. Offline?
2. Home screen presence
3. Native Notifications
4. Device integrations

Metrics

1. Optimize Time to First Meaningful Paint (FMP)
2. Time to Interactive
3. Entry bundle size
4. Maximum bundle size
5. Cache efficiency

Service Worker

1. Programmable network proxy
2. Must be HTTPS
3. Lifetime controlled by browser
4. Good support - caniuse.com

Service Worker

							
if ('serviceWorker' in navigator) {
  navigator
  .serviceWorker
  .register('/service-worker.js')
  .then(function(registration) {
    console.log('Registration successful, scope is:', registration.scope);
  })
  .catch(function(error) {
    console.log('Service worker registration failed, error:', error);
  });
}
							
						

Service Worker Lifecycle

1. Installing
2. Installed / Waiting
3. Activating
4. Activated
5. Redundant
6. Info

Service Worker

							
// events: 'install', 'activate', 'message', 'fetch', 'push', 'sync' 

self.addEventListener('install', function(event) {
  // postMessage() telling application that new version of service worker is 
  // available
});

self.addEventListener('activate', function(event) {
  // Prepare environment for service worker, clean old caches, 
  // prefetch new resources, warm stale caches
});

self.addEventListener('fetch', function(event) {
  if (event.url.contains('meaning-of-life')) {
    event.respondWith(new Response('42'));
  } else {
    event.respondWith(new Response('Try googling it'));
  }
});
							
						

App Shell Architecture

1. Load fast
2. Use as little data as possible
3. Use static assets from a local cache
4. Separate content from navigation
5. Retrieve and display page-specific content
6. Optionally, cache dynamic content

App Shell Example

PRPL Pattern

• Push
• Render
• Pre-cache
• Lazy-load

GUESS.JS

AI for content perfecting.

HTTP/2

CDN

AWS - CloudFront

Azure CDN

Workbox

Caching made easy

WebPack plugin for precaching

Workbox

Progressive jpeg

Standard

Progressive

Code Splitting

1. Route level
2. index.js / vendor

Webpack Performance Metrics

Webpack Performance Metrics

							
module.exports = {
  performance: {
    hints: 'warning',
    // How large can index.js be (bytes)
    maxEntrypointSize: 400000,
    // How large can any single asset be (bytes)
    maxAssetSize: 100000,
    // Do analysis only only specified files
    assetFilter: function(assetFilename) {
	  return assetFilename.endsWith('.js') || 
	  assetFilename.endsWith('.jsx') ||
	  assetFilename.endsWith('.vue');
    }
  }
};
							
						

Webpack Bundle Analyzer

Add to home screen

1. Engagement heuristic
2. Web app manifest
3. HTTPS
4. Service Worker

Microsoft Store

• Automatic index by Bing
• Manual submission

PWA Builder

Manifest Generator