update to wabac.js 2.9.0-beta.0, smaller file size, loading improvements

ruffle: support for ruffle for flash loading, both hosted and in app
electron: update to latest beta (14) for latest chromium version
embed error messages: better error message when service worker can not be found
electron: build universal app for osx
bump to 1.5.0!

.github/workflows/buildapp.yaml

@@ -1,9 +1,6 @@
-name: Build ReplayWeb.page App
+name: Build/release
 
-on:
+on: push
-  push:
-    branches:
-      - main
 
 jobs:
   release:
@@ -11,10 +8,10 @@ jobs:
 
     strategy:
       matrix:
-        os: [macos-10.14, ubuntu-latest]
+        os: [macos-10.15, ubuntu-latest]
         platform: [windows, linux]
         exclude:
-          - os: macos-10.14
+          - os: macos-10.15
             platform: windows
 
     steps:
@@ -24,7 +21,7 @@ jobs:
       - name: Install Node.js, NPM and Yarn
         uses: actions/setup-node@v1
         with:
-          node-version: 13
+          node-version: 14
 
       - name: Cache Dirs
         uses: actions/cache@v2
@@ -47,7 +44,7 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
         run: |
-              if [ "$GITHUB_REF" == "refs/heads/main" ]; then
+              if [ "$GITHUB_REF" == "refs/heads/main" ] || [ -f ./force_release ]; then
                 export YARN_BUILD_CMD="release"
               else
                 export YARN_BUILD_CMD="dist"
@@ -55,10 +52,10 @@ jobs:
 
               if [ "$RUNNER_OS" == "Linux" ]; then
                 if [ "$PLATFORM" == "linux" ]; then
-                  mkdir -p plugins-linux;
+                  #mkdir -p plugins-linux;
-                  pushd plugins-linux;
+                  #pushd plugins-linux;
-                  wget "https://s3.amazonaws.com/webrecorder-builds/flashplugin/libpepflashplayer.so";
+                  #wget "https://s3.amazonaws.com/webrecorder-builds/flashplugin/libpepflashplayer.so";
-                  popd;
+                  #popd;
 
                   docker run --rm \
                     -e GH_TOKEN=${GH_TOKEN} \
@@ -69,11 +66,11 @@ jobs:
                     electronuserland/builder:wine \
                     /bin/bash -c "yarn --link-duplicates --pure-lockfile && yarn install && yarn run $YARN_BUILD_CMD --linux --x64"
                 else
-                  mkdir -p plugins-win;
+                  #mkdir -p plugins-win;
-                  pushd plugins-win;
+                  #pushd plugins-win;
-                  wget "https://s3.amazonaws.com/webrecorder-builds/flashplugin/pepflashplayer-x86_64.dll";
+                  #wget "https://s3.amazonaws.com/webrecorder-builds/flashplugin/pepflashplayer-x86_64.dll";
-                  wget "https://s3.amazonaws.com/webrecorder-builds/flashplugin/pepflashplayer-x86.dll";
+                  #wget "https://s3.amazonaws.com/webrecorder-builds/flashplugin/pepflashplayer-x86.dll";
-                  popd;
+                  #popd;
 
                   docker run --rm \
                     -e GH_TOKEN=${GH_TOKEN} \
@@ -87,12 +84,12 @@ jobs:
                     /bin/bash -c "yarn --link-duplicates --pure-lockfile && yarn install && yarn run $YARN_BUILD_CMD --win --x64 --ia32"
                 fi
               else
-                mkdir -p plugins-mac;
+                #mkdir -p plugins-mac;
-                pushd plugins-mac;
+                #pushd plugins-mac;
-                wget "https://s3.amazonaws.com/webrecorder-builds/flashplugin/PepperFlashPlayer.plugin.zip";
+                #wget "https://s3.amazonaws.com/webrecorder-builds/flashplugin/PepperFlashPlayer.plugin.zip";
-                unzip PepperFlashPlayer.plugin.zip;
+                #unzip PepperFlashPlayer.plugin.zip;
-                rm PepperFlashPlayer.plugin.zip;
+                #rm PepperFlashPlayer.plugin.zip;
-                popd;
+                #popd;
                 yarn install
                 yarn run $YARN_BUILD_CMD
               fi

CHANGES.md

@@ -1,5 +1,12 @@
 ## CHANGES
 
