Cedric Poilly
*
PWAs: Beyond
the
Service Worker
About Me
Front-End Consultant & Coach
JavaScript Consultant at
THE RED PANDAS
About Me
Front-End Consultant & Coach
JavaScript Consultant at
About Me
Front-End Coders
MSCC
GDG Mauritius
PWAs: Beyond
the
Service Worker
Status Quo
Installable Web Apps
{
"name": "selfchat",
"short_name": "selfchat",
"icons": [
{
"src": "./img/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./img/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#0787ff",
"theme_color": "#0787ff",
...
}
manifest.json
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
self.addEventListener("install", async () => {
await self.skipWaiting();
console.log("Skipped wating. Service worker has taken control.");
});
service-worker.js
Works offline. ✌🏼
Default offline content
Cached content
Do More?
Yes We Can!
How?
SelfChat
Anxiety | Depression
Phone | Chat
Journaling | Self talk
Instant Access
Brief Thoughts
Self "messaging" app
SelfChat
No back-end
No web sockets
IDB
Web Workers
VueGAPI
Google Sheets
as a BackEnd
Full access & ownership of your data
SelfChat
DEMO
Web Share Target API
Web Share Target API
Web Share Target API
DEMO (Video)
Improvements
Render the content ?
Make links clickable ?
Do more?
Yes We MUST!
How?
Smoother UX with Web Workers
Offload JS work to other thread(s)
Web Workers
in Production
> Webpack <
Comlink
Comlink in SelfChat
Promise-Worker
Promise-Worker
in SelfChat
Recap
Use new APIs when it makes sense
Apply appropriate techniques for a smooth experience
Thank You
Questions? 🤷🏼♂️
PWAs: Beyond The Service Worker
By Cedric Poilly
PWAs: Beyond The Service Worker
PWAs are everywhere now or should we say websites having Service Worker are. Yet there is more to a web app than just having a service worker. In this sessions we will touch on features specific to PWAs such as the Web Share Target API, which allows users to share content to your app. We will also talk about more widely available yet important web features, like use of Web Workers to help make the app feel more responsive.
