Maxim Salnikov
@webmaxru
Products from the future
UI Engineer at ForgeRock
AJAX
Static
Dynamic
RWD
PWA
... attempts to combine features offered by most modern browsers with the benefits of mobile experience
... web apps that use the latest web technologies.
App
Service worker
self.addEventListener('install', (event) => {
// Put app's html/js/css to cache
})
self.addEventListener('activate', (event) => {
// Wipe previous version of app files from cache
})
self.addEventListener('fetch', (event) => {
if (event.request.url.indexOf('/api') != -1) {
event.respondWith(
// Network-First Strategy
)
} else {
event.respondWith(
// Cache-First Strategy
)
}
})
if fetch from network is successful
put response into cache
return response
else
if get from cache is successful
return response
else
return error
if get from cache is successful
return response
else
if fetch from network is successful
put response into cache
return response
else
return error
v1.0.0-beta.16 - Experimental service worker by the Angular Mobile team
# Install the Angular Service Worker
$ npm install --save @angular/service-worker
# Enable the SW registration + app shell in Angular CLI
$ ng set apps.0.serviceWorker=true
{
"static": {...},
"routing": {...},
"external": {...},
"dynamic": {...},
"push": {...}
}
$ ng build --prod
{
"static": {
"urls": {
"/index.html": "ae543...",
"/main.bundle.js": "9ff18...",
"/styles.bundle.css": "d6f44...",
"/assets/images/logo.png": "0e33a...",
...
}
}
}
{
"push": {
"showNotifications": true
}
}
# Install the Workbox CLI
$ npm install workbox-cli --global
# Generate a service worker with some smart defaults
$ workbox generate:sw
module.exports = {
"globDirectory": "dist/",
"globPatterns": [
"**/*.{txt,png,ico,html,js,json,css}"
],
"swDest": "dist/sw-default.js",
"globIgnores": [
"3rdpartylicenses.txt"
]
};
importScripts('workbox-sw.prod.v2.0.0.js');
const fileManifest = [
{
"url": "index.html",
"revision": "ab950af06a80f755cd4bc1e34b3d6641"
},
...
];
const workboxSW = new self.WorkboxSW();
workboxSW.precache(fileManifest);
"assets": [
{
"glob": "workbox-sw.dev.v2.0.0.js",
"input": "../node_modules/workbox-sw/build/...",
"output": "./"
},
...
]
$ npm install --save workbox-sw
$ npm install --save-dev workbox-build
importScripts('./workbox-sw.dev.v2.0.0.js')
const workboxSW = new WorkboxSW()
workboxSW.precache([])
const apiStrategy = workboxSW.strategies.networkFirst()
workboxSW.router.registerRoute(
/(http[s]?:\/\/)?([^\/\s]+\/)(api)/,
apiStrategy
)
const swBuild = require('workbox-build')
swBuild
.injectManifest({
globDirectory: 'dist/',
globPatterns: [
'**/*.{txt,png,ico,html,js,json,css}'
],
globIgnores: ['3rdpartylicenses.txt'],
swSrc: './src/my-serviceworker.js',
swDest: './dist/my-serviceworker.js'
})
$ npm install --save workbox-routing
$ npm install --save workbox-runtime-caching
$ npm install --save workbox-background-sync
importScripts('./workbox-routing.dev.v2.0.0.js')
importScripts('./workbox-runtime-caching.dev.v2.0.0.js')
importScripts('./workbox-background-sync.dev.v2.0.0.js')
"assets": [
...
]
backgroundSync.QueuePlugin
runtimeCaching.RequestWrapper
runtimeCaching.NetworkOnly
routing.RegExpRoute
routing.Router
workboxSW
Flexibility
Automation
Stability