nanka iroiro

gulpfile.ts

@@ -19,13 +19,16 @@ import * as chalk from 'chalk';
 import imagemin = require('gulp-imagemin');
 import * as rename from 'gulp-rename';
 import * as mocha from 'gulp-mocha';
+import * as replace from 'gulp-replace';
+import getVersion from './src/version';
 
 const env = process.env.NODE_ENV;
 const isProduction = env === 'production';
 const isDebug = !isProduction;
 
 if (isDebug) {
-	console.log(chalk.yellow.bold('！！！WARNING！！！ NODE_ENV is not "production". (built script compessing will not be performed.)'));
+	console.warn(chalk.yellow.bold('WARNING! NODE_ENV is not "production".'));
+	console.warn(chalk.yellow.bold('         built script compessing will not be performed.'));
 }
 
 const constants = require('./src/const.json');
@@ -126,15 +129,21 @@ gulp.task('build:client', [
 	'copy:client'
 ]);
 
-gulp.task('build:client:scripts', () =>
-	es.merge(
-		webpack(require('./webpack.config'), require('webpack'))
-			.pipe(gulp.dest('./built/web/resources/')) as any,
-		gulp.src('./src/web/app/client/script.js')
-			//.pipe(isProduction ? uglify() : gutil.noop())
-			.pipe(gulp.dest('./built/web/resources/client/')) as any
-	)
-);
+gulp.task('build:client:scripts', done => {
+	getVersion.then(version => {
+		require('./webpack.config').then(webpackOptions => {
+			es.merge(
+				webpack(webpackOptions, require('webpack'))
+					.pipe(gulp.dest('./built/web/resources/')) as any,
+				gulp.src('./src/web/app/client/script.js')
+					.pipe(replace('VERSION', JSON.stringify(version)))
+					//.pipe(isProduction ? uglify() : gutil.noop())
+					.pipe(gulp.dest('./built/web/resources/client/')) as any
+			);
+			done();
+		});
+	});
+});
 
 gulp.task('build:client:styles', () =>
 	gulp.src('./src/web/app/init.css')
@@ -163,12 +172,16 @@ gulp.task('build:client:pug', [
 	'copy:client',
 	'build:client:scripts',
 	'build:client:styles'
-], () =>
+], done => {
+	getVersion.then(version => {
 		gulp.src('./src/web/app/*/view.pug')
 			.pipe(pug({
 				locals: {
+					version: version,
 					themeColor: constants.themeColor
 				}
 			}))
-			.pipe(gulp.dest('./built/web/app/'))
-);
+			.pipe(gulp.dest('./built/web/app/'));
+		done();
+	});
+});

package.json

@@ -36,13 +36,14 @@
     "@types/express": "4.0.35",
     "@types/glob": "5.0.30",
     "@types/gm": "1.17.30",
-    "@types/gulp-tslint": "3.6.31",
-    "@types/gulp-rename": "0.0.32",
-    "@types/gulp-mocha": "0.0.30",
     "@types/gulp": "4.0.2",
+    "@types/gulp-mocha": "0.0.30",
+    "@types/gulp-rename": "0.0.32",
+    "@types/gulp-replace": "0.0.30",
+    "@types/gulp-tslint": "3.6.31",
     "@types/gulp-typescript": "0.0.32",
-    "@types/gulp-util": "3.0.31",
     "@types/gulp-uglify": "0.0.30",
+    "@types/gulp-util": "3.0.31",
     "@types/inquirer": "0.0.32",
     "@types/is-root": "1.0.0",
     "@types/is-url": "1.2.28",
@@ -65,8 +66,8 @@
     "@types/websocket": "0.0.33",
     "autwh": "0.0.1",
     "bcryptjs": "2.4.3",
-    "cafy": "2.3.0",
     "body-parser": "1.17.1",
+    "cafy": "2.3.0",
     "chai": "3.5.0",
     "chai-http": "3.0.0",
     "chalk": "1.1.3",
@@ -95,6 +96,7 @@
     "gulp-mocha": "4.1.0",
     "gulp-pug": "3.3.0",
     "gulp-rename": "1.2.2",
+    "gulp-replace": "0.5.4",
     "gulp-tslint": "7.1.0",
     "gulp-typescript": "3.1.6",
     "gulp-uglify": "2.1.0",

src/api/endpoints/meta.ts

