Merge pull request #1022 from jmerle/service-worker

Replace the App Cache with a Service Worker

Author: jmerle

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 .bundle
+log
 tmp
 public/assets
 public/fonts

Dockerfile

@@ -1,6 +1,7 @@
 FROM ruby:2.6.0
 
 ENV LANG=C.UTF-8
+ENV ENABLE_SERVICE_WORKER=true
 
 WORKDIR /devdocs
 

Dockerfile-alpine

@@ -1,6 +1,7 @@
 FROM ruby:2.6.0-alpine
 
 ENV LANG=C.UTF-8
+ENV ENABLE_SERVICE_WORKER=true
 
 WORKDIR /devdocs
 

README.md

@@ -59,14 +59,14 @@ The web app is all client-side JavaScript, written in [CoffeeScript](http://coff
 
 Many of the code's design decisions were driven by the fact that the app uses XHR to load content directly into the main frame. This includes stripping the original documents of most of their HTML markup (e.g. scripts and stylesheets) to avoid polluting the main frame, and prefixing all CSS class names with an underscore to prevent conflicts.
 
-Another driving factor is performance and the fact that everything happens in the browser. `applicationCache` (which comes with its own set of constraints) and `localStorage` are used to speed up the boot time, while memory consumption is kept in check by allowing the user to pick his/her own set of documentations. The search algorithm is kept simple because it needs to be fast even searching through 100,000 strings.
+Another driving factor is performance and the fact that everything happens in the browser. A service worker (which comes with its own set of constraints) and `localStorage` are used to speed up the boot time, while memory consumption is kept in check by allowing the user to pick his/her own set of documentations. The search algorithm is kept simple because it needs to be fast even searching through 100,000 strings.
 
 DevDocs being a developer tool, the browser requirements are high:
 
 * Recent versions of Firefox, Chrome, or Opera
-* Safari 9.1+
-* Edge 16+
-* iOS 10+
+* Safari 11.1+
+* Edge 17+
+* iOS 11.3+
 
 This allows the code to take advantage of the latest DOM and HTML5 APIs and make developing DevDocs a lot more fun!
 
@@ -156,7 +156,7 @@ Contributions are welcome. Please read the [contributing guidelines](./.github/C
 * [Doc Browser](https://github.com/qwfy/doc-browser) is a native Linux app that supports DevDocs docsets
 * [GNOME Application](https://github.com/hardpixel/devdocs-desktop) GTK3 application with search integrated in headerbar
 * [macOS Application](https://github.com/dteoh/devdocs-macos)
-* [Android Application](https://github.com/Merith-TK/devdocs_webapp_kotlin) is a fully working, advanced WebView with AppCache enabled
+* [Android Application](https://github.com/Merith-TK/devdocs_webapp_kotlin) is a fully working, advanced WebView
 
 ## Copyright / License
 

assets/javascripts/app/app.coffee

@@ -13,10 +13,12 @@
 
     @el = $('._app')
     @localStorage = new LocalStorageStore
-    @appCache = new app.AppCache if app.AppCache.isEnabled()
+    @serviceWorker = new app.ServiceWorker if app.ServiceWorker.isEnabled()
     @settings = new app.Settings
     @db = new app.DB()
 
+    @settings.initLayout()
+
     @docs = new app.collections.Docs
     @disabledDocs = new app.collections.Docs
     @entries = new app.collections.Entries
@@ -147,7 +149,7 @@
   saveDocs: ->
     @settings.setDocs(doc.slug for doc in @docs.all())
     @db.migrate()
-    @appCache?.updateInBackground()
+    @serviceWorker?.updateInBackground()
 
   welcomeBack: ->
     visitCount = @settings.get('count')
@@ -167,14 +169,14 @@
   reload: ->
     @docs.clearCache()
     @disabledDocs.clearCache()
-    if @appCache then @appCache.reload() else @reboot()
+    if @serviceWorker then @serviceWorker.reload() else @reboot()
     return
 
   reset: ->
     @localStorage.reset()
     @settings.reset()
     @db?.reset()
-    @appCache?.update()
+    @serviceWorker?.update()
     window.location = '/'
     return
 
@@ -193,9 +195,9 @@
     return
 
   indexHost: ->
-    # Can't load the index files from the host/CDN when applicationCache is
+    # Can't load the index files from the host/CDN when service worker is
     # enabled because it doesn't support caching URLs that use CORS.
-    @config[if @appCache and @settings.hasDocs() then 'index_path' else 'docs_origin']
+    @config[if @serviceWorker and @settings.hasDocs() then 'index_path' else 'docs_origin']
 
   onBootError: (args...) ->
     @trigger 'bootError'

assets/javascripts/app/appcache.coffee

@@ -13,3 +13,5 @@ app.config =
   version: <%= Time.now.to_i %>
   release: <%= Time.now.utc.httpdate.to_json %>
   mathml_stylesheet: '<%= App.cdn_origin %>/mathml.css'
+  service_worker_path: '/service-worker.js'
+  service_worker_enabled: <%= App.environment == 'production' || ENV['ENABLE_SERVICE_WORKER'] == 'true' %>

assets/javascripts/app/config.coffee.erb

@@ -0,0 +1,49 @@
+class app.ServiceWorker
+  $.extend @prototype, Events
+
+  @isEnabled: ->
+    !!navigator.serviceWorker and app.config.service_worker_enabled
+
+  constructor: ->
+    @registration = null
+    @notifyUpdate = true
+
+    navigator.serviceWorker.register(app.config.service_worker_path, {scope: '/'})
+      .then(
+        (registration) => @updateRegistration(registration),
+        (error) -> console.error('Could not register service worker:', error)
+      )
+
+  update: ->
+    return unless @registration
+    @notifyUpdate = true
+    return @registration.update().catch(->)
+
+  updateInBackground: ->
+    return unless @registration
+    @notifyUpdate = false
+    return @registration.update().catch(->)
+
+  reload: ->
+    return @updateInBackground().then(() -> app.reboot())
+
+  updateRegistration: (registration) ->
+    @registration = registration
+    $.on @registration, 'updatefound', @onUpdateFound
+    return
+
+  onUpdateFound: =>
+    $.off @installingRegistration, 'statechange', @onStateChange() if @installingRegistration
+    @installingRegistration = @registration.installing
+    $.on @installingRegistration, 'statechange', @onStateChange
+    return
+
+  onStateChange: =>
+    if @installingRegistration and @installingRegistration.state == 'installed' and navigator.serviceWorker.controller
+      @installingRegistration = null
+      @onUpdateReady()
+    return
+
+  onUpdateReady: ->
+    @trigger 'updateready' if @notifyUpdate
+    return

assets/javascripts/app/serviceworker.coffee

@@ -19,6 +19,8 @@ class app.Settings
     'news'
   ]
 
+  LAYOUTS: ['_max-width', '_sidebar-hidden', '_native-scrollbars']
+
   @defaults:
     count: 0
     hideDisabled: false
@@ -38,6 +40,7 @@ class app.Settings
   set: (key, value) ->
     @store.set(key, value)
     delete @cache[key]
+    @toggleDark(value) if key == 'dark'
     return
 
   del: (key) ->
@@ -63,6 +66,8 @@ class app.Settings
     return
 
   setLayout: (name, enable) ->
+    @toggleLayout(name, enable)
+
     layout = (@store.get('layout') || '').split(' ')
     $.arrayDelete(layout, '')
 
@@ -104,3 +109,28 @@ class app.Settings
     @store.reset()
     @cache = {}
     return
+
+  initLayout: ->
+    @toggleDark(@get('dark') is 1)
+    @toggleLayout(layout, @hasLayout(layout)) for layout in @LAYOUTS
+    @initSidebarWidth()
+    return
+
+  toggleDark: (enable) ->
+    classList = document.documentElement.classList
+    classList.toggle('_theme-default', !enable)
+    classList.toggle('_theme-dark', enable)
+    color = getComputedStyle(document.documentElement).getPropertyValue('--headerBackground').trim()
+    $('meta[name=theme-color]').setAttribute('content', color)
+    return
+
+  toggleLayout: (layout, enable) ->
+    classList = document.body.classList
+    classList.toggle(layout, enable) unless layout is '_sidebar-hidden'
+    classList.toggle('_overlay-scrollbars', $.overlayScrollbarsEnabled())
+    return
+
+  initSidebarWidth: ->
+    size = @get('size')
+    document.documentElement.style.setProperty('--sidebarWidth', size + 'px') if size
+    return

assets/javascripts/app/settings.coffee

@@ -3,13 +3,13 @@ class app.UpdateChecker
     @lastCheck = Date.now()
 
     $.on window, 'focus', @onFocus
-    app.appCache.on 'updateready', @onUpdateReady if app.appCache
+    app.serviceWorker?.on 'updateready', @onUpdateReady
 
     setTimeout @checkDocs, 0
 
   check: ->
-    if app.appCache
-      app.appCache.update()
+    if app.serviceWorker
+      app.serviceWorker.update()
     else
       ajax
         url: $('script[src*="application"]').getAttribute('src')