Merge pull request #62 from ochafik/main

Merge offline support updates

LICENSE.md

@@ -34,6 +34,7 @@ The WASM build was made possible by https://github.com/DSchroer/openscad-wasm.
 * [double-conversion](#double-conversion)
 * [Liberation Fonts](#liberation-fonts)
 * [Noto Fonts](#noto-fonts)
+* [Fork me on GitHub CSS ribbon](#fork-me-on-github-css-ribbon)
 * [SCAD Libraries](#scad-libraries)
   + [BOSL2](#bosl2)
   + [NopSCADlib](#nopscadlib)
@@ -876,6 +877,34 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 ```
 
+## Fork me on GitHub CSS ribbon
+
+https://github.com/simonwhitaker/github-fork-ribbon-css
+
+```
+The MIT License (MIT)
+
+Copyright (c) 2013 Simon Whitaker
+
+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.
+```
+
 ## Common licenses
 
 These are linked from a few of the packages listed above.

Makefile

@@ -45,9 +45,7 @@ clean:
 	rm -fR src/wasm
 
 dist/index.js: public
-	npm run build2
-	# mkdir -f build/libraries
-	# cp -f public/libraries/*.zip build/libraries
+	npm run build
 
 dist/openscad-worker.js: src/openscad-worker.ts
 	npx rollup -c

package.json

@@ -71,6 +71,7 @@
     "tslib": "^2.5.0",
     "webpack": "^5.76.3",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.2"
+    "webpack-dev-server": "^4.15.2",
+    "workbox-webpack-plugin": "^7.1.0"
   }
 }

public/gh-fork-ribbon.min.css

@@ -0,0 +1,5 @@
+/*!
+ * "Fork me on GitHub" CSS ribbon v0.2.3 | MIT License
+ * https://github.com/simonwhitaker/github-fork-ribbon-css
+*/.github-fork-ribbon{width:12.1em;height:12.1em;position:absolute;overflow:hidden;top:0;right:0;z-index:9999;pointer-events:none;font-size:13px;text-decoration:none;text-indent:-999999px}.github-fork-ribbon.fixed{position:fixed}.github-fork-ribbon:active,.github-fork-ribbon:hover{background-color:rgba(0,0,0,0)}.github-fork-ribbon:after,.github-fork-ribbon:before{position:absolute;display:block;width:15.38em;height:1.54em;top:3.23em;right:-3.23em;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.github-fork-ribbon:before{content:"";padding:.38em 0;background-color:#a00;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.15)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));background-image:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));background-image:-ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));background-image:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.15));-webkit-box-shadow:0 .15em .23em 0 rgba(0,0,0,.5);-moz-box-shadow:0 .15em .23em 0 rgba(0,0,0,.5);box-shadow:0 .15em .23em 0 rgba(0,0,0,.5);pointer-events:auto}.github-fork-ribbon:after{content:attr(data-ribbon);color:#fff;font:700 1em "Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.54em;text-decoration:none;text-shadow:0 -.08em rgba(0,0,0,.5);text-align:center;text-indent:0;padding:.15em 0;margin:.15em 0;border-width:.08em 0;border-style:dotted;border-color:#fff;border-color:rgba(255,255,255,.7)}.github-fork-ribbon.left-bottom,.github-fork-ribbon.left-top{right:auto;left:0}.github-fork-ribbon.left-bottom,.github-fork-ribbon.right-bottom{top:auto;bottom:0}.github-fork-ribbon.left-bottom:after,.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.left-top:after,.github-fork-ribbon.left-top:before{right:auto;left:-3.23em}.github-fork-ribbon.left-bottom:after,.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.right-bottom:after,.github-fork-ribbon.right-bottom:before{top:auto;bottom:3.23em}.github-fork-ribbon.left-top:after,.github-fork-ribbon.left-top:before,.github-fork-ribbon.right-bottom:after,.github-fork-ribbon.right-bottom:before{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
+/*# sourceMappingURL=gh-fork-ribbon.min.css.map */

public/index.html

@@ -30,12 +30,16 @@
     <link rel="prefetch" href="libraries/UB.scad.zip">
     <link rel="prefetch" href="libraries/openscad-tray.zip">
 
+    <!-- <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js" defer></script> -->
+    <script type="module" src="./model-viewer.min.js" defer></script>
+    
     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/BrowserFS/2.0.0/browserfs.min.js" defer></script> -->
     <script src="./browserfs.min.js" defer></script>
 
     <script src="./index.js" defer></script>
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css">
+    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css"> -->
+    <link rel="stylesheet" href="./gh-fork-ribbon.min.css">
 
     <style>
       #root,

src/index.tsx

@@ -32,7 +32,32 @@ if (process.env.NODE_ENV !== 'production') {
 declare var BrowserFS: BrowserFSInterface
 
 
-(async () => {
+
+window.addEventListener('load', async () => {
+  //*
+  if ('serviceWorker' in navigator) {
+      try {
+          const registration = await navigator.serviceWorker.register('./sw.js');
+          console.log('ServiceWorker registration successful with scope: ', registration.scope);
+
+          registration.onupdatefound = () => {
+              const installingWorker = registration.installing;
+              if (installingWorker) {
+                installingWorker.onstatechange = () => {
+                    if (installingWorker.state === 'installed' && navigator.serviceWorker.controller) {
+                        // Reload to activate the service worker and apply caching
+                        window.location.reload();
+                        return;
+                    }
+                };
+              }
+          };
+      } catch (err) {
+          console.log('ServiceWorker registration failed: ', err);
+      }
+  }
+  //*/
+  
   registerCustomAppHeightCSSProperty();
 
   const fs = await createEditorFS({prefix: '/', allowPersistence: isInStandaloneMode});
@@ -73,6 +98,6 @@ declare var BrowserFS: BrowserFSInterface
       <App initialState={initialState} statePersister={statePersister} fs={fs} />
     </React.StrictMode>
   );
-})();
+});
 
 

webpack.config.js

@@ -1,8 +1,9 @@
 const CopyPlugin = require("copy-webpack-plugin");
+const WorkboxPlugin = require('workbox-webpack-plugin');
 
 const path = require('path');
 
-module.exports = {
+module.exports = [{
   entry: './src/index.tsx',
   // devtool: 'inline-source-map',
   module: {
@@ -41,6 +42,25 @@ module.exports = {
     port: 4000,
   },
   plugins: [
+    new WorkboxPlugin.GenerateSW({ 
+        // these options encourage the ServiceWorkers to get in there fast     
+        // and not allow any straggling "old" SWs to hang around     
+        swDest: path.join(__dirname, "dist", 'sw.js'),
+        maximumFileSizeToCacheInBytes: 200 * 1024 * 1024,
+        clientsClaim: true,
+        skipWaiting: true,
+        runtimeCaching: [{
+          urlPattern: ({request, url}) => true,
+          handler: 'StaleWhileRevalidate',
+          options: {
+            cacheName: 'all',
+            expiration: {
+              maxEntries: 1000,
+              purgeOnQuotaError: true,
+            },
+          },
+        }],
+    }),
     new CopyPlugin({
       patterns: [
         { 
@@ -59,4 +79,22 @@ module.exports = {
       ],
     }),
   ],
-};
+}/*, {
+  entry: './src/sw.ts',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  output: {
+    filename: 'sw.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+}*/];