Ryan Will

Backend Engineer at Bleacher Report.

Interested in Computer Science and programming languages, particularly functional languages.

@ryanwillDev

https://ryanwilldev.com

slides.com/ryanwilldev/pwa

Progressive Web Apps

improving web apps one feature at a time

Apps for a Universal Platform

What is a PWA?

These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins.

- Alex Russell

Responsive

Connectivity-Independent

App-like

Fresh

Discoverable

Re-Engageable

Installable

Linkable

SAFE

Basic PWA CheckList

1. HTTPS

2. Responsive Design

4. offline Availability

3. Web Manifest

HTTPS

Responsive Design

App Shell

Web Manifest

{
  "name": "My Cool App",
  "short_name": "Cool App",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A very cool app for doing cool things",
  "icons": [{
    "src": "images/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cool_app"
  }]
}

Web Manifest

Service Worker



self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request)
    .then(function (cachedAsset) {
      if (cachedAsset) return cachedAsset;
      else {
        return fetch(event.request)
        .then(function (resp) {
          return caches.open('dynamic')
            .then(function (cache) {
              cache.put(event.request.url, res.clone());
              return res;
            });
        });
      }
    })
  );
});

Advanced PWA Features

Push Notifications

Background Sync

The Web

A universal platform

Open Standards

1. Multiple Controlling interests

2. Competition

3. Vendor/Hardware Agnostic

Discoverability

1. Easily Found and Shared

2. Index-able by Search Engines

Ease Of Distribution

1. No Installation

2. Updates are seamless

3. Instant productivity

PWa's

Apps for the universal platform

Light on Data

6,100,000,000

50 kb/s

52% of monthly income

Low Commitment

0 apps per month

85% of time Spent in 5 apps

75% of apps used only once

Cost Effective

1. Open Standards

2. Ease Of Distribution

3. Discoverability

4. Low Commitment

5. Light on Data

6. Cost Effective

sources

Resources and Tools