One PWA Solution

Maxim Salnikov

@webmaxru

Many Frameworks –

One PWA Solution Maxim Salnikov @webmaxru Many Frameworks –

Many frameworks - one PWA solution

By Maxim Salnikov

Many frameworks - one PWA solution

There is no doubt that 2018 is the year when Progressive Web Apps will get the really broad adoption and recognition by all the involved parties: browser vendors (finally, all the major ones), developers, users. How does PWA concept play with YOUR favorite framework? React, Angular, Vue, #FrameworkOfTheWeek? In my technical session we’ll check what major frameworks creators prepared for us regarding scaffolding / adding PWA features (spoiler: only basic features), and switch to Workbox. We’ll see that Workbox is a library providing many sophisticated service worker features in a simple, developer-friendly form. Also, we’ll talk about another advantage of Workbox - the flexibility: you build your own service worker and automate some tasks using this library. As the outcome, you’ll be ready to make a production-ready PWA from the app built on any framework.

6 years ago
3,646

	self.addEventListener('install', event => {
	// Use Cache API to cache html/js/css
	})

	self.addEventListener('activate', event => {
	// Clean the cache from the obsolete versions
	})

	self.addEventListener('fetch', event => {
	// Serve assets from cache or network
	})

	self.addEventListener('install', event => {
	// Use Cache API to cache html/js/css
	})

	self.addEventListener('activate', event => {
	// Clean the cache from the obsolete versions
	})

	self.addEventListener('fetch', event => {
	// Serve assets from cache or network
	})

	self.addEventListener('install', event => {
	// Use Cache API to cache html/js/css
	})

	self.addEventListener('activate', event => {
	// Clean the cache from the obsolete versions
	})

	self.addEventListener('fetch', event => {
	// Serve assets from cache or network
	})

	self.addEventListener('install', event => {
	// Use Cache API to cache html/js/css
	})

	self.addEventListener('activate', event => {
	// Clean the cache from the obsolete versions
	})

	self.addEventListener('fetch', event => {
	// Serve assets from cache or network
	})

	...
	var workboxConfig = {
	globDirectory: 'dist/',
	globPatterns: [
	'*/.{txt,png,ico,html,js,json,css}'
	],
	swSrc: 'src/workbox-service-worker.js',
	swDest: 'dist/sw.js'
	}
	...

	// Importing Workbox itself from Google CDN
	importScripts('https://googleapis.com/.../workbox-sw.js');

	// Precaching and setting up the routing
	workbox.precaching.precacheAndRoute([])

	// We will use injectManifest mode
	const {injectManifest} = require('workbox-build')

	// Sample configuration with the basic options
	var workboxConfig = {...}

	// Calling the method and output the result
	injectManifest(workboxConfig).then(({count, size}) => {
	console.log(`Generated ${workboxConfig.swDest},
	which will precache ${count} files, ${size} bytes.`)
	})

	// App shell
	workbox.precaching.precacheAndRoute([])

	// Runtime caching
	workbox.routing.registerRoute(
	/(http[s]?:\/\/)?([^\/\s]+\/)api/,
	workbox.strategies.networkFirst()
	)

	// Push notifications
	self.addEventListener('push', (event) => {...})

	if ('serviceWorker' in navigator) {
	navigator.serviceWorker
	.register('/service-worker.js')
	}

	import { Workbox } from 'workbox-window'
	// For Angular
	platformBrowserDynamic().bootstrapModule(AppModule)
	.then( () => {
	if ('serviceWorker' in navigator) {
	const wb = new Workbox('service-worker.js');
	// Event listeners...
	wb.register();
	}
	})

	wb.addEventListener('installed', event => {
	if (event.isUpdate) {
	// Show "Newer version is available. Refresh?" prompt
	} else {
	// Optionally: show "The app is offline-ready" toast
	}
	});

One PWA Solution

Many Frameworks –

Many frameworks - one PWA solution

More from Maxim Salnikov