Ryan Will

Backend Engineer at Bleacher Report.

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

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

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

Open Standards

1. Multiple Controlling interests

2. Competition

3. Vendor/Hardware Agnostic

Discoverability

Discoverability

1. Easily Found and Shared

2. Index-able by Search Engines

Ease Of Distribution

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

Progressive Web Apps

By ryanwilldev

Progressive Web Apps

Today’s companies tend to put the biggest focus on mobile apps. While smartphone users spend a large portion of their time in native apps, data has shown that the majority of smartphone users download an average of zero apps per month. This would indicate that once users have their favorite apps installed they don’t want to go through the hassle of installing any other apps. Progressive Web Apps provide a way to easily get your app into user’s hands and installed on their home screen. Comprised of just a few technologies, PWAs, provide many of the same features of mobile apps with the ease, familiarity, and reach of the web.

  • 199
Loading comments...