PWAs:
fad or future?

The WEB is AWESOME!

βœ… everywhere

❌ install every time...

πŸ’­

βœ… no install

βœ… open

βœ… powerful

❌ requires connection

❌ not the norm on mobile

Web

Native

PWAs

❓

React
Angular
Vue
?.js

Demo

icons from iconfinder

Service

Worker

...is a worker registered against an origin and a path. 

It takes the form of a JavaScript file that can control the web page/site it is associated with [...].
Service
Worker
Client
Server

πŸ”

SW lifecycle

Register the SW*
SW is installing

πŸ”

βœ…

βœ…

SW is active 
* requires HTTPS
Modify the SW

⏳

⏳

Browser detects 
the SW difference
New SW is installing 
πŸ”
New SW is waiting 
⏳ Until the old SW controls no pages
New SW is active

βœ…

βœ…

 πŸ€” What about compatibility?

Q&A

COOOOOODE!

[ 😏 Chrome DevTools ]

βœ… FORK

βœ… cd dev-v-dev/__start-files

βœ… npm install

βœ… npm run run dev
βœ… locahost:8080

πŸ‘¨β€πŸ­

0. Service Worker

[ πŸ”΄ LIVE ]

πŸš«πŸ“Ά

1. Works* offline

πŸ“ index.html
πŸ“ style.css
πŸ“ ...
Server
πŸ“ index.html
πŸ“ style.css
πŸ“ ...
example.com

πŸ“‚ Files

πŸͺ Data

cache storage
IndexedDB

[ πŸ”΄ LIVE ]

2. APP LIKE

πŸ“±

<link rel="manifest" href="manifest.json" />
{
    "name": "Dev v Dev",
    "short_name": "Dev v Dev",
    "theme_color": "#hex",
    "background_color": "#hex",
    "display": "standalone",
    "orientation": "portrait",
    "scope": ".",
    "start_url": ".",
    "gcm_sender_id": "103953800507",
    "icons": [{
            "src": "image.jpg",
            "sizes": "72x72",
            "type": "image/png"
        },
        {
            /* ... */
        }
    ]
}

IOS

<meta name="apple-mobile-web-app-capable" content="yes">
<meta 
    name="apple-mobile-web-app-status-bar-style" 
    content="black-translucent">

<link rel="apple-touch-icon" sizes="72x72" href="icon.png">
<!-- include multiple so that the browser selects the best one -->


<link rel="apple-touch-startup-image" href="launch.png">
<link 
    rel="apple-touch-startup-image" 
    href="launch-portrait.png" 
    media="(orientation: portrait)">
<!-- include multiple so that the browser selects the best one -->

πŸ“’

3. Engaging

Server
service-worker

[ πŸ”΄ LIVE ]

πŸ€”So, is it fad or future?

cache all things !

push notifications !!

install !!!

Be responsible!

Cache

Push notifications & Installation banner

βœ… just what you absolutely need

βœ… clean up after yourself

βœ… after I've interacted multiple times with your app

Upgrade to a PWA if it truly brings value to your users!

but now what...?

Get busy PWAing!

Even just for educational purposes! ❀

Q&A #2

Further reading

Tools & other links

πŸ”¨ sw-precache

πŸ”¨ sw-toolbox

πŸ“š pwa.rocks

Β 

Thank you!

PWAs: fad or future?

By Pava

PWAs: fad or future?

Talk + mini workshop regarding PWAs.

  • 432
Loading comments...

More from Pava