remove radar-worker and offscreen canvas to make things easier for ios #74

server/scripts/modules/radar-processor.mjs

@@ -1,10 +1,11 @@
 import { removeDopplerRadarImageNoise } from './radar-utils.mjs';
 import { RADAR_FULL_SIZE, RADAR_FINAL_SIZE } from './radar-constants.mjs';
 
-onmessage = async (e) => {
+// process a single radar image and place it on the provided canvas
+const processRadar = async (data) => {
 	const {
 		url, RADAR_HOST, OVERRIDES, radarSourceXY,
-	} = e.data;
+	} = data;
 
 	// get the image
 	const modifiedRadarUrl = OVERRIDES.RADAR_HOST ? url.replace(RADAR_HOST, OVERRIDES.RADAR_HOST) : url;
@@ -19,7 +20,9 @@ onmessage = async (e) => {
 	};
 
 	// create radar context for manipulation
-	const radarCanvas = new OffscreenCanvas(RADAR_FULL_SIZE.width, RADAR_FULL_SIZE.height);
+	const radarCanvas = document.createElement('canvas');
+	radarCanvas.width = RADAR_FULL_SIZE.width;
+	radarCanvas.height = RADAR_FULL_SIZE.height;
 	const radarContext = radarCanvas.getContext('2d');
 	radarContext.imageSmoothingEnabled = false;
 
@@ -37,7 +40,9 @@ onmessage = async (e) => {
 	radarContext.drawImage(radarImgElement, 0, 0, RADAR_FULL_SIZE.width, RADAR_FULL_SIZE.height);
 
 	// crop the radar image without scaling
-	const croppedRadarCanvas = new OffscreenCanvas(radarSource.width, radarSource.height);
+	const croppedRadarCanvas = document.createElement('canvas');
+	croppedRadarCanvas.width = radarSource.width;
+	croppedRadarCanvas.height = radarSource.height;
 	const croppedRadarContext = croppedRadarCanvas.getContext('2d');
 	croppedRadarContext.imageSmoothingEnabled = false;
 	croppedRadarContext.drawImage(radarCanvas, radarSource.x, radarSource.y, croppedRadarCanvas.width, croppedRadarCanvas.height, 0, 0, croppedRadarCanvas.width, croppedRadarCanvas.height);
@@ -46,12 +51,14 @@ onmessage = async (e) => {
 	removeDopplerRadarImageNoise(croppedRadarContext);
 
 	// stretch the radar image
-	const stretchCanvas = new OffscreenCanvas(RADAR_FINAL_SIZE.width, RADAR_FINAL_SIZE.height);
+	const stretchCanvas = document.createElement('canvas');
+	stretchCanvas.width = RADAR_FINAL_SIZE.width;
+	stretchCanvas.height = RADAR_FINAL_SIZE.height;
 	const stretchContext = stretchCanvas.getContext('2d', { willReadFrequently: true });
 	stretchContext.imageSmoothingEnabled = false;
 	stretchContext.drawImage(croppedRadarCanvas, 0, 0, radarSource.width, radarSource.height, 0, 0, RADAR_FINAL_SIZE.width, RADAR_FINAL_SIZE.height);
 
-	const stretchedRadar = stretchCanvas.transferToImageBitmap();
+	return stretchCanvas.toDataURL();
-
-	postMessage(stretchedRadar, [stretchedRadar]);
 };
+
+export default processRadar;

server/scripts/modules/radar.mjs

@@ -5,30 +5,13 @@ import { text } from './utils/fetch.mjs';
 import WeatherDisplay from './weatherdisplay.mjs';
 import { registerDisplay, timeZone } from './navigation.mjs';
 import * as utils from './radar-utils.mjs';
-import { version } from './progress.mjs';
 import setTiles from './radar-tiles.mjs';
-
+import processRadar from './radar-processor.mjs';
-// TEMPORARY fix to disable radar on ios safari. The same engine (webkit) is
-// used for all ios browers (chrome, brave, firefox, etc) so it's safe to skip
-// any subsequent narrowing of the user-agent.
-const isIos = /iP(ad|od|hone)/i.test(window.navigator.userAgent);
-// NOTE: iMessages/Messages preview is provided by an Apple scraper that uses a
-// user-agent similar to: `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1)
-// AppleWebKit/601.2.4 (KHTML, like Gecko) Version/9.0.1 Safari/601.2.4
-// facebookexternalhit/1.1 Facebot Twitterbot/1.0`. There is currently a bug in
-// Messages macos/ios where a constantly crashing website seems to cause an
-// entire Messages thread to permanently lockup until the individual website
-// preview is deleted! Messages ios will judder but allows the message to be
-// deleted eventually. Messages macos beachballs forever and prevents the
-// successful deletion. See
-// https://github.com/netbymatt/ws4kp/issues/74#issuecomment-2921154962 for more
-// context.
-const isBot = /twitterbot|Facebot/i.test(window.navigator.userAgent);
 
 const RADAR_HOST = 'mesonet.agron.iastate.edu';
 class Radar extends WeatherDisplay {
 	constructor(navId, elemId) {
-		super(navId, elemId, 'Local Radar', !isIos && !isBot);
+		super(navId, elemId, 'Local Radar');
 
 		this.okToDrawCurrentConditions = false;
 		this.okToDrawCurrentDateTime = false;
@@ -69,12 +52,6 @@ class Radar extends WeatherDisplay {
 			return;
 		}
 
-		// get the workers started
-		if (!this.workers) {
-			// get some web workers started
-			this.workers = (new Array(this.dopplerRadarImageMax)).fill(null).map(() => radarWorker());
-		}
-
 		const baseUrl = `https://${RADAR_HOST}/archive/data/`;
 		const baseUrlEnd = '/GIS/uscomp/?F=0&P=n0r*.png';
 		const baseUrls = [];
@@ -134,8 +111,8 @@ class Radar extends WeatherDisplay {
 		});
 
 		// Load the most recent doppler radar images.
-		const radarInfo = await Promise.all(urls.map(async (url, index) => {
+		const radarInfo = await Promise.all(urls.map(async (url) => {
-			const processedRadar = await this.workers[index].processRadar({
+			const processedRadar = await processRadar({
 				url,
 				RADAR_HOST,
 				OVERRIDES,
@@ -156,15 +133,7 @@ class Radar extends WeatherDisplay {
 				zone: 'UTC',
 			}).setZone(timeZone());
 
-			const onscreenCanvas = document.createElement('canvas');
+			const elem = this.fillTemplate('frame', { map: { type: 'img', src: processedRadar } });
-			onscreenCanvas.width = processedRadar.width;
-			onscreenCanvas.height = processedRadar.height;
-			const onscreenContext = onscreenCanvas.getContext('bitmaprenderer');
-			onscreenContext.transferFromImageBitmap(processedRadar);
-
-			const dataUrl = onscreenCanvas.toDataURL();
-
-			const elem = this.fillTemplate('frame', { map: { type: 'img', src: dataUrl } });
 			return {
 				time,
 				elem,
@@ -200,33 +169,5 @@ class Radar extends WeatherDisplay {
 	}
 }
 
-// create a radar worker with helper functions
-const radarWorker = () => {
-	// create the worker
-	const worker = new Worker(`/resources/radar-worker.mjs?_=${version()}`, { type: 'module' });
-
-	const processRadar = (data) => new Promise((resolve, reject) => {
-		// prepare for done message
-		worker.onmessage = (e) => {
-			if (e?.data instanceof Error) {
-				reject(e.data);
-			} else if (e?.data instanceof ImageBitmap) {
-				resolve(e.data);
-			}
-		};
-
-		// start up the worker
-		worker.postMessage(data);
-	});
-
-	// return the object
-	return {
-		processRadar,
-	};
-};
-
 // register display
-// TEMPORARY: except on IOS and bots
+registerDisplay(new Radar(11, 'radar'));
-if (!isIos && !isBot) {
-	registerDisplay(new Radar(11, 'radar'));
-}