Webpack: refactor sw.js

app/soapbox/main.js

@@ -5,30 +5,19 @@ import { default as Soapbox, store } from './containers/soapbox';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ready from './ready';
+import * as OfflinePluginRuntime from 'offline-plugin/runtime';
 
 const perf = require('./performance');
 
 function main() {
   perf.start('main()');
 
-  // if (window.history && history.replaceState) {
-  //   const { pathname, search, hash } = window.location;
-  //   const path = pathname + search + hash;
-  //   if (!(/^\/[$/]/).test(path)) {
-  //     console.log('redirecting you to hell');
-  //     history.replaceState(null, document.title, `${path}`);
-  //   }
-  // }
-
   ready(() => {
     const mountNode = document.getElementById('soapbox');
 
     ReactDOM.render(<Soapbox />, mountNode);
-    if (process.env.NODE_ENV === 'production') {
+    OfflinePluginRuntime.install();
-      // avoid offline in dev mode because it's harder to debug
+    store.dispatch(registerPushNotifications.register());
-      require('offline-plugin/runtime').install();
-      store.dispatch(registerPushNotifications.register());
-    }
     perf.stop('main()');
   });
 }

app/soapbox/service_worker/entry.js

@@ -1,10 +1,5 @@
-// import { freeStorage, storageFreeable } from '../storage/modifier';
 import './web_push_notifications';
 
-// function openSystemCache() {
-//   return caches.open('soapbox-system');
-// }
-
 function openWebCache() {
   return caches.open('soapbox-web');
 }
@@ -13,92 +8,12 @@ function fetchRoot() {
   return fetch('/', { credentials: 'include', redirect: 'manual' });
 }
 
-// const firefox = navigator.userAgent.match(/Firefox\/(\d+)/);
-// const invalidOnlyIfCached = firefox && firefox[1] < 60;
-
 // Cause a new version of a registered Service Worker to replace an existing one
 // that is already installed, and replace the currently active worker on open pages.
 self.addEventListener('install', function(event) {
   event.waitUntil(Promise.all([openWebCache(), fetchRoot()]).then(([cache, root]) => cache.put('/', root)));
 });
+
 self.addEventListener('activate', function(event) {
   event.waitUntil(self.clients.claim());
 });
-self.addEventListener('fetch', function(event) {
-  const url = new URL(event.request.url);
-
-  if (url.pathname === '/auth/sign_out') {
-    const asyncResponse = fetch(event.request);
-    const asyncCache = openWebCache();
-
-    event.respondWith(asyncResponse.then(response => {
-      if (response.ok || response.type === 'opaqueredirect') {
-        return Promise.all([
-          asyncCache.then(cache => cache.delete('/')),
-          indexedDB.deleteDatabase('soapbox'),
-        ]).then(() => response);
-      }
-
-      return response;
-    }));
-  } else if (
-    url.pathname.startsWith('/system') ||
-    url.pathname.startsWith('/api') ||
-    url.pathname.startsWith('/settings') ||
-    url.pathname.startsWith('/media') ||
-    url.pathname.startsWith('/admin') ||
-    url.pathname.startsWith('/about') ||
-    url.pathname.startsWith('/auth') ||
-    url.pathname.startsWith('/oauth') ||
-    url.pathname.startsWith('/invites') ||
-    url.pathname.startsWith('/pghero') ||
-    url.pathname.startsWith('/sidekiq') ||
-    url.pathname.startsWith('/filters') ||
-    url.pathname.startsWith('/tags') ||
-    url.pathname.startsWith('/emojis') ||
-    url.pathname.startsWith('/inbox') ||
-    url.pathname.startsWith('/accounts') ||
-    url.pathname.startsWith('/user') ||
-    url.pathname.startsWith('/users') ||
-    url.pathname.startsWith('/src') ||
-    url.pathname.startsWith('/public') ||
-    url.pathname.startsWith('/avatars') ||
-    url.pathname.startsWith('/authorize_follow') ||
-    url.pathname.startsWith('/media_proxy') ||
-    url.pathname.startsWith('/relationships')) {
-    //non-webapp routes
-  } else if (url.pathname.startsWith('/')) {
-    // : TODO : if is /web
-    const asyncResponse = fetchRoot();
-    const asyncCache = openWebCache();
-
-    event.respondWith(asyncResponse.then(
-      response => {
-        const clonedResponse = response.clone();
-        asyncCache.then(cache => cache.put('/', clonedResponse)).catch();
-        return response;
-      },
-      () => asyncCache.then(cache => cache.match('/'))));
-  } /* else if (storageFreeable && (ATTACHMENT_HOST ? url.host === ATTACHMENT_HOST : url.pathname.startsWith('/system/'))) {
-    event.respondWith(openSystemCache().then(cache => {
-      return cache.match(event.request.url).then(cached => {
-        if (cached === undefined) {
-          const asyncResponse = invalidOnlyIfCached && event.request.cache === 'only-if-cached' ?
-            fetch(event.request, { cache: 'no-cache' }) : fetch(event.request);
-
-          return asyncResponse.then(response => {
-            if (response.ok) {
-              cache
-                .put(event.request.url, response.clone())
-                .catch(()=>{}).then(freeStorage()).catch();
-            }
-
-            return response;
-          });
-        }
-
-        return cached;
-      });
-    }));
-  } */
-});