+v1.5.0
+- Update to wabac.js 2.9.0-beta.1, fidelity and loading improvements, smaller size (includes indexeddb data migration)
+- Update to electron 14, latest Chrome
+- Update to Universal builds for OS X.
+- Add Ruffle, use for Flash Rendering, both in hosted and electron app versions.
+- Embeds: Better error message for service worker not found
+
 v1.4.7
 - Loading: HAR file loading: Add messages when HAR file content is missing, don't filter out empty urls (via wabac.js)
 - Loading: Fix "null" added on Not Found error page when there is no hashtag.

_data/package.json

@@ -1,7 +1,7 @@
 {
   "name": "replaywebpage",
   "productName": "ReplayWeb.page",
-  "version": "1.4.7",
+  "version": "1.5.0",
   "description": "Serverless Web Archive Replay",
   "repository": "https://github.com/webrecorder/replayweb.page",
   "homepage": "https://replayweb.page/",
@@ -9,7 +9,7 @@
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",
-    "@webrecorder/wabac": "webrecorder/wabac.js",
+    "@webrecorder/wabac": "^2.9.0-beta.1",
     "bulma": "^0.9.2",
     "electron-log": "^4.3.0",
     "electron-updater": "^4.3.5",
@@ -28,8 +28,8 @@
   "devDependencies": {
     "copy-webpack-plugin": "^6.3.0",
     "css-loader": "^3.5.3",
-    "electron": "^11.4.11",
+    "electron": "^14.0.0-beta.24",
-    "electron-builder": "^22.7.0",
+    "electron-builder": "^22.13.1",
     "electron-notarize": "^1.0.0",
     "http-server": "^0.12.3",
     "mini-css-extract-plugin": "^0.9.0",
@@ -46,6 +46,7 @@
   "files": [
     "/assets",
     "/src",
+    "/ruffle",
     "sw.js",
     "ui.js",
     "index.js"
@@ -93,8 +94,14 @@
     "mac": {
       "category": "public.app-category.utilities",
       "target": [
-        "dmg",
+        {
-        "zip"
+          "target": "dmg",
+          "arch": "universal"
+        },
+        {
+          "target": "zip",
+          "arch": "universal"
+        }
       ],
       "hardenedRuntime": true,
       "gatekeeperAssess": false,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "replaywebpage",
   "productName": "ReplayWeb.page",
-  "version": "1.4.7",
+  "version": "1.5.0",
   "description": "Serverless Web Archive Replay",
   "repository": "https://github.com/webrecorder/replayweb.page",
   "homepage": "https://replayweb.page/",
@@ -9,7 +9,7 @@
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",
-    "@webrecorder/wabac": "webrecorder/wabac.js",
+    "@webrecorder/wabac": "^2.9.0-beta.1",
     "bulma": "^0.9.2",
     "electron-log": "^4.3.0",
     "electron-updater": "^4.3.5",
@@ -28,8 +28,8 @@
   "devDependencies": {
     "copy-webpack-plugin": "^6.3.0",
     "css-loader": "^3.5.3",
-    "electron": "^11.4.11",
+    "electron": "^14.0.0-beta.24",
-    "electron-builder": "^22.7.0",
+    "electron-builder": "^22.13.1",
     "electron-notarize": "^1.0.0",
     "http-server": "^0.12.3",
     "mini-css-extract-plugin": "^0.9.0",
@@ -46,6 +46,7 @@
   "files": [
     "/assets",
     "/src",
+    "/ruffle",
     "sw.js",
     "ui.js",
     "index.js"
@@ -93,8 +94,14 @@
     "mac": {
       "category": "public.app-category.utilities",
       "target": [
-        "dmg",
+        {
-        "zip"
+          "target": "dmg",
+          "arch": "universal"
+        },
+        {
+          "target": "zip",
+          "arch": "universal"
+        }
       ],
       "hardenedRuntime": true,
       "gatekeeperAssess": false,

ruffle/LICENSE_MIT

@@ -0,0 +1,25 @@
+Copyright (c) 2018 Mike Welsh <mwelsh@gmail.com>
+
+Permission is hereby granted, free of charge, to any
+person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the
+Software without restriction, including without
+limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software
+is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice
+shall be included in all copies or substantial portions
+of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT
+SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
+IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.

src/appmain.js

@@ -158,7 +158,8 @@ class ReplayWebApp extends LitElement
 
   renderNavBar() {
     return html`
-    <a href="#skip-main-target" @click=${this.skipMenu} class="skip-link">Skip main navigation</a>
+    ${IS_APP ? "" :
+    html`<a href="#skip-main-target" @click=${this.skipMenu} class="skip-link">Skip main navigation</a>`}
     <nav class="navbar has-background-info" aria-label="main">
       <div class="navbar-brand">
         ${!this.embed ? html`

src/electron-replay-app.js

@@ -180,13 +180,14 @@ class ElectronReplayApp
     this.screenSize = screen.getPrimaryDisplay().workAreaSize;
 
     app.on("web-contents-created", (event, contents) => {
-      contents.on("new-window", async (event, navigationUrl) => {
+      contents.setWindowOpenHandler(({url}) => {
-        
         // load docs in native browser for now
-        if (navigationUrl === STATIC_PREFIX + "docs") {
+        if (url === STATIC_PREFIX + "docs") {
-          event.preventDefault();
+          shell.openExternal("https://replayweb.page/docs/");
-          await shell.openExternal("https://replayweb.page/docs/");
+          return { action: "deny"};
         }
+
+        return { action: "allow"};
       });
     });
 

src/embed.js

@@ -55,19 +55,18 @@ class Embed extends LitElement
       hashString: { type: String },
 
       deepLink: { type: Boolean },
-      noSW: { type: Boolean },
+      noSandbox: { type: Boolean },
-      noSandbox: { type: Boolean }
+
+      errorMessage: { type: String }
     };
   }
 
   async doRegister() {
     try {
       await registerSW(this.swName, this.replaybase);
-      console.log("done");
       this.swInited = true;
     } catch (e) {
-      console.log(e);
+      this.errorMessage = e;
-      this.noSW = true;
     }
   }
 
@@ -184,16 +183,12 @@ class Embed extends LitElement
 
       ` : html``}
 
-    ${this.noSW ? html`
+    ${this.errorMessage ? html`
       <section class="full-width">
         <div class="has-text-centered">
           <fa-icon class="logo" id="wrlogo" size="2.5rem" .svg=${rwpLogo} aria-hidden="true"></fa-icon>
         </div>
-        <div class="error">
+        <div class="error">${this.errorMessage}</div>
-Sorry, ReplayWeb.page won't work in this browser as Service Workers are not supported.
-Please try a different browser.\n
-(Service Workers are disabled in Firefox in Private Mode. If Using Private Mode in Firefox, try regular mode).
-        </div>
       </section>
     `: ""}`;
   }

src/pageutils.js

@@ -11,8 +11,11 @@ function registerSW(name = "sw.js", scope = "./") {
   });
 
   if (!navigator.serviceWorker) {
-    console.error("Service Workers not supported");
+    const errMsg = `Sorry, ReplayWeb.page won't work in this browser as Service Workers are not supported.
-    reject();
+Please try a different browser.
+(Service Workers are disabled in Firefox in Private Mode. If Using Private Mode in Firefox, try regular mode)`;
+    console.error(errMsg);
+    reject(errMsg);
   }
   
   register(scope + name, {
@@ -24,7 +27,7 @@ function registerSW(name = "sw.js", scope = "./") {
 
     error (error) {
       console.error("Error during service worker registration:", error);
-      reject();
+      reject(`ReplayWeb.page could not be loaded due to the following error:\n${error.toString()}`);
     }
   });
 

src/sw.js

@@ -11,6 +11,13 @@ staticData.set(prefix + "index.html", {type: "text/html", content: INDEX_HTML});
 //staticData.set(prefix + "ui.js", {type: "application/javascript", content: UI_JS});
 
 //const { SWReplay } = require('@webrecorder/wabac/src/swmain');
+
+const defaultConfig = {
+  injectScripts: ["ruffle/ruffle.js"],
+};
+
 self.ipfsCustomPreload = true;
-self.sw = new SWReplay({staticData});
+self.sw = new SWReplay({staticData, defaultConfig});
+
+
 

webpack.config.js

@@ -57,6 +57,7 @@ const electronMainConfig = (/*env, argv*/) => {
         patterns: [
           { from: "node_modules/bcrypto/build/Release/bcrypto.node", to: "build" },
           { from: "node_modules/leveldown/prebuilds/", to: "prebuilds" },
+          { from: "ruffle/", to: "ruffle/" },
         ],
       }),
     ],