Going Offline
Progressive Web Applications (PWA)
& Service Workers
Maslovskiy Evgeniy (@spleshka) - CTO @ SystemSeed
What is PWA?
A website that
looks & feels
like a mobile native app
Mobile app differences
-
Installable
-
Splash screen
-
Opens fast
-
No browser involved
-
Works offline
-
Native features (i.e. push notifications)
Web can do it ALL
today
*
* Some features have limited browsers support
SHOW TIME
Key technologies
Manifest.json
Add to the website
Validate
Hello, Web App
Service Workers
A special javascript code
that installs into a browser
to proxy all requests
Service Workers
A special javascript code (1)
that installs into a browser (2)
and proxies all requests (3)
Special javascript
Still javascript
Special javascript
We define what's inside
What makes it so special?
Installs into a browser
Normal way
Installs into a browser
Normal way
Installs into a browser
Normal way
Installs into a browser
Normal way
Installs into a browser
Normal way
Installs into a browser
With Service Worker script
Installs into a browser
With Service Worker script
Installs into a browser
With Service Worker script
Installs into a browser
With Service Worker script
Proxies all requests
Without Service Workers
Proxies all requests
With Service Workers installed & activated
Creating a service worker
Tell a browser that it exists (register it)
Creating a service worker
Tell a browser that it exists (register it)
Creating a service worker
/sw.js
Proxy logic (example)
Proxy logic (example)
no cache
Proxy logic (example)
Proxy logic (example)
no cache
Proxy logic (example)
Proxy logic (example)
no cache
Proxy logic (example)
Proxy logic (example)
no cache
Proxy logic (example)
Proxy logic (example)
no cache
Proxy logic (example)
Proxy logic (example)
no cache
Proxy logic (example)
Proxy logic (example)
with cache
Proxy logic (example)
Proxy logic (example)
with cache
Proxy logic (example)
Proxy logic (example)
with cache
Proxy logic (example)
Proxy logic (example)
with cache
Proxy logic (example)
Proxy logic (example)
with cache
Proxy logic (example)
Proxy logic (example)
with cache
Hello, Offline-first
Twitter offline-first example
Twitter offline-first example
Pre-caching
Pre-caching
Registration
Pre-caching
Installation
Pre-caching
Installation
Pre-caching
Installation
Pre-caching
Installed
So, what is PWA?
A website that
looks & feels
like a mobile native app
A website that
looks & feels
like a mobile native app
So, what is PWA?
A website that
runs on https
with manifest.json and
registered Service Worker
So, what is PWA?
Can Drupal do it?
Final notes
Web jumps into Mobile market
Strong selling point
1 PWA VS 1 Website + 1 Mobile app
Technical notes
Demo page
https://spleshka.github.io
Repository
github.com/spleshka/spleshka.github.io