@@ -2,7 +2,7 @@
  * Module dependencies
  */
 import prominence from 'prominence';
-import git from 'git-last-commit';
+import getVersion from '../../version';
 import config from '../../conf';
 
 /**
@@ -39,11 +39,11 @@ import config from '../../conf';
  * @return {Promise<any>}
  */
 module.exports = (params) => new Promise(async (res, rej) => {
-	const commit = await prominence(git).getLastCommit();
+	const version = await getVersion.then();
 
 	res({
 		maintainer: config.maintainer,
-		commit: commit.shortHash,
+		version: version,
 		secure: config.https.enable
 	});
 });

src/version.ts

@@ -0,0 +1,12 @@
+import prominence = require('prominence');
+import git = require('git-last-commit');
+
+const getVersion = new Promise<string>(async resolve => {
+	const commit = await prominence(git).getLastCommit();
+
+	const version = commit.shortHash;
+
+	resolve(version);
+});
+
+export default getVersion;

src/web/app/auth/view.pug

@@ -1,6 +1,5 @@
 extends ../base
 
 block head
-	meta(name='viewport', content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no')
-	link(rel='stylesheet', href='/resources/auth/style.css')
-	script(src='/resources/auth/script.js', async, defer)
+	meta(name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no')
+	script(src=`/resources/auth/script.${version}.js` async defer)

src/web/app/base.pug

@@ -2,17 +2,17 @@ doctype html
 
 != '\r\n<!-- Thank you for using Misskey! @syuilo -->\r\n'
 
-html(lang='ja', dir='ltr')
+html(lang='ja' dir='ltr')
 
 	head
 		meta(charset='utf-8')
-		meta(name='application-name', content='Misskey')
-		meta(name='theme-color', content= themeColor)
-		meta(name='referrer', content='origin')
+		meta(name='application-name' content='Misskey')
+		meta(name='theme-color' content=themeColor)
+		meta(name='referrer' content='origin')
 		title Misskey
 		style
 			include ./../../../built/web/resources/init.css
-		script(src='https://use.fontawesome.com/22aba0df4f.js', async)
+		script(src='https://use.fontawesome.com/22aba0df4f.js' async)
 		block head
 
 	body

src/web/app/boot.js

@@ -49,6 +49,26 @@ try {
 	Storage.prototype.setItem = () => { }; // noop
 }
 
+// クライアントを更新すべきならする
+if (localStorage.getItem('should-refresh') == 'true') {
+	localStorage.removeItem('should-refresh');
+	location.reload(true);
+}
+
+// 更新チェック
+setTimeout(() => {
+	fetch(CONFIG.apiUrl + '/meta', {
+		method: 'POST'
+	}).then(res => {
+		res.json().then(meta => {
+			if (meta.version != VERSION) {
+				localStorage.setItem('should-refresh', 'true');
+				alert('Misskeyの新しいバージョンがあります。ページを再度読み込みすると更新が適用されます。');
+			}
+		});
+	});
+}, 3000);
+
 // ユーザーをフェッチしてコールバックする
 module.exports = callback => {
 	// Get cached account data

src/web/app/client/script.js

@@ -1,18 +1,29 @@
+/**
+ * MISSKEY ENTRY POINT
+ */
 (() => {
 	const head = document.getElementsByTagName('head')[0];
+
+	// Detect user agent
 	const ua = navigator.userAgent.toLowerCase();
 	const isMobile = /mobile|iphone|ipad|android/.test(ua);
 
 	isMobile ? mountMobile() : mountDesktop();
 
+	/**
+	 * Mount the desktop app
+	 */
 	function mountDesktop() {
 		const script = document.createElement('script');
-		script.setAttribute('src', '/resources/desktop/script.js');
+		script.setAttribute('src', `/resources/desktop/script.${VERSION}.js`);
 		script.setAttribute('async', 'true');
 		script.setAttribute('defer', 'true');
 		head.appendChild(script);
 	}
 
+	/**
+	 * Mount the mobile app
+	 */
 	function mountMobile() {
 		const meta = document.createElement('meta');
 		meta.setAttribute('name', 'viewport');
@@ -20,7 +31,7 @@
 		head.appendChild(meta);
 
 		const script = document.createElement('script');
-		script.setAttribute('src', '/resources/mobile/script.js');
+		script.setAttribute('src', `/resources/mobile/script.${VERSION}.js`);
 		script.setAttribute('async', 'true');
 		script.setAttribute('defer', 'true');
 		head.appendChild(script);

src/web/app/dev/view.pug

@@ -1,5 +1,4 @@
 extends ../base
 
 block head
-	link(rel='stylesheet', href='/resources/dev/style.css')
-	script(src='/resources/dev/script.js', async, defer)
+	script(src=`/resources/dev/script.${version}.js` async defer)

webpack.config.ts

@@ -4,73 +4,79 @@
 
 import * as webpack from 'webpack';
 const StringReplacePlugin = require('string-replace-webpack-plugin');
+import getVersion from './src/version';
 const constants = require('./src/const.json');
 
 const env = process.env.NODE_ENV;
 const isProduction = env === 'production';
 
-const pack: webpack.Configuration = {
-	entry: {
-		'desktop': './src/web/app/desktop/script.js',
-		'mobile': './src/web/app/mobile/script.js',
-		'dev': './src/web/app/dev/script.js',
-		'auth': './src/web/app/auth/script.js'
-	},
-	module: {
-		rules: [
-			{
-				enforce: 'pre',
-				test: /\.tag$/,
-				exclude: /node_modules/,
-				loader: StringReplacePlugin.replace({
-					replacements: [
-						{ pattern: /\$theme\-color\-foreground/g, replacement: () => constants.themeColorForeground },
-						{ pattern: /\$theme\-color/g, replacement: () => constants.themeColor },
-					]
-				})
-			},
-			{
-				test: /\.tag$/,
-				exclude: /node_modules/,
-				loader: 'riot-tag-loader',
-				query: {
-					hot: false,
-					style: 'stylus',
-					expr: false,
-					compact: true,
-					parserOptions: {
-						style: {
-							compress: true
+module.exports = new Promise(async resolve => {
+	const version = await getVersion.then();
+
+	const pack: webpack.Configuration = {
+		entry: {
+			'desktop': './src/web/app/desktop/script.js',
+			'mobile': './src/web/app/mobile/script.js',
+			'dev': './src/web/app/dev/script.js',
+			'auth': './src/web/app/auth/script.js'
+		},
+		module: {
+			rules: [
+				{
+					enforce: 'pre',
+					test: /\.tag$/,
+					exclude: /node_modules/,
+					loader: StringReplacePlugin.replace({
+						replacements: [
+							{ pattern: /\$theme\-color\-foreground/g, replacement: () => constants.themeColorForeground },
+							{ pattern: /\$theme\-color/g, replacement: () => constants.themeColor },
+						]
+					})
+				},
+				{
+					test: /\.tag$/,
+					exclude: /node_modules/,
+					loader: 'riot-tag-loader',
+					query: {
+						hot: false,
+						style: 'stylus',
+						expr: false,
+						compact: true,
+						parserOptions: {
+							style: {
+								compress: true
+							}
 						}
 					}
+				},
+				{
+					test: /\.styl$/,
+					exclude: /node_modules/,
+					use: [
+						{ loader: 'style-loader' },
+						{ loader: 'css-loader' },
+						{ loader: 'stylus-loader' }
+					]
 				}
-			},
-			{
-				test: /\.styl$/,
-				exclude: /node_modules/,
-				use: [
-					{ loader: 'style-loader' },
-					{ loader: 'css-loader' },
-					{ loader: 'stylus-loader' }
-				]
-			}
-		]
-	},
-	plugins: [
-		new webpack.DefinePlugin({
-			CONFIG: {
-				themeColor: JSON.stringify(constants.themeColor)
-			}
-		}),
-		new StringReplacePlugin()
-	],
-	output: {
-		filename: '[name]/script.js'
+			]
+		},
+		plugins: [
+			new webpack.DefinePlugin({
+				VERSION: JSON.stringify(version),
+				CONFIG: {
+					themeColor: JSON.stringify(constants.themeColor)
+				}
+			}),
+			new StringReplacePlugin()
+		],
+		output: {
+			filename: `[name]/script.${version}.js`
+		}
+	};
+
+	if (isProduction) {
+		//pack.plugins.push(new webpack.optimize.UglifyJsPlugin());
 	}
-};
 
-if (isProduction) {
-	//pack.plugins.push(new webpack.optimize.UglifyJsPlugin());
-}
-
-module.exports = pack;
+	resolve(pack);
+});