Merge branch 'release/0.5.1'

.gitignore

@@ -6,6 +6,7 @@ node_modules
 /public/openpgp
 /public/sitemap.xml
 /public/robots.txt
+/src/service-worker/dist
 
 # local env files
 .env.local

CHANGELOG.md

@@ -5,6 +5,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 
 ## [Unreleased]
 
+## [0.5.1] - 2020-01-24
+### Changed
+- Update dependencies
+- Improve logic of checking stream-download support
+- Support stream-download on Firefox
+
 ## [0.5.0] - 2020-01-21
 ### Changed
 - Update dependencies
@@ -215,7 +221,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 ### Added
 - First release
 
-[Unreleased]: https://github.com/nwtgck/piping-ui-web/compare/v0.5.0...HEAD
+[Unreleased]: https://github.com/nwtgck/piping-ui-web/compare/v0.5.1...HEAD
+[0.5.1]: https://github.com/nwtgck/piping-ui-web/compare/v0.5.0...v0.5.1
 [0.5.0]: https://github.com/nwtgck/piping-ui-web/compare/v0.4.31...v0.5.0
 [0.4.31]: https://github.com/nwtgck/piping-ui-web/compare/v0.4.30...v0.4.31
 [0.4.30]: https://github.com/nwtgck/piping-ui-web/compare/v0.4.29...v0.4.30

package.json

