Failed to load the script unexpectedly回避
sw.jsとlib.tsを分離してみた
This commit is contained in:
parent
7e5ab7af1b
commit
47d77d14fd
|
@ -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'));
|
||||
|
|
|
@ -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
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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
|
|
@ -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);
|
|
@ -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'
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue