Your First Progressive Web App

Open West 2018

Demo App

Getting Started

Reliable

• Service Worker
• Background Sync

Secure

• Served over HTTPS
  • Geolocation API
  • Service Worker
  • Push
  • Background Sync
• Content Security Policy
• Preventing Mixed Content

Fast

• App Shell Model
• Cache API

Engaging

• Configured Web App Manifest
• Installable
• Push Notifications
  • Push API
  • Notification API

Courses 📚

• 📚Asynchronous JavaScript Requests
• 📚ES6 - JavaScript Improved

PWA Support

• Is Service Worker Ready
• Service Worker - Supported by Major Browsers
• Promises - Supported by Major Browsers
• Fetch API - Supported by Major Browsers
• Cache API - Supported by Major Browsers
• Background Sync - Chrome Support
  • Firefox - Bug Report
  • Edge - In Development

Technologies

Push Notifications

Two API’s

Push API

The Push API gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded.

Notification API

The Notifications API allows web pages to control the display of system notifications to the end user.

App Shell

🎥Instant Loading with the App Shell Model

The app shell should ideally:

• Load fast
• Use as little data as possible
• Use static assets from a local cache
• Separate content from navigation
• Retrieve and display page-specific content (HTML, JSON, etc.)
• Optionally, cache dynamic content

Reliable performance that is consistently fast. Repeat visits are extremely quick. Static assets and the UI (e.g. HTML, JavaScript, images and CSS) are cached on the first visit so that they load instantly on repeat visits. Content may be cached on the first visit, but is typically loaded when it is needed.

Native-like interactions. By adopting the app shell model, you can create experiences with instant, native-application-like navigation and interactions.

Economical use of data. Design for minimal data usage and be judicious in what you cache because listing files that are non-essential (large images that are not shown on every page, for instance) result in browsers downloading more data than is strictly necessary. Even though data is relatively cheap in western countries, this is not the case in emerging markets where connectivity is expensive and data is costly.

Service Worker

• Service Worker Demos
• Service Worker, What are you?
• Fresher service workers, by default in Chrome 68

The service worker is like a shared worker, but whereas pages control a shared worker, a service worker controls pages.

Being able to run JavaScript before a page exists opens up many possibilities, and the first feature we’re adding is interception and modification of navigation and resource requests. This lets you tweak the serving of content, all the way up to treating network-connectivity as an enhancement. It’s like having a proxy server running on the client.

Web App Manifest

• Browser Support
  • Chrome Enabled by Default
  • Edge Shipped
  • Firefox In Development
  • Webkit In Development

The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when ‘installed’ on the users mobile device or desktop. Having a manifest is required by Chrome to show the Add to Home Screen prompt.

Safari

• Configuring Web Applications
• Add to Homescreen elements for Safari on iOS

Safari still does not quite have full support for configuring PWA to act like native apps.

Browser API’s

• Credential Management API
  • Demo
• Geolocation API
• Device Orientation & Motion
• Payment Request API

Developer Tools

Lighthouse

Lighthouse is an open-source tool from Google that audits a web app for PWA features

Resources

• PWA Checklist
• Updates to Add to Home Screen Behaviour
• Hacker News readers as Progressive Web Apps
• PWA Rocks
• 🎥Production Progressive Web Apps With JavaScript Frameworks
• 🎥PWA Roadshow

Offline

• 📚Offline Web Apps - Udacity Course
  • IndexedDB & Service Worker
• Service Worker Cookbok
• Offline Cookbook

Animations

• CSS Triggers
• FLIP
• Performant Expand and Collapse
• Pull to Refresh - Overscroll Behaviour

Push Notifications

• Google Fundamentals
• Push Payload Demo

Performance

• Why Mobile Speed Matters

Helpful Libraries

• Workbox
  • JavaScript Libraries for adding offline support to web apps
• IndexedDB, but with promises

Frameworks

🎥Production PWA with Frameworks

React

React PWA Starter Kit

create-react-app my-great-app

What is Included

• By default, the production build is a fully functional, offline-first Progressive Web App
• An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.
• All static site assets are cached so that your page loads fast on subsequent visits, regardless of network connectivity
• Add to Homescreen capable

Preact

Preact PWA Starter Kit

preact create my-great-app

What is Included

• 100/100 Lighthouse score, right out of the box
• Fully automatic code splitting for routes
• Auto-generated Service Workers for offline caching powered by sw-precache
• PRPL pattern support for efficient loading

Polymer

Polymer PWA Starter Kit

Demo

🎥Google I/O Video

What is Included

• All the PWA goodness (manifest, service worker)
• Responsive layout
• Application theming
• Example of using Redux for state management
• Offline UI
• Simple routing solution
• Fast time-to-interactive and first-paint through the PRPL pattern
• Easy deployment to prpl-server or static hosting
• Unit and integrating testing starting points
• Documentation about other advanced patterns.

Vue.js

PWA Starter Template

vue init pwa my-project

What is Included

• Service Worker precaching of application shell + static assets (prod)
• Script (async chunk) preloading using
• Web Application Manifest + favicons
• Mobile-friendly meta-viewport
• Lighthouse score of 90+/100

Angular

Service Worker Support

ng add @angular/pwa --project *project-name*

Angular Service Worker Intro