Service Worker and Web Worker workarounds

src/index.ts

@@ -1,18 +1,23 @@
 declare module '@webcomponents/custom-elements';
 
+// Patch Worker to ignore `importScripts("x.css")` generated by Parcel:
+const W = self.Worker;
+self.Worker = function (url: string | URL, options?: WorkerOptions) {
+  const code = `importScripts = (function(){return this.apply(self,[].slice.call(arguments).filter(function(x){return !/\\.css$/i.test(x)}))}).bind(importScripts)\nimportScripts(${JSON.stringify(url)})`;
+  return new W(URL.createObjectURL(new Blob([code], { type: 'text/javascript' })), options);
+} as any as (typeof Worker);
+
 function init() {
   require('./init-app.tsx');
 }
 
 if (!('customElements' in self)) {
-  import(
-    /* webpackChunkName: "wc-polyfill" */
-    '@webcomponents/custom-elements').then(init);
+  import('@webcomponents/custom-elements').then(init);
 } else {
   init();
 }
 
-if (typeof PRERENDER === 'undefined') {
+if (typeof process.env.PRERENDER === 'undefined') {
   // Determine the current display mode.
   let displayMode = 'browser';
   const mqStandAlone = '(display-mode: standalone)';

src/lib/sw-bridge.ts

@@ -60,12 +60,14 @@ export function getSharedImage(): Promise<File> {
 /** Set up the service worker and monitor changes */
 export async function offliner(showSnack: SnackBarElement['showSnackbar']) {
   // This needs to be a typeof because Webpack.
-  if (typeof PRERENDER === 'boolean') return;
+  if (process.env.PRERENDER) return;
 
   if (process.env.NODE_ENV === 'production') {
     navigator.serviceWorker.register('../sw');
   }
 
+  if (!navigator.serviceWorker) return;
+
   const hasController = !!navigator.serviceWorker.controller;
 
   // Look for changes in the controller