in less than 3 hours
Maxim Salnikov
@webmaxru
Let's make a web app progressive
Maxim Salnikov
-
Google Dev Expert / Microsoft MVP
-
Angular Oslo / PWA Oslo meetups organizer
-
ngVikings / Mobile Era conferences organizer
Products from the future
Full-Stack Engineer at ForgeRock
-
100% community-driven event from developers for developers
-
Call for Papers is open
-
Blind Bird tickets are on sale (1.800,-)
November 1-2, Oslo, Norway
Mobile Era 2018
- iOS / Android
- IoT / Hardware
- Mobile web / PWA
- Mobile UX / Accessibility
- Cross-platform / JS-to-Native
Progressive Web App
... attempts to combine features offered by most modern browsers with the benefits of mobile experience
... web apps that use the latest web technologies.
10 characteristics
-
Progressive
-
Discoverable
-
Linkable
-
App-like
-
Responsive
-
Connectivity-independent
-
Re-engageable
-
Installable
-
Fresh
-
Safe
Service worker
Web App Manifest
Know your toolset
-
Service Worker API
-
Cache API
-
IndexedDB
-
Fetch
-
Clients API
-
Broadcast Channel API
-
Push API
-
Notifications API
-
Local Storage
-
Session Storage
-
XMLHttpRequest
-
DOM access
-
Make some features of the web app function offline
-
Improve online performance by reducing network requests
Service Worker API
-
Receiving push events and displaying notifications
-
Clients (tabs) messaging
-
Job scheduling (soon)
Not only networking
Service Worker 101
Wait a sec!
-
1200+ developers
-
Major browsers/frameworks/libs reps
Logically
Physically
JS
-file
App
Service worker
Lifecycle
'install'
Parsed
Installing
Activating
Redundant
'activate'
Waiting
Active
App shell
My App
Managing cache
self.addEventListener('install', (event) => {
// Put app's html/js/css to cache
})self.addEventListener('activate', (event) => {
// Wipe previous version of app files from cache
})In the real world
-
Can't add opaque responses directly
-
Redirected requests should be managed
-
Always creating a new version of cache and deleting the old one is not optimal
-
Control over cache size is required
-
Cache invalidation for runtime caching is complex
-
...
Intercepting requests
self.addEventListener('fetch', (event) => {
if (event.request.url.indexOf('/api') != -1) {
event.respondWith(
// Network-First Strategy
)
} else {
event.respondWith(
// Cache-First Strategy
)
}
})In the real world
-
All kinds of fallbacks needed for the strategies
-
There are more complex strategies like Stale-While-Revalidate
-
Good to have routing
-
Good to have the possibility to provide some extra settings for different resource groups
-
...
Pros
-
Great flexibility!
Cons
-
Great responsibility!
-
Implementing complex algorithms
-
Following specifications updates
-
Handling edge cases
-
Adopting best practices
-
Focusing on YOUR task
Tools help with
App shell
Runtime caching
Offline GA
Replay failed requests
Broadcast updates
Build integrations
Flexibility
Automation
Stability
Questions?
Let's make a web app progressive in less than 3 hours
By Maxim Salnikov
Let's make a web app progressive in less than 3 hours
It eventually happened: Progressive Web Applications took a worthy place in the modern web landscape, and there is no more need to convince developers why to go for performant, reliable, and engaging apps. Most likely, your web application is not the exception: adding PWA features is getting it to the next level of user experience. In our 100% hands-on session, we'll take a regular app and make it progressive. We'll create and register Service Worker, build App Shell, generate Application Manifest, send Push Notifications.We'll get a practical experience with Workbox - a PWA library, allowing us to perform these tasks really fast. The result of our workshop: fast, installable, offline-capable, mobile-network-friendly, re-engageable app.
