Failed to load the script unexpectedly回避

sw.jsとlib.tsを分離してみた

gulpfile.js

@@ -49,8 +49,14 @@ gulp.task('build:backend:style', () => {
 		.pipe(gulp.dest('./packages/backend/built/server/web/'));
 });
 
+gulp.task('build:sw', () => {
+	return gulp.src(['./packages/sw/src/sw.js'])
+		.pipe(replace('VERSION', meta.version))
+		.pipe(gulp.dest('./built/_sw_dist_/'));
+});
+
 gulp.task('build', gulp.parallel(
-	'copy:client:locales', 'copy:backend:views', 'build:backend:script', 'build:backend:style', 'copy:client:fonts'
+	'copy:client:locales', 'copy:backend:views', 'build:backend:script', 'build:backend:style', 'copy:client:fonts', 'build:sw'
 ));
 
 gulp.task('default', gulp.task('build'));

packages/backend/src/server/web/index.ts

@@ -100,7 +100,12 @@ router.get('/twemoji/(.*)', async ctx => {
 
 // ServiceWorker
 router.get('/sw.js', async ctx => {
-	await send(ctx as any, `/sw.${config.version}.js`, {
+	await send(ctx as any, `/sw.js`, {
+		root: swAssets
+	});
+});
+router.get(`/sw-lib.${config.version}.js`, async ctx => {
+	await send(ctx as any, `/sw-lib.js`, {
 		root: swAssets
 	});
 });

packages/client/src/scripts/initialize-sw.ts

@@ -8,7 +8,7 @@ export async function initializeSw() {
 		('serviceWorker' in navigator) &&
 		('PushManager' in window) &&
 		$i && $i.token) {
-		navigator.serviceWorker.register(`/sw.js`, { scope: '/', type: 'module' });
+		navigator.serviceWorker.register(`/sw.js`, { scope: '/', type: 'classic' });
 
 		navigator.serviceWorker.ready.then(registration => {
 			registration.active?.postMessage({

packages/sw/src/lib.ts

@@ -1,7 +1,17 @@
 /**
  * Service Worker
  */
-declare var self: ServiceWorkerGlobalScope;
+declare var self: ServiceWorkerGlobalScope & {
+	lib: {
+		oninstall: (ev: ServiceWorkerGlobalScopeEventMap['install']) => void;
+		onactivate: (ev: ServiceWorkerGlobalScopeEventMap['activate']) => void;
+		onfetch: (ev: ServiceWorkerGlobalScopeEventMap['fetch']) => void;
+		onpush: (ev: ServiceWorkerGlobalScopeEventMap['push']) => void;
+		onnotificationclick: (ev: ServiceWorkerGlobalScopeEventMap['notificationclick']) => void;
+		onnotificationclose: (ev: ServiceWorkerGlobalScopeEventMap['notificationclose']) => void;
+		onmessage: (ev: ServiceWorkerGlobalScopeEventMap['message']) => void;
+	};
+};
 
 import { createEmptyNotification, createNotification } from '@/scripts/create-notification';
 import { swLang } from '@/scripts/lang';
@@ -10,14 +20,15 @@ import { pushNotificationDataMap } from '@/types';
 import * as swos from '@/scripts/operations';
 import { acct as getAcct } from '@/filters/user';
 
+self.lib = {} as any;
+
 //#region Lifecycle: Install
-self.addEventListener('install', ev => {
+self.lib.oninstall = (ev: ServiceWorkerGlobalScopeEventMap['install']) => {
 	ev.waitUntil(self.skipWaiting());
-});
-//#endregion
+}
 
 //#region Lifecycle: Activate
-self.addEventListener('activate', ev => {
+self.lib.onactivate = (ev: ServiceWorkerGlobalScopeEventMap['activate']) => {
 	ev.waitUntil(
 		caches.keys()
 			.then(cacheNames => Promise.all(
@@ -27,20 +38,20 @@ self.addEventListener('activate', ev => {
 			))
 			.then(() => self.clients.claim())
 	);
-});
+}
 //#endregion
 
 //#region When: Fetching
-self.addEventListener('fetch', ev => {
+self.lib.onfetch = (ev: ServiceWorkerGlobalScopeEventMap['fetch']) => {
 	ev.respondWith(
 		fetch(ev.request)
 		.catch(() => new Response(`Offline. Service Worker @${_VERSION_}`, { status: 200 }))
 	);
-});
+}
 //#endregion
 
 //#region When: Caught Notification
-self.addEventListener('push', ev => {
+self.lib.onpush = (ev: ServiceWorkerGlobalScopeEventMap['push']) => {
 	// クライアント取得
 	ev.waitUntil(self.clients.matchAll({
 		includeUncontrolled: true,
@@ -89,13 +100,12 @@ self.addEventListener('push', ev => {
 
 		createEmptyNotification();
 	}));
-});
+}
 //#endregion
 
 //#region Notification
-self.addEventListener('notificationclick', <K extends keyof pushNotificationDataMap>(ev: NotificationEvent) => {
-	ev.waitUntil((async () => {
-
+self.lib.onnotificationclick = <K extends keyof pushNotificationDataMap>(ev: ServiceWorkerGlobalScopeEventMap['notificationclick']) => {
+ev.waitUntil((async () => {
 	if (_DEV_) {
 		console.log('notificationclick', ev.action, ev.notification.data);
 	}
@@ -178,20 +188,21 @@ self.addEventListener('notificationclick', <K extends keyof pushNotificationData
 
 	notification.close();
 
-	})());
-});
+})());
+}
 
-self.addEventListener('notificationclose', <K extends keyof pushNotificationDataMap>(ev: NotificationEvent) => {
+self.lib.onnotificationclose = <K extends keyof pushNotificationDataMap>(ev: ServiceWorkerGlobalScopeEventMap['notificationclose']) => {
 	const data: pushNotificationDataMap[K] = ev.notification.data;
 
 	if (data.type === 'notification') {
 		swNotificationRead.then(that => that.read(data));
 	}
-});
+}
 //#endregion
 
 //#region When: Caught a message from the client
-self.addEventListener('message', async ev => {
+self.lib.onmessage = (ev: ServiceWorkerGlobalScopeEventMap['message']) => {
+ev.waitUntil((async () => {
 	switch (ev.data) {
 		case 'clear':
 			// Cache Storage全削除
@@ -212,5 +223,6 @@ self.addEventListener('message', async ev => {
 			}
 		}
 	}
-});
+})());
+}
 //#endregion

packages/sw/src/sw.js

@@ -0,0 +1,15 @@
+self.importScripts('/sw-lib.VERSION.js');
+
+self.addEventListener('install', self.lib.oninstall);
+
+self.addEventListener('activate', self.lib.onactivate);
+
+self.addEventListener('fetch', self.lib.onfetch);
+
+self.addEventListener('push', self.lib.onpush);
+
+self.addEventListener('notificationclick', self.lib.onnotificationclick);
+
+self.addEventListener('notificationclose', self.lib.onnotificationclose);
+
+self.addEventListener('message', self.lib.onmessage);

packages/sw/webpack.config.js

@@ -23,7 +23,7 @@ const meta = require('../../package.json');
 module.exports = {
 	target: 'webworker',
 	entry: {
-		sw: './src/sw.ts'
+		['sw-lib']: './src/lib.ts'
 	},
 	module: {
 		rules: [{
@@ -35,7 +35,6 @@ module.exports = {
 					happyPackMode: true,
 					transpileOnly: true,
 					configFile: __dirname + '/tsconfig.json',
-					appendTsSuffixTo: [/\.vue$/]
 				}
 			}]
 		}]
@@ -56,7 +55,7 @@ module.exports = {
 	],
 	output: {
 		path: __dirname + '/../../built/_sw_dist_',
-		filename: `[name].${meta.version}.js`,
+		filename: `[name].js`,
 		publicPath: `/`,
 		pathinfo: false,
 	},
@@ -71,9 +70,6 @@ module.exports = {
 	resolveLoader: {
 		modules: ['node_modules']
 	},
-	experiments: {
-		topLevelAwait: true
-	},
 	devtool: false, //'source-map',
 	mode: isProduction ? 'production' : 'development'
 };