Skip to content
Snippets Groups Projects
boot.js 4.22 KiB
Newer Older
syuilo's avatar
syuilo committed
/**
syuilo's avatar
syuilo committed
 * MISSKEY BOOT LOADER
 * (ENTRY POINT)
syuilo's avatar
syuilo committed
 */
Aya Morisawa's avatar
Aya Morisawa committed

syuilo's avatar
syuilo committed
'use strict';

(async function() {
syuilo's avatar
syuilo committed
	// キャッシュ削除要求があれば従う
	if (localStorage.getItem('shouldFlush') == 'true') {
		refresh();
		return;
	}
syuilo's avatar
syuilo committed

syuilo's avatar
syuilo committed
	const langs = LANGS;

syuilo's avatar
syuilo committed
	//#region Apply theme
	const theme = localStorage.getItem('theme');
	if (theme) {
		for (const [k, v] of Object.entries(JSON.parse(theme))) {
syuilo's avatar
syuilo committed
			document.documentElement.style.setProperty(`--${k}`, v.toString());
syuilo's avatar
syuilo committed
	}
	//#endregion

syuilo's avatar
syuilo committed
	//#region Load settings
	let settings = null;
	const vuex = localStorage.getItem('vuex');
	if (vuex) {
		settings = JSON.parse(vuex);
	}
	//#endregion

syuilo's avatar
syuilo committed
	// Get the current url information
	const url = new URL(location.href);
syuilo's avatar
syuilo committed

syuilo's avatar
syuilo committed
	//#region Detect app name
	let app = null;

	if (`${url.pathname}/`.startsWith('/docs/')) app = 'docs';
	if (`${url.pathname}/`.startsWith('/dev/')) app = 'dev';
	if (`${url.pathname}/`.startsWith('/auth/')) app = 'auth';
syuilo's avatar
syuilo committed
	if (`${url.pathname}/`.startsWith('/admin/')) app = 'admin';
syuilo's avatar
syuilo committed
	//#endregion
syuilo's avatar
syuilo committed

	// Script version
	const ver = localStorage.getItem('v') || VERSION;

syuilo's avatar
syuilo committed
	//#region Detect the user language
syuilo's avatar
syuilo committed
	let lang = null;
syuilo's avatar
syuilo committed
	if (langs.includes(navigator.language)) {
syuilo's avatar
syuilo committed
		lang = navigator.language;
	} else {
syuilo's avatar
syuilo committed
		lang = langs.find(x => x.split('-')[0] == navigator.language);
syuilo's avatar
syuilo committed

syuilo's avatar
syuilo committed
		if (lang == null) {
			// Fallback
			lang = 'en-US';
		}
	}
syuilo's avatar
syuilo committed

syuilo's avatar
syuilo committed
	if (settings && settings.device.lang &&
syuilo's avatar
syuilo committed
		langs.includes(settings.device.lang))
	{
		lang = settings.device.lang;
syuilo's avatar
syuilo committed
	}
	localStorage.setItem('lang', lang);
syuilo's avatar
syuilo committed
	//#endregion
syuilo's avatar
syuilo committed

syuilo's avatar
syuilo committed
	//#region Fetch locale data
	const cachedLocale = localStorage.getItem('locale');
	const localeKey = localStorage.getItem('localeKey');

syuilo's avatar
syuilo committed
	if (cachedLocale == null || localeKey != `${ver}.${lang}`) {
		const locale = await fetch(`/assets/locales/${lang}.json?ver=${ver}`)
			.then(response => response.json());

syuilo's avatar
syuilo committed
		localStorage.setItem('locale', JSON.stringify(locale));
		localStorage.setItem('localeKey', `${ver}.${lang}`);
syuilo's avatar
syuilo committed
	//#endregion
syuilo's avatar
syuilo committed
	// Detect the user agent
	const ua = navigator.userAgent.toLowerCase();
	const isMobile = /mobile|iphone|ipad|android/.test(ua);
Aya Morisawa's avatar
Aya Morisawa committed

syuilo's avatar
syuilo committed
	// Get the <head> element
	const head = document.getElementsByTagName('head')[0];

	// If mobile, insert the viewport meta tag
	if (isMobile) {
		const meta = document.createElement('meta');
		meta.setAttribute('name', 'viewport');
syuilo's avatar
syuilo committed
		meta.setAttribute('content',
			'width=device-width,' +
			'initial-scale=1,' +
			'minimum-scale=1,' +
			'maximum-scale=1,' +
			'user-scalable=no');
syuilo's avatar
syuilo committed
		head.appendChild(meta);
	}

	// Switch desktop or mobile version
syuilo's avatar
syuilo committed
	if (app == null) {
syuilo's avatar
syuilo committed
		app = isMobile ? 'mobile' : 'desktop';
	}

	// Load an app script
	// Note: 'async' make it possible to load the script asyncly.
	//       'defer' make it possible to run the script when the dom loaded.
	const script = document.createElement('script');
	script.setAttribute('src', `/assets/${app}.${ver}.js`);
syuilo's avatar
syuilo committed
	script.setAttribute('async', 'true');
	script.setAttribute('defer', 'true');
	head.appendChild(script);
syuilo's avatar
syuilo committed

syuilo's avatar
syuilo committed
	// 3秒経ってもスクリプトがロードされない場合はバージョンが古くて
syuilo's avatar
syuilo committed
	// 404になっているせいかもしれないので、バージョンを確認して古ければ更新する
	//
	// 読み込まれたスクリプトからこのタイマーを解除できるように、
	// グローバルにタイマーIDを代入しておく
	window.mkBootTimer = window.setTimeout(async () => {
		// Fetch meta
		const res = await fetch('/api/meta', {
syuilo's avatar
syuilo committed
			method: 'POST',
			cache: 'no-cache'
		});

		// Parse
		const meta = await res.json();

		// Compare versions
syuilo's avatar
syuilo committed
		if (meta.version != ver) {
			localStorage.setItem('v', meta.version);
syuilo's avatar
syuilo committed

syuilo's avatar
syuilo committed
			alert(
				'Misskeyの新しいバージョンがあります。ページを再度読み込みします。' +
				'\n\n' +
				'New version of Misskey available. The page will be reloaded.');

syuilo's avatar
syuilo committed
			refresh();
		}
	}, 3000);

	function refresh() {
		localStorage.setItem('shouldFlush', 'false');
syuilo's avatar
syuilo committed

		localStorage.removeItem('locale');

		// Clear cache (service worker)
syuilo's avatar
syuilo committed
		try {
			navigator.serviceWorker.controller.postMessage('clear');
syuilo's avatar
syuilo committed

syuilo's avatar
syuilo committed
			navigator.serviceWorker.getRegistrations().then(registrations => {
				for (const registration of registrations) registration.unregister();
syuilo's avatar
syuilo committed
			});
		} catch (e) {
			console.error(e);
syuilo's avatar
syuilo committed
		}
syuilo's avatar
syuilo committed

		// Force reload
syuilo's avatar
syuilo committed
		location.reload(true);
syuilo's avatar
syuilo committed
	}
syuilo's avatar
syuilo committed
})();