chore(release): publish [skip ci]

- @ohif/viewer@2.3.0

.eslintrc.json

@@ -16,6 +16,7 @@
   },
   "globals": {
     "cy": true,
+    "before": true,
     "context": true,
     "Cypress": true,
     "assert": true

.vscode/settings.json

@@ -1,8 +1,5 @@
 {
-  "editor.rulers": [
-    80,
-    120
-  ],
+  "editor.rulers": [80, 120],
   // ===
   // Spacing
   // ===
@@ -29,7 +26,7 @@
       "autoFix": true
     }
   ],
-  "prettier.disableLanguages": [],
+  "prettier.disableLanguages": ["html"],
   "prettier.endOfLine": "lf",
   "workbench.colorCustomizations": {}
 }

extensions/dicom-html/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.0.0...@ohif/extension-dicom-html@1.0.1) (2019-10-29)
+
+
+### Bug Fixes
+
+* Set SR viewport as active by interaction ([#1118](https://github.com/OHIF/Viewers/issues/1118)) ([5b33417](https://github.com/OHIF/Viewers/commit/5b334175c370afb930b4b6dbd307ddece8f850e3))
+
+
+
+
+
 # [1.0.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.50.8...@ohif/extension-dicom-html@1.0.0) (2019-09-27)
 
 

extensions/dicom-html/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-html",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "OHIF extension for rendering structured reports to HTML",
   "author": "OHIF",
   "license": "MIT",

extensions/dicom-html/src/ConnectedDicomHtmlViewport.js

@@ -0,0 +1,33 @@
+import OHIF from '@ohif/core';
+import { connect } from 'react-redux';
+import DicomHtmlViewport from './DicomHtmlViewport';
+
+const { setViewportActive } = OHIF.redux.actions;
+
+const mapStateToProps = (state, ownProps) => {
+  const { viewportIndex, byteArray } = ownProps;
+  const activeViewportIndex = state.viewports;
+
+  return {
+    viewportIndex,
+    activeViewportIndex,
+    byteArray,
+  };
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  const { viewportIndex } = ownProps;
+
+  return {
+    setViewportActive: () => {
+      dispatch(setViewportActive(viewportIndex));
+    },
+  };
+};
+
+const ConnectedDicomHtmlViewport = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(DicomHtmlViewport);
+
+export default ConnectedDicomHtmlViewport;

extensions/dicom-html/src/DicomHtmlViewport.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import * as dcmjs from 'dcmjs';
 import TypedArrayProp from './TypedArrayProp';
+
 import './DicomHtmlViewport.css';
 
 function getRelationshipString(data) {
@@ -30,7 +32,7 @@ function getValueString(data) {
       const {
         CodeMeaning,
         CodeValue,
-        CodingSchemeDesignator
+        CodingSchemeDesignator,
       } = data.ConceptNameCodeSequence;
 
       return `${CodeMeaning} (${CodeValue}, ${CodingSchemeDesignator})`;
@@ -75,7 +77,7 @@ function constructContentSequence(data, header) {
   }
 
   const result = {
-    items
+    items,
   };
 
   if (header) {
@@ -106,9 +108,7 @@ const { DicomMetaDictionary, DicomMessage } = dcmjs.data;
 function getMainData(data) {
   const root = [];
 
-  const patientValue = `${data.PatientName} (${data.PatientSex}, #${
-    data.PatientID
-  })`;
+  const patientValue = `${data.PatientName} (${data.PatientSex}, #${data.PatientID})`;
   root.push(getMainDataItem('Patient', patientValue));
 
   const studyValue = data.StudyDescription;
@@ -117,15 +117,13 @@ function getMainData(data) {
   const seriesValue = `${data.SeriesDescription} (#${data.SeriesNumber})`;
   root.push(getMainDataItem('Series', seriesValue));
 
-  const manufacturerValue = `${data.Manufacturer} (${
-    data.ManufacturerModelName
-  }, #${data.DeviceSerialNumber})`;
+  const manufacturerValue = `${data.Manufacturer} (${data.ManufacturerModelName}, #${data.DeviceSerialNumber})`;
 
   root.push(getMainDataItem('Manufacturer', manufacturerValue));
 
   const mainDataObjects = {
     CompletionFlag: 'Completion flag',
-    VerificationFlag: 'Verification flag'
+    VerificationFlag: 'Verification flag',
   };
 
   Object.keys(mainDataObjects).forEach(key => {
@@ -154,7 +152,7 @@ const getContentSequence = (data, level = 1) => {
     const {
       CodeMeaning,
       CodeValue,
-      CodingSchemeDesignator
+      CodingSchemeDesignator,
     } = data.ConceptNameCodeSequence;
 
     header = `${CodeMeaning} (${CodeValue} - ${CodingSchemeDesignator})`;
@@ -198,11 +196,14 @@ function getMainDataItem(key, value) {
 class DicomHtmlViewport extends Component {
   state = {
     content: null,
-    error: null
+    error: null,
   };
 
   static propTypes = {
-    byteArray: TypedArrayProp.uint8
+    byteArray: TypedArrayProp.uint8,
+    setViewportActive: PropTypes.func.isRequired,
+    viewportIndex: PropTypes.number.isRequired,
+    activeViewportIndex: PropTypes.number.isRequired,
   };
 
   componentDidMount() {
@@ -225,15 +226,34 @@ class DicomHtmlViewport extends Component {
     );
 
     this.setState({
-      content
+      content,
     });
   }
 
+  setViewportActiveHandler = () => {
+    const {
+      setViewportActive,
+      viewportIndex,
+      activeViewportIndex,
+    } = this.props;
+
+    if (viewportIndex !== activeViewportIndex) {
+      setViewportActive();
+    }
+  };
+
   render() {
+    const { content, error } = this.state;
+
     return (
-      <div className={'DicomHtmlViewport'}>
-        {this.state.content}
-        {this.state.error && <h2>{JSON.stringify(this.state.error)}</h2>}
+      <div
+        data-cy="dicom-html-viewport"
+        className="DicomHtmlViewport"
+        onClick={this.setViewportActiveHandler}
+        onScroll={this.setViewportActiveHandler}
+      >
+        {content}
+        {error && <h2>{JSON.stringify(error)}</h2>}
       </div>
     );
   }

extensions/dicom-html/src/OHIFDicomHtmlViewport.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import DicomHtmlViewport from './DicomHtmlViewport';
 import OHIF from '@ohif/core';
+import ConnectedDicomHtmlViewport from './ConnectedDicomHtmlViewport';
+
 const { DicomLoaderService } = OHIF.utils;
 
 class OHIFDicomHtmlViewport extends Component {
@@ -9,6 +10,7 @@ class OHIFDicomHtmlViewport extends Component {
     studies: PropTypes.object,
     displaySet: PropTypes.object,
     viewportIndex: PropTypes.number,
+    viewportData: PropTypes.object,
   };
 
   state = {
@@ -40,7 +42,10 @@ class OHIFDicomHtmlViewport extends Component {
     return (
       <>
         {this.state.byteArray && (
-          <DicomHtmlViewport byteArray={this.state.byteArray} />
+          <ConnectedDicomHtmlViewport
+            byteArray={this.state.byteArray}
+            viewportIndex={this.props.viewportIndex}
+          />
         )}
         {this.state.error && <h2>{JSON.stringify(this.state.error)}</h2>}
       </>

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.52.24](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.23...@ohif/extension-vtk@0.52.24) (2019-10-29)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
 ## [0.52.23](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.22...@ohif/extension-vtk@0.52.23) (2019-10-28)
 
 **Note:** Version bump only for package @ohif/extension-vtk

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "0.52.23",
+  "version": "0.52.24",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -53,7 +53,7 @@
   },
   "devDependencies": {
     "@ohif/core": "^1.6.0",
-    "@ohif/ui": "^0.58.0",
+    "@ohif/ui": "^0.58.1",
     "cornerstone-tools": "^4.0.9",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dcmjs": "^0.6.1",

netlify.toml

@@ -38,7 +38,8 @@
 [context.deploy-preview]
   base = ""
   publish = ".netlify/www/"
-  command = "yarn config set workspaces-experimental true && chmod +x .netlify/build-deploy-preview.sh && .netlify/build-deploy-preview.sh"
+  command = "chmod +x .netlify/build-deploy-preview.sh && .netlify/build-deploy-preview.sh"
+  # command = "yarn config set workspaces-experimental true && chmod +x .netlify/build-deploy-preview.sh && .netlify/build-deploy-preview.sh"
 
 [[headers]]
   # Define which paths this specific [[headers]] block will cover.

package.json

@@ -72,6 +72,7 @@
     "eslint-plugin-react": "7.x",
     "eslint-plugin-react-hooks": "1.5.0",
     "extract-css-chunks-webpack-plugin": "^4.5.4",
+    "favicons-webpack-plugin": "^1.0.2",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^3.0.0",
     "jest": "^24.8.0",
@@ -102,7 +103,7 @@
     "webpack-dev-server": "^3.7.2",
     "webpack-hot-middleware": "^2.25.0",
     "webpack-merge": "^4.2.1",
-    "workbox-webpack-plugin": "^4.3.1",
+    "workbox-webpack-plugin": "^5.0.0-beta.1",
     "worker-loader": "^2.0.0"
   },
   "husky": {

platform/ui/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.58.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.0...@ohif/ui@0.58.1) (2019-10-29)
+
+
+### Bug Fixes
+
+* **StudyList:** camel case colSpan ([#1123](https://github.com/OHIF/Viewers/issues/1123)) ([0d498ba](https://github.com/OHIF/Viewers/commit/0d498ba17ddde8d8f0c51d742770e1574041eec0))
+
+
+
+
+
 # [0.58.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.57.1...@ohif/ui@0.58.0) (2019-10-28)
 
 

platform/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/ui",
-  "version": "0.58.0",
+  "version": "0.58.1",
   "description": "A set of React components for Medical Imaging Viewers",
   "author": "OHIF Contributors",
   "license": "MIT",

platform/ui/src/components/studyList/StudyList.js

@@ -145,14 +145,14 @@ function StudyList(props) {
         {/* LOADING */}
         {isLoading && (
           <tr className="no-hover">
-            <td colspan={tableMeta.length}>
+            <td colSpan={tableMeta.length}>
               <StudyListLoadingText />
             </td>
           </tr>
         )}
         {!isLoading && hasError && (
           <tr className="no-hover">
-            <td colspan={tableMeta.length}>
+            <td colSpan={tableMeta.length}>
               <div className="notFound">
                 {t('There was an error fetching studies')}
               </div>
@@ -162,7 +162,7 @@ function StudyList(props) {
         {/* EMPTY */}
         {!isLoading && !studies.length && (
           <tr className="no-hover">
-            <td colspan={tableMeta.length}>
+            <td colSpan={tableMeta.length}>
               <div className="notFound">{t('No matching results')}</div>
             </td>
           </tr>

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

@@ -1,3 +1,4 @@
+// https://developers.google.com/web/tools/workbox/guides/codelabs/webpack
 // ~~ WebPack
 const path = require('path');
 const merge = require('webpack-merge');
@@ -9,8 +10,9 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
+// const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const WorkboxPlugin = require('workbox-webpack-plugin');
+const { InjectManifest } = require('workbox-webpack-plugin');
 const TerserJSPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 // ~~ Rules
@@ -80,12 +82,14 @@ module.exports = (env, argv) => {
         templateParameters: {
           PUBLIC_URL: PUBLIC_URL,
         },
-        // favicon: `${PUBLIC_DIR}/favicon.ico`,
       }),
-      new WorkboxPlugin.GenerateSW({
+      // No longer maintained; but good for generating icons + manifest
+      // new FaviconsWebpackPlugin( path.join(PUBLIC_DIR, 'assets', 'icons-512.png')),
+      new InjectManifest({
         swDest: 'sw.js',
-        clientsClaim: true,
-        skipWaiting: true,
+        swSrc: path.join(SRC_DIR, 'service-worker.js'),
+        // Increase the limit to 4mb:
+        // maximumFileSizeToCacheInBytes: 4 * 1024 * 1024
       }),
     ],
     // https://webpack.js.org/configuration/dev-server/

platform/viewer/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.3.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.2.2...@ohif/viewer@2.3.0) (2019-10-29)
+
+
+### Features
+
+* service worker ([#1045](https://github.com/OHIF/Viewers/issues/1045)) ([cf51368](https://github.com/OHIF/Viewers/commit/cf5136899eac08300ec4f15474a6440129ef7a9a))
+
+
+
+
+
+## [2.2.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.2.1...@ohif/viewer@2.2.2) (2019-10-29)
+
+
+### Bug Fixes
+
+* Set SR viewport as active by interaction ([#1118](https://github.com/OHIF/Viewers/issues/1118)) ([5b33417](https://github.com/OHIF/Viewers/commit/5b334175c370afb930b4b6dbd307ddece8f850e3))
+
+
+
+
+
+## [2.2.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.2.0...@ohif/viewer@2.2.1) (2019-10-29)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
 # [2.2.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.1.4...@ohif/viewer@2.2.0) (2019-10-28)
 
 

platform/viewer/cypress/integration/pwa/OHIFExtensionHTML.spec.js

@@ -22,4 +22,23 @@ describe('OHIF HTML Extension', () => {
       'Imaging Measurement Report'
     );
   });
+
+  it('checks if the HTML viewport has been set to active by interaction', () => {
+    cy.setLayout('3', '3');
+
+    // check if viewport has been set as active by CLICKING
+    cy.get('[data-cy=viewprt-grid] > :nth-child(4)')
+      .click()
+      .then($viewport => {
+        cy.wrap($viewport).should('have.class', 'active');
+      });
+
+    // check if viewport has been set as active by SCROLLING
+    cy.get('[data-cy=viewprt-grid] > :nth-child(7)').then($viewport => {
+      cy.wrap($viewport)
+        .find('[data-cy=dicom-html-viewport]')
+        .scrollTo('bottom');
+      cy.wrap($viewport).should('have.class', 'active');
+    });
+  });
 });

platform/viewer/cypress/support/commands.js

@@ -328,6 +328,21 @@ Cypress.Commands.add('percyCanvasSnapshot', (name, options = {}) => {
   });
 });
 
+Cypress.Commands.add('setLayout', (columns = 1, rows = 1) => {
+  cy.get('.toolbar-button-label')
+    .contains('Layout')
+    .click();
+
+  cy.get('.layoutChooser')
+    .find('tr')
+    .eq(rows - 1)
+    .find('td')
+    .eq(columns - 1)
+    .click();
+
+  cy.wait(1000);
+});
+
 function convertCanvas(documentClone) {
   documentClone
     .querySelectorAll('canvas')
@@ -364,4 +379,4 @@ function canvasToImage(selectorOrEl) {
   canvas.setAttribute('data-percy-canvas', true);
   canvas.parentElement.appendChild(image);
   canvas.style = 'display: none';
-}
+}

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "OHIF Viewer",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -47,12 +47,12 @@
     "@babel/runtime": "^7.5.5",
     "@ohif/core": "^1.6.0",
     "@ohif/extension-cornerstone": "^2.0.0",
-    "@ohif/extension-dicom-html": "^1.0.0",
+    "@ohif/extension-dicom-html": "^1.0.1",
     "@ohif/extension-dicom-microscopy": "^0.50.6",
     "@ohif/extension-dicom-pdf": "^1.0.0",
-    "@ohif/extension-vtk": "^0.52.23",
+    "@ohif/extension-vtk": "^0.52.24",
     "@ohif/i18n": "^0.51.0",
-    "@ohif/ui": "^0.58.0",
+    "@ohif/ui": "^0.58.1",
     "@tanem/react-nprogress": "^1.1.25",
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",

platform/viewer/public/assets/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/assets/mstile-70x70.png"/>
+            <square150x150logo src="/assets/mstile-150x150.png"/>
+            <wide310x150logo src="/assets/mstile-310x150.png"/>
+            <square310x310logo src="/assets/mstile-310x310.png"/>
+            <TileColor>#fff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

platform/viewer/public/assets/manifest.webapp

@@ -0,0 +1,14 @@
+{
+  "version": "2.2.1",
+  "name": "OHIF Viewer",
+  "description": "OHIF Viewer",
+  "icons": {
+    "60": "/assets/firefox_app_60x60.png",
+    "128": "/assets/firefox_app_128x128.png",
+    "512": "/assets/firefox_app_512x512.png"
+  },
+  "developer": {
+    "name": "OHIF Contributors",
+    "url": "https://github.com/ohif/viewers"
+  }
+}

platform/viewer/public/assets/yandex-browser-manifest.json

@@ -0,0 +1,9 @@
+{
+  "version": "2.2.1",
+  "api_version": 1,
+  "layout": {
+    "logo": "/assets/yandex-browser-50x50.png",
+    "color": "#fff",
+    "show_title": true
+  }
+}

platform/viewer/public/html-templates/index.html

@@ -1,35 +1,74 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="OHIF Viewer">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="@ohif/viewer">
+    <meta name="msapplication-TileColor" content="#fff">
+    <meta name="msapplication-TileImage" content="<%= PUBLIC_URL %>assets/mstile-144x144.png">
+    <meta name="msapplication-config" content="<%= PUBLIC_URL %>assets/browserconfig.xml">
+    <link rel="manifest" href="<%= PUBLIC_URL %>manifest.json">
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" href="<%= PUBLIC_URL %>assets/favicon.ico">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%= PUBLIC_URL %>assets/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%= PUBLIC_URL %>assets/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="57x57" href="<%= PUBLIC_URL %>assets/apple-touch-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="<%= PUBLIC_URL %>assets/apple-touch-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="<%= PUBLIC_URL %>assets/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="<%= PUBLIC_URL %>assets/apple-touch-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="<%= PUBLIC_URL %>assets/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="<%= PUBLIC_URL %>assets/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="<%= PUBLIC_URL %>assets/apple-touch-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="<%= PUBLIC_URL %>assets/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="167x167" href="<%= PUBLIC_URL %>assets/apple-touch-icon-167x167.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="<%= PUBLIC_URL %>assets/apple-touch-icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="1024x1024" href="<%= PUBLIC_URL %>assets/apple-touch-icon-1024x1024.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-320x460.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-640x920.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-640x1096.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-750x1294.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1182x2208.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1242x2148.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-748x1024.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-768x1004.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1496x2048.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1536x2008.png">
+    <link rel="icon" type="image/png" sizes="228x228" href="<%= PUBLIC_URL %>assets/coast-228x228.png">
+    <link rel="yandex-tableau-widget" href="<%= PUBLIC_URL %>assets/yandex-browser-manifest.json">
 
-  <link rel="manifest" href="<%= PUBLIC_URL %>manifest.json" />
-  <!-- Built with: https://polyfill.io/v3/url-builder/ -->
-  <!-- Targets IE11 -->
-  <script
-    src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CObject.values%2CArray.prototype.flat%2CObject.entries%2CSymbol%2CArray.prototype.includes%2CString.prototype.repeat%2CArray.prototype.find"></script>
-  <script type="text/javascript" src="<%= PUBLIC_URL %>app-config.js"></script>
+    <!-- Built with: https://polyfill.io/v3/url-builder/ -->
+    <!-- Targets IE11 -->
+    <script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CObject.values%2CArray.prototype.flat%2CObject.entries%2CSymbol%2CArray.prototype.includes%2CString.prototype.repeat%2CArray.prototype.find"></script>
+    <script type="text/javascript">
+      window.PUBLIC_URL = '<%= PUBLIC_URL %>';
+    </script>
+    <script type="text/javascript" src="<%= PUBLIC_URL %>app-config.js"></script>
+    <script type="module" src="<%= PUBLIC_URL %>init-service-worker.js"></script>
 
-  <title>OHIF Viewer</title>
+    <title>OHIF Viewer</title>
 
-  <!-- WEB FONTS -->
-  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap" rel="stylesheet" />
+    <!-- WEB FONTS -->
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap"
+      rel="stylesheet"
+    />
 
-  <!-- EXTENSIONS -->
-  <!-- <script type="text/javascript" src="path/to/some-extension.js"></script>
+    <!-- EXTENSIONS -->
+    <!-- <script type="text/javascript" src="path/to/some-extension.js"></script>
 
     <script>
       window.config.extensions = [SomeExtension];
     </script> -->
-</head>
+  </head>
 
-<body>
-  <noscript> You need to enable JavaScript to run this app. </noscript>
-
-  <div id="root"></div>
-</body>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
 
+    <div id="root"></div>
+  </body>
 </html>

platform/viewer/public/html-templates/rollbar.html

@@ -1,17 +1,53 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <meta name="theme-color" content="#000000" />
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="OHIF Viewer">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="@ohif/viewer">
+    <meta name="msapplication-TileColor" content="#fff">
+    <meta name="msapplication-TileImage" content="<%= PUBLIC_URL %>assets/mstile-144x144.png">
+    <meta name="msapplication-config" content="<%= PUBLIC_URL %>assets/browserconfig.xml">
+    <link rel="manifest" href="<%= PUBLIC_URL %>manifest.json">
 
-  <link rel="manifest" href="<%= PUBLIC_URL %>manifest.json" />
-  <!-- Built with: https://polyfill.io/v3/url-builder/ -->
-  <!-- Targets IE11 -->
+    <link rel="shortcut icon" href="<%= PUBLIC_URL %>assets/favicon.ico">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%= PUBLIC_URL %>assets/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%= PUBLIC_URL %>assets/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="57x57" href="<%= PUBLIC_URL %>assets/apple-touch-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="<%= PUBLIC_URL %>assets/apple-touch-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="<%= PUBLIC_URL %>assets/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="<%= PUBLIC_URL %>assets/apple-touch-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="<%= PUBLIC_URL %>assets/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="<%= PUBLIC_URL %>assets/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="<%= PUBLIC_URL %>assets/apple-touch-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="<%= PUBLIC_URL %>assets/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="167x167" href="<%= PUBLIC_URL %>assets/apple-touch-icon-167x167.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="<%= PUBLIC_URL %>assets/apple-touch-icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="1024x1024" href="<%= PUBLIC_URL %>assets/apple-touch-icon-1024x1024.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-320x460.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-640x920.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-640x1096.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-750x1294.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1182x2208.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1242x2148.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-748x1024.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-768x1004.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1496x2048.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1536x2008.png">
+    <link rel="icon" type="image/png" sizes="228x228" href="<%= PUBLIC_URL %>assets/coast-228x228.png">
+    <link rel="yandex-tableau-widget" href="<%= PUBLIC_URL %>assets/yandex-browser-manifest.json">
+
+    <!-- Built with: https://polyfill.io/v3/url-builder/ -->
+    <!-- Targets IE11 -->
   <script
     src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CObject.values%2CArray.prototype.flat%2CObject.entries%2CSymbol%2CArray.prototype.includes%2CString.prototype.repeat%2CArray.prototype.find"></script>
   <script type="text/javascript" src="<%= PUBLIC_URL %>app-config.js"></script>
+  <script type="module" src="<%= PUBLIC_URL %>init-service-worker.js"></script>
 
   <title>OHIF Viewer</title>
 

platform/viewer/public/init-service-worker.js

@@ -0,0 +1,52 @@
+// https://developers.google.com/web/tools/workbox/modules/workbox-window
+// All major browsers that support service worker also support native JavaScript
+// modules, so it's perfectly fine to serve this code to any browsers
+// (older browsers will just ignore it)
+//
+import { Workbox } from 'https://storage.googleapis.com/workbox-cdn/releases/5.0.0-beta.1/workbox-window.prod.mjs';
+
+var supportsServiceWorker = 'serviceWorker' in navigator;
+var isNotLocalDevelopment =
+  ['localhost', '127'].indexOf(location.hostname) === -1;
+
+if (supportsServiceWorker && isNotLocalDevelopment) {
+  const swFileLocation = window.PUBLIC_URL + 'sw.js';
+  const wb = new Workbox(swFileLocation);
+
+  // Add an event listener to detect when the registered
+  // service worker has installed but is waiting to activate.
+  wb.addEventListener('waiting', event => {
+    // customize the UI prompt accordingly.
+    const isFirstTimeUpdatedServiceWorkerIsWaiting =
+      event.wasWaitingBeforeRegister === false;
+    console.log(
+      'isFirstTimeUpdatedServiceWorkerIsWaiting',
+      isFirstTimeUpdatedServiceWorkerIsWaiting
+    );
+
+    // Assumes your app has some sort of prompt UI element
+    // that a user can either accept or reject.
+    // const prompt = createUIPrompt({
+    //  onAccept: async () => {
+    // Assuming the user accepted the update, set up a listener
+    // that will reload the page as soon as the previously waiting
+    // service worker has taken control.
+    wb.addEventListener('controlling', event => {
+      window.location.reload();
+    });
+
+    // Send a message telling the service worker to skip waiting.
+    // This will trigger the `controlling` event handler above.
+    // Note: for this to work, you have to add a message
+    // listener in your service worker. See below.
+    wb.messageSW({ type: 'SKIP_WAITING' });
+    // },
+
+    // onReject: () => {
+    //   prompt.dismiss();
+    // },
+    // });
+  });
+
+  wb.register();
+}

platform/viewer/public/manifest.json

@@ -1,8 +1,59 @@
 {
-  "short_name": "react-cornerstone-viewport",
-  "name": "react-cornerstone-viewport",
+  "name": "OHIF Viewer",
+  "short_name": "Viewer",
+  "description": "OHIF Viewer",
+  "dir": "auto",
+  "lang": "en-US",
+  "orientation": "any",
+  "icons": [
+    {
+      "src": "/assets/android-chrome-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
   "start_url": "./index.html",
+  "background_color": "#000000",
   "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "theme_color": "#20a5d6"
 }

platform/viewer/src/service-worker.js

@@ -0,0 +1,67 @@
+// https://developers.google.com/web/tools/workbox/guides/troubleshoot-and-debug
+importScripts(
+  'https://storage.googleapis.com/workbox-cdn/releases/5.0.0-beta.1/workbox-sw.js'
+);
+
+// Install newest
+// https://developers.google.com/web/tools/workbox/modules/workbox-core
+workbox.core.skipWaiting();
+workbox.core.clientsClaim();
+
+// Cache static assets that aren't precached
+workbox.routing.registerRoute(
+  /\.(?:js|css)$/,
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: 'static-resources',
+  })
+);
+
+// Cache the Google Fonts stylesheets with a stale-while-revalidate strategy.
+workbox.routing.registerRoute(
+  /^https:\/\/fonts\.googleapis\.com/,
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: 'google-fonts-stylesheets',
+  })
+);
+
+// Cache the underlying font files with a cache-first strategy for 1 year.
+workbox.routing.registerRoute(
+  /^https:\/\/fonts\.gstatic\.com/,
+  new workbox.strategies.CacheFirst({
+    cacheName: 'google-fonts-webfonts',
+    plugins: [
+      new workbox.cacheableResponse.CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+      new workbox.expiration.ExpirationPlugin({
+        maxAgeSeconds: 60 * 60 * 24 * 365, // 1 Year
+        maxEntries: 30,
+      }),
+    ],
+  })
+);
+
+// MESSAGE HANDLER
+self.addEventListener('message', event => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    switch (event.data.type) {
+      case 'SKIP_WAITING':
+        // TODO: We'll eventually want this to be user prompted
+        // workbox.core.skipWaiting();
+        // workbox.core.clientsClaim();
+        // TODO: Global notification to indicate incoming reload
+        break;
+
+      default:
+        console.warn(`SW: Invalid message type: ${event.data.type}`);
+    }
+  }
+});
+
+workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
+
+// TODO: Cache API
+// https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/cache-api
+// Store DICOMs?
+// Clear Service Worker cache?
+// navigator.storage.estimate().then(est => console.log(est)); (2GB?)