Added service worker for offline usage of graphiql. (#45)

mercurius-js · Apr 20, 2019 · 588a203 · 588a203
1 parent 84b8254
commit 588a203
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 25 deletions.
diff --git a/static/graphiql.html b/static/graphiql.html
@@ -14,33 +14,9 @@
       height: 100vh;
     }
   </style>
-  <!-- We are not vendoring these because of the patent clause in GraphiQL -->
-  <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/graphiql.css"/>
-  <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
-  <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
-  <script src="https://unpkg.com/[email protected]/graphiql.min.js"></script>
 </head>
 <body>
   <div id="main"></div>
-  <script>
-    async function fetcher (params) {
-      const res = await fetch('graphql', {
-        method: 'post',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(params),
-        credentials: 'include'
-      })
-
-      return res.json()
-    }
-
-    ReactDOM.render(
-      React.createElement(GraphiQL, { fetcher }),
-      document.getElementById('main')
-    )
-  </script>
+  <script src="./main.js"></script>
 </body>
 </html>
diff --git a/static/main.js b/static/main.js
@@ -0,0 +1,60 @@
+/* global fetch:false React:false ReactDOM:false GraphiQL:false */
+
+const importer = {
+  url: (url) => {
+    return new Promise((resolve, reject) => {
+      let script = document.createElement('script')
+      script.type = 'text/javascript'
+      script.src = url
+      script.addEventListener('load', () => resolve(script), false)
+      script.addEventListener('error', (err) => reject(err), false)
+      document.body.appendChild(script)
+    })
+  },
+  urls: (urls) => {
+    return Promise.all(urls.map(importer.url))
+  }
+}
+
+function render () {
+  async function fetcher (params) {
+    const res = await fetch('graphql', {
+      method: 'post',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params),
+      credentials: 'include'
+    })
+
+    return res.json()
+  }
+
+  ReactDOM.render(
+    React.createElement(GraphiQL, { fetcher }),
+    document.getElementById('main')
+  )
+}
+
+if ('serviceWorker' in navigator) {
+  navigator
+    .serviceWorker
+    .register('./sw.js')
+    .then(function () {
+      var link = document.createElement('link')
+      link.href = 'https://unpkg.com/[email protected]/graphiql.css'
+      link.type = 'text/css'
+      link.rel = 'stylesheet'
+      link.media = 'screen,print'
+      document.getElementsByTagName('head')[0].appendChild(link)
+
+      return importer.urls([
+        'https://unpkg.com/[email protected]/dist/react.min.js',
+        'https://unpkg.com/[email protected]/dist/react-dom.min.js',
+        'https://unpkg.com/[email protected]/graphiql.min.js'
+      ])
+    }).then(render)
+} else {
+  render()
+}
diff --git a/static/sw.js b/static/sw.js
@@ -0,0 +1,25 @@
+/* global fetch:false caches:false self:false */
+
+self.addEventListener('install', function (e) {
+  e.waitUntil(
+    caches.open('graphiql-v1').then(function (cache) {
+      return cache.addAll([
+        './main.js',
+        'https://unpkg.com/[email protected]/graphiql.css',
+        'https://unpkg.com/[email protected]/dist/react.min.js',
+        'https://unpkg.com/[email protected]/dist/react-dom.min.js',
+        'https://unpkg.com/[email protected]/graphiql.min.js'
+      ])
+    })
+  )
+})
+
+self.addEventListener('fetch', function (event) {
+  console.log('loading', event.request.url)
+
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request)
+    }, console.log)
+  )
+})