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