@@ -1,30 +1,33 @@
 {
   "name": "piping-ui",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "private": true,
   "author": "Ryo Ota <nwtgck@nwtgck.org> (https://github.com/nwtgck)",
   "scripts": {
-    "serve": "npm run generate-version && npm run copy-openpgp && vue-cli-service serve",
-    "build": "npm run generate-version && npm run generate-sitemap && npm run generate-robots-txt && npm run copy-openpgp && vue-cli-service build",
+    "serve": "npm run generate-files && vue-cli-service serve",
+    "build": "npm run generate-files && vue-cli-service build",
+    "build-sw": "webpack --config src/service-worker/webpack.config.js src/service-worker/sw.js",
+    "generate-files": "npm run generate-version && npm run generate-sitemap && npm run generate-robots-txt && npm run copy-openpgp && npm run build-sw",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
     "copy-openpgp": "copyfiles --flat node_modules/openpgp/dist/*.min.js public/openpgp",
     "generate-robots-txt": "ts-node --project scripts/tsconfig.json scripts/generate-robots-txt.tsx > public/robots.txt",
     "generate-sitemap": "ts-node --project scripts/tsconfig.json scripts/generate-sitemap.tsx > public/sitemap.xml",
     "generate-version": "cross-var echo \"export const VERSION = \\\"$npm_package_version\\\";\" > src/version.ts",
     "postinstall": "license-checker --production --json > src/licenses.json",
-    "real-serve": "watch-build-serve -i=dist -i=.idea -i=./node_modules -i=.git -i=src/version.ts -i src/licenses.json -i public/openpgp/openpgp.min.js -i public/openpgp/openpgp.worker.min.js -i public/sitemap.xml -i public/robots.txt"
+    "real-serve": "watch-build-serve -i=dist -i=.idea -i=./node_modules -i=.git -i=src/version.ts -i src/service-worker/dist -i public/openpgp -i src/licenses.json -i public/sitemap.xml -i public/robots.txt"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.26",
     "@fortawesome/free-brands-svg-icons": "^5.12.0",
     "@fortawesome/vue-fontawesome": "^0.1.9",
+    "@mattiasbuelens/web-streams-adapter": "0.1.0-alpha.3",
     "binconv": "^0.1.2",
     "clipboard": "^2.0.4",
     "core-js": "^3.6.4",
     "file-saver": "^2.0.2",
-    "file-type": "^13.1.1",
-    "filepond": "^4.9.4",
+    "file-type": "^13.1.2",
+    "filepond": "^4.9.5",
     "jszip": "^3.2.2",
     "jwk-thumbprint": "^0.1.2",
     "linkifyjs": "^2.1.8",
@@ -40,7 +43,7 @@
     "vue-class-component": "^7.2.2",
     "vue-filepond": "^6.0.2",
     "vue-property-decorator": "^8.3.0",
-    "vuetify": "^2.1.18"
+    "vuetify": "^2.2.6"
   },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
@@ -51,7 +54,7 @@
     "@types/jszip": "^3.1.7",
     "@types/mocha": "^5.2.7",
     "@types/openpgp": "^4.4.8",
-    "@types/react": "^16.9.17",
+    "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
     "@types/sanitize-html": "^1.20.2",
     "@types/smoothscroll-polyfill": "^0.3.1",
@@ -79,7 +82,8 @@
     "vue-cli-plugin-vuetify": "^2.0.3",
     "vue-template-compiler": "^2.6.11",
     "vuetify-loader": "^1.4.3",
-    "watch-build-serve": "github:nwtgck/watch-build-serve-node#afc757410b3339e1603916ab98b8e5760569dbaa"
+    "watch-build-serve": "github:nwtgck/watch-build-serve-node#afc757410b3339e1603916ab98b8e5760569dbaa",
+    "webpack-cli": "^3.3.10"
   },
   "license": "MIT",
   "repository": {

src/sw.js → src/service-worker/sw.js

@@ -1,7 +1,14 @@
 // (from: https://medium.com/@dougallrich/give-users-control-over-app-updates-in-vue-cli-3-pwas-20453aedc1f2)
 
+// Backup the native ReadableStream because OpenPGP.js might modify it on Firefox
+const NativeReadableStream = ReadableStream;
+import {createReadableStreamWrapper} from '@mattiasbuelens/web-streams-adapter';
 importScripts('openpgp/openpgp.min.js');
 
+// Create convert functions
+const toPolyfillReadable = createReadableStreamWrapper(ReadableStream);
+const toNativeReadable = createReadableStreamWrapper(NativeReadableStream);
+
 // Generate random string with specific length
 function generateRandomString(len){
   const alphas  = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
@@ -89,7 +96,7 @@ self.addEventListener('fetch', (event) => {
   if (url.pathname === '/sw-download-support') {
     // Return "OK"
     event.respondWith(new Response(
-      new ReadableStream({
+      new NativeReadableStream({
         start(controller) {
           controller.enqueue(new Uint8Array([79, 75]));
           controller.close();
@@ -146,7 +153,7 @@ self.addEventListener('fetch', (event) => {
           openpgp.config.allow_unauthenticated_stream = true;
           // Decrypt the response body
           const decrypted = await openpgp.decrypt({
-            message: await openpgp.message.read(res.body),
+            message: await openpgp.message.read(toPolyfillReadable(res.body)),
             passwords: [password],
             format: 'binary'
           });
@@ -160,7 +167,7 @@ self.addEventListener('fetch', (event) => {
         }
       }
 
-      const downloadableRes = new Response(plainStream, {
+      const downloadableRes = new Response(toNativeReadable(plainStream), {
         headers
       });
       return downloadableRes;

src/service-worker/webpack.config.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+  target: 'webworker',
+  output: {
+    filename: 'sw.js',
+    path: path.resolve(__dirname, 'dist')
+  },
+};

src/styles/variables.scss

@@ -0,0 +1,11 @@
+// (base: https://github.com/vuetifyjs/vuetify/releases/tag/v2.2.6)
+
+$material-dark: (
+        'app-bar': #424242,
+        'background': #303030,
+        'cards': #424242,
+        'navigation-drawer': #424242,
+        'toolbar': #212121
+);
+
+$material-light: ('background': #FAFAFA);

src/sw-download.ts

@@ -4,21 +4,25 @@ export const supportsSwDownload: Promise<boolean> = (async () => {
   if (typeof (window as any).safari !== 'undefined') {
     return false;
   }
-  let res: Response | undefined;
+  if (!("serviceWorker" in navigator)) {
+    return false;
+  }
+  // Wait until Service Worker is active
+  await navigator.serviceWorker.ready;
   for (let retryLimit = 3; retryLimit !== 0; retryLimit--) {
+    // Sleep
+    await new Promise(resolve => setTimeout(resolve, 500));
     try {
       // Check whether response can be received
-      res = await fetch('/sw-download-support');
+      const res = await fetch('/sw-download-support');
+      // Success
+      if (res.status === 200) {
+        return await res.text() === 'OK';
+      }
     } catch(err) {
       // Noop
       (() => {})();
     }
-    // Success
-    if (res !== undefined && res.status === 200) {
-      return await res.text() === 'OK';
-    }
-    // Sleep
-    await new Promise(resolve => setTimeout(resolve, 500));
   }
   return false;
 })();

vue.config.js

@@ -17,15 +17,15 @@ module.exports = {
           "https://ppng.herokuapp.com"
         ]),
       })
-    ]
+    ],
   },
   // (from: https://github.com/vuetifyjs/vuetify/issues/8279#issuecomment-517900297)
   transpileDependencies: ['vuetify'],
   // (from: https://medium.com/@dougallrich/give-users-control-over-app-updates-in-vue-cli-3-pwas-20453aedc1f2)
   pwa: {
     workboxPluginMode: 'InjectManifest',
     workboxOptions: {
-      swSrc: './src/sw.js',
+      swSrc: './src/service-worker/dist/sw.js',
       swDest: 'service-worker.js',
       importWorkboxFrom: 'local',
       exclude: [/\.map$/, '_redirects'],