5. WHAT ARE PWA?
FAST - Respond quickly to user interactions with
silky smooth animations and no janky scrolling.
RELIABLE - Load instantly and never show the
downasaur, even in uncertain network
conditions.
ENGAGING - Feel like a natural app on the
device, with an immersive user experience.
11. OFFLINE PROGRESSIVE WEB APPLICATIONS
SERVICE WORKERS
▸ Runs separately from the main browser thread
▸ Designed to be fully asynchronous
▸ Programmable network proxy
▸ Runs only over HTTPS
▸ Becomes idle when not in use and restarts when it's next needed.
12. OFFLINE PROGRESSIVE WEB APPLICATIONS
ADVANCED FEATURES
▸ Notifications API - Display and interact with notifications using the operating
system's native notification system.
▸ Push API: Subscribe to a push service and receive push messages. Push
messages are delivered to a service worker, which can use the information in
the message to update the local state or display a notification to the user.
Because service workers run independently of the main app, they can receive
and display notifications even when the browser is not running.
13. OFFLINE PROGRESSIVE WEB APPLICATIONS
ADVANCED FEATURES
▸ Background Sync API: Defer actions until the user has stable connectivity. This
is useful to ensure that whatever the user wants to send is actually sent. This API
also allows servers to push periodic updates to the app so the app can update
when it's next online.
▸ Channel Messaging API: Lets web workers and service workers communicate
with each other and with the host application.
15. OFFLINE PROGRESSIVE WEB APPLICATIONS
1. REGISTRATION
▸ The scope of the service worker determines which files the service worker
controls. The default scope is the location of the service worker file, and extends
to all directories below. An arbitrary scope can also be set by passing in an
additional parameter when registering.
16. OFFLINE PROGRESSIVE WEB APPLICATIONS
2. INSTALLATION
▸ This occurs if the service worker is considered to be new by the browser.
▸ During the install, service workers can precache parts of a web app so that it
loads instantly the next time a user opens it.
17. OFFLINE PROGRESSIVE WEB APPLICATIONS
3. ACTIVATION
▸ If there are any open pages controlled by the previous service worker, the new service
worker enters a waiting state.
▸ The new service worker only activates when there are no longer any pages loaded
that are still using the old service worker. This ensures that only one version of the
service worker is running at any given time.
▸ When the new service worker activates, an activate event is triggered in the activating
service worker. This event listener is a good place to clean up outdated caches.
18. OFFLINE PROGRESSIVE WEB APPLICATIONS
ADDITIONAL INFORMATION
‣ The clients.claim() method allows an active service worker take control of
uncontrolled clients.
▸ skipWaiting() - kill existing service workers and activate the new service worker.
‣ The clients.matchAll() method resolves to an array of all controlled clients.
‣ A client can access its controller by navigator.serviceWorker.controller
‣ Messages between service worker and client are send using .postMessage()
method (used on client or controller respectively)
19. OFFLINE PROGRESSIVE WEB APPLICATIONS
OTHER EVENTS THAT SW CAN LISTEN FOR
▸ message - service worker can receive information from other scripts
▸ fetch - intercept requests.
▸ push - when a (Web Push Protocol) message is received.
▸ sync - ask for an event to be fired when the user has connectivity
(https://wicg.github.io/BackgroundSync/spec/)
20. OFFLINE PROGRESSIVE WEB APPLICATIONS
SERVICE WORKER UPDATE TRIGGERING
▸ On navigation to an in-scope page.
▸ On functional events such as push and sync, unless there's been an update
check within the previous 24 hours.
▸ On calling .register() only if the service worker URL has changed.
25. OFFLINE PROGRESSIVE WEB APPLICATIONS
REQUESTING PERMISSIONS FOR NOTIFICATION API
▸ Only prompt when it's obvious to the user why you need extra privileges
27. OFFLINE PROGRESSIVE WEB APPLICATIONS
NOTIFICATION OPTIONS
▸ The BODY option adds a main description to the notification. It should give the user
enough information to decide how to act on it.
▸ The ICON option attaches an image to make the notification more visually appealing,
but also more relevant to the user.
▸ The VIBRATE option specifies a vibration pattern for a phone receiving the notification.
▸ The DATA option attaches custom data to the notification, so that the service worker
can retrieve it when the user interacts with the notification. For instance, adding a
unique "id" or "key" option to the data allows us to determine which notification was
clicked when the service worker handles the click event.
31. OFFLINE PROGRESSIVE WEB APPLICATIONS
CACHE API
▸ Lets us create stores of responses keyed by request.
▸ Exposed on the window so it accessed from anywhere in your scripts via "caches".
▸ waitUntil extends the lifetime of the
install event until the passed promise
resolves successfully. If the promise
rejects, the installation is considered
a failure and this service worker is
abandoned (if an older version is
running, it stays active).
32. OFFLINE PROGRESSIVE WEB APPLICATIONS
CACHE FALLING BACK TO THE NETWORK
▸ To serve content from the cache and make your app available offline you need
to intercept network requests and respond with files stored in the cache.
33. OFFLINE PROGRESSIVE WEB APPLICATIONS
ALL APPROACHES
▸ cache only
▸ network only
▸ cache falling back to network
▸ network falling back to cache
▸ cache then network
37. OFFLINE PROGRESSIVE WEB APPLICATIONS
INDEXEDDB API
▸ IndexedDB is a low-level API for client-side storage of significant amounts of
structured data, including files/blobs.
▸ This API uses indexes to enable high performance searches of this data.
40. OFFLINE PROGRESSIVE WEB APPLICATIONS
INDEXEDDB TERMS
▸ Database - This is the highest level of IndexedDB. It contains the object stores, which in turn contain the data you
would like to persist.
▸ Object store - An object store is an individual bucket to store data. You can think of object stores as being similar
to tables in traditional relational databases.
▸ Index - An Index is a kind of object store for organizing data in another object store (called the reference object
store) by an individual property of the data. The index is used to retrieve records in the object store by this
property. For example, if you're storing people, you may want to fetch them later by their name, age, or favorite
animal.
▸ Operation - An interaction with the database.
▸ Transaction - A transaction is wrapper around an operation, or group of operations, that ensures database
integrity. If one of the actions within a transaction fail, none of them are applied and the database returns to the
state it was in before the transaction began.
44. POUCHDB
POUCHDB IS AN OPEN-SOURCE JAVASCRIPT DATABASE INSPIRED
BY APACHE COUCHDB THAT IS DESIGNED TO RUN WELL WITHIN
THE BROWSER.
POUCHDB WAS CREATED TO HELP WEB DEVELOPERS BUILD
APPLICATIONS THAT WORK AS WELL OFFLINE AS THEY DO
ONLINE.
IT ENABLES APPLICATIONS TO STORE DATA LOCALLY WHILE
OFFLINE, THEN SYNCHRONIZE IT WITH COUCHDB
46. OFFLINE PROGRESSIVE WEB APPLICATIONS
APPLICATION MANIFEST JSON
▸ Web app manifests provide the ability to save a site bookmark to a device's
home screen. When a site is launched this way:
▸ It has a unique icon and name so that users can distinguish it from other
sites.
▸ It displays something to the user while resources are downloaded or
restored from cache.
▸ It provides default display characterstics to the browser to avoid too abrupt
transition when site resources become available.
50. OFFLINE PROGRESSIVE WEB APPLICATIONS
WEB PUSH API
1. A device downloads your web app containing an
already created publicKey, referred to in scripts
as the applicationServerKey. Your web app
installs a service worker.
2. During the subscription flow the browser
contacts the messaging server to create a new
subscription and returns it to the app. Note: You
don't need to know the URL of the message
server. Each browser vendor manages it's own
message server for its browser.
3. After the subscription flow, your app passes a
subscription object back to your app server.
4. At some later point, your app server sends a
message to the messaging server, which
forwards it to the recipient.
51. WE DON'T NEED FIREBASE / GOOGLE CLOUD
MESSAGING SENDER ID ( GCM_SENDER_ID )
ANYMORE!
52. OFFLINE PROGRESSIVE WEB APPLICATIONS
VOLUNTARY APPLICATION SERVER IDENTIFICATION (VAPID)
▸ Your application server creates a public/private key pair. The public key is given
to your web app.
▸ When the user elects to receive pushes, add the public key to the subscribe()
call's options object.
▸ When your app server sends a push message, include a signed JSON Web
Token along with the public key.
53. OFFLINE PROGRESSIVE WEB APPLICATIONS
OTHER SERVICE WORKER APIS
▸ Payment Request API
▸ Credential Management API
56. OFFLINE PROGRESSIVE WEB APPLICATIONS
SERVER SIDE RENDERING
▸ First Meaningful Paint - The time at which the user feels that the primary
content of the page is visible.
▸ Rendering front-end JavaScript applications on the server.