webpack/development.js

@@ -1,10 +1,11 @@
 // Note: You must restart bin/webpack-dev-server for changes to take effect
 console.log('Running in development mode'); // eslint-disable-line no-console
 
-const { resolve } = require('path');
+const { resolve, join } = require('path');
 const merge = require('webpack-merge');
 const sharedConfig = require('./shared');
 const { settings, output } = require('./configuration');
+const OfflinePlugin = require('offline-plugin');
 
 const watchOptions = {};
 
@@ -61,6 +62,24 @@ module.exports = merge(sharedConfig, {
     pathinfo: true,
   },
 
+  plugins: [
+    new OfflinePlugin({
+      publicPath: output.publicPath,
+      caches: {
+        main: [],
+        additional: [],
+        optional: [],
+      },
+      ServiceWorker: {
+        entry: join(__dirname, '../app/soapbox/service_worker/entry.js'),
+        cacheName: 'soapbox-dev',
+        output: '../sw.js',
+        publicPath: '/sw.js',
+      },
+      AppCache: false,
+    }),
+  ],
+
   devServer: {
     clientLogLevel: 'none',
     compress: settings.dev_server.compress,

webpack/production.js

@@ -1,7 +1,7 @@
 // Note: You must restart bin/webpack-dev-server for changes to take effect
 console.log('Running in production mode'); // eslint-disable-line no-console
 
-const { URL } = require('url');
+const path = require('path');
 const merge = require('webpack-merge');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const OfflinePlugin = require('offline-plugin');
@@ -10,22 +10,6 @@ const CompressionPlugin = require('compression-webpack-plugin');
 const { output } = require('./configuration');
 const sharedConfig = require('./shared');
 
-// eslint-disable-next-line no-unused-vars
-let attachmentHost;
-
-if (process.env.S3_ENABLED === 'true') {
-  if (process.env.S3_ALIAS_HOST || process.env.S3_CLOUDFRONT_HOST) {
-    attachmentHost = process.env.S3_ALIAS_HOST || process.env.S3_CLOUDFRONT_HOST;
-  } else {
-    attachmentHost = process.env.S3_HOSTNAME || `s3-${process.env.S3_REGION || 'us-east-1'}.amazonaws.com`;
-  }
-} else if (process.env.SWIFT_ENABLED === 'true') {
-  const { host } = new URL(process.env.SWIFT_OBJECT_URL);
-  attachmentHost = host;
-} else {
-  attachmentHost = null;
-}
-
 module.exports = merge(sharedConfig, {
   mode: 'production',
   devtool: 'source-map',
@@ -94,13 +78,13 @@ module.exports = merge(sharedConfig, {
         '**/*-webfont-*.svg',
         '**/*.woff',
       ],
-      // ServiceWorker: {
+      ServiceWorker: {
-      //   entry: `imports-loader?ATTACHMENT_HOST=>${encodeURIComponent(JSON.stringify(attachmentHost))}!${encodeURI(path.join(__dirname, '../app/soapbox/service_worker/entry.js'))}`,
+        entry: path.join(__dirname, '../app/soapbox/service_worker/entry.js'),
-      //   cacheName: 'soapbox',
+        cacheName: 'soapbox',
-      //   output: '../assets/sw.js',
+        output: '../sw.js',
-      //   publicPath: '/sw.js',
+        publicPath: '/sw.js',
-      //   minify: true,
+        minify: true,
-      // },
+      },
     }),
   ],
 });