* fix: 🐛 Enabling workbox to cache webfonts and fonts-stylesheets, add local fonts for UMD build (#906)

* fix: 🐛 commonjs/umd fonts import

Importing font into index-umd.js and creating a simple font css file
with font-face

Closes: #724

* fix: 🐛 Enabling workbox to cache webfonts and fonts-stylesheets

Closes: #724

* fix: 🐛 Adding all type of fonts from google - Roboto

Closes: #724

platform/viewer/.webpack/webpack.pwa.js

@@ -102,6 +102,32 @@ module.exports = (env, argv) => {
         swDest: 'sw.js',
         clientsClaim: true,
         skipWaiting: true,
+        exclude: [
+          new RegExp('^https://fonts.googleapis.com/'),
+          new RegExp('^https://fonts.gstatic.com/'),
+        ],
+        runtimeCaching: [
+          {
+            urlPattern: new RegExp('^https://fonts.googleapis.com/'),
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'google-fonts-stylesheets',
+            },
+          },
+          {
+            urlPattern: new RegExp('^https://fonts.gstatic.com/'),
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'google-fonts-webfonts',
+
+              // Only cache 30 images / one year.
+              expiration: {
+                maxAgeSeconds: 60 * 60 * 24 * 365,
+                maxEntries: 30,
+              },
+            },
+          },
+        ],
       }),
     ],
     // https://webpack.js.org/configuration/dev-server/

platform/viewer/src/fonts/fonts.css

@@ -0,0 +1,74 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'),
+    url('./KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'),
+    url('./KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2') format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'),
+    url('./KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'),
+    url('./KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'),
+    url('./KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'),
+    url('./KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'),
+    url('./KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}

platform/viewer/src/index-umd.js

@@ -7,6 +7,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.js';
 
+import './fonts/fonts.css';
+
 function installViewer(props, containerId = 'root', callback) {
   const container = document.getElementById(containerId);