Safari supports service workers now. It's time to add them.

packages/gallery/package.json

@@ -30,11 +30,10 @@
 		"semantic-ui-site": "^2.2.12",
 		"style-loader": "^0.19.0",
 		"styletron": "^2.5.1",
-		"styletron-utils": "^2.5.4",
+		"styletron-utils": "^2.5.4"
-		"webpack": "~3.8.1",
-		"webpack-dev-server": "~2.9.2"
 	},
 	"devDependencies": {
-		"webpack-dev-server": "~2.4.2"
+		"webpack": "~3.8.1",
+		"webpack-dev-server": "~2.9.2"
 	}
 }

packages/gallery/src/app.js

@@ -4,6 +4,7 @@ import * as styles from './app.css';
 import { GalleryView } from './interface/gallery.js';
 import { router } from './services/router.js';
 import { streamConfig } from './utils/event.js';
+import { log } from './services/console.js';
 
 import { EventEmitter } from 'events';
 
@@ -11,8 +12,19 @@ EventEmitter.defaultMaxListeners = 1000; // https://github.com/pouchdb/pouchdb/i
 
 config({ stream: streamConfig });
 
+function go() {
 	// Attach our root view to the DOM
 	createView(GalleryView, {}).mount(document.body);
 
 	// Start the router
 	router.start('home');
+}
+
+if ('serviceWorker' in navigator) {
+	navigator.serviceWorker
+		.register('/assets/sw.bundle.js', { scope: '/' })
+		.then(go)
+		.catch(go);
+} else {
+	go();
+}

packages/gallery/src/sw.js

@@ -0,0 +1,35 @@
+import { FileType } from './data/file.js';
+
+self.addEventListener('fetch', event => {
+	const requestUrl = new URL(event.request.url);
+
+	if (requestUrl.pathname && requestUrl.pathname.startsWith('/file/')) {
+		event.respondWith(
+			FileType.getFromURL(requestUrl.pathname)
+				.then(
+					data =>
+						data
+							? new Response(data, {
+									status: 200,
+									statusText: 'OK',
+									headers: {
+										'Content-Type': data.mimetype
+									}
+							  })
+							: new Response(null, {
+									status: 404,
+									statusText: 'NOT FOUND',
+									headers: {}
+							  })
+				)
+				.catch(
+					() =>
+						new Response(null, {
+							status: 404,
+							statusText: 'NOT FOUND',
+							headers: {}
+						})
+				)
+		);
+	}
+});

packages/gallery/webpack.config.js

@@ -5,7 +5,8 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 module.exports = {
 	context: path.resolve(__dirname, './src'),
 	entry: {
-		app: './app.js'
+		app: './app.js',
+		sw: './sw.js'
 	},
 	output: {
 		path: path.resolve(__dirname, './dist'),
@@ -13,7 +14,10 @@ module.exports = {
 		publicPath: '/assets'
 	},
 	devServer: {
-		contentBase: path.resolve(__dirname, './src')
+		contentBase: path.resolve(__dirname, './src'),
+		headers: {
+			'Service-Worker-Allowed': '/'
+		}
 	},
 	module: {
 		rules: [
@@ -27,6 +31,7 @@ module.exports = {
 		]
 	},
 	plugins: [
+		new webpack.optimize.CommonsChunkPlugin({}),
 		new webpack.DefinePlugin({
 			__DEV__: true
 		}),