diff --git a/.gitignore b/.gitignore index 1060fcf0..f89ecb61 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ .DS_Store .bundle +log tmp public/assets public/fonts diff --git a/Dockerfile b/Dockerfile index 77443edd..420bd195 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,6 +1,7 @@ FROM ruby:2.6.0 ENV LANG=C.UTF-8 +ENV ENABLE_SERVICE_WORKER=true WORKDIR /devdocs diff --git a/Dockerfile-alpine b/Dockerfile-alpine index 5bd25afe..a5d993f7 100644 --- a/Dockerfile-alpine +++ b/Dockerfile-alpine @@ -1,6 +1,7 @@ FROM ruby:2.6.0-alpine ENV LANG=C.UTF-8 +ENV ENABLE_SERVICE_WORKER=true WORKDIR /devdocs diff --git a/README.md b/README.md index 3c652e9f..630142d4 100644 --- a/README.md +++ b/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 diff --git a/assets/javascripts/app/app.coffee b/assets/javascripts/app/app.coffee index ab67a92a..0928f45b 100644 --- a/assets/javascripts/app/app.coffee +++ b/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' diff --git a/assets/javascripts/app/appcache.coffee b/assets/javascripts/app/appcache.coffee deleted file mode 100644 index 235cae02..00000000 --- a/assets/javascripts/app/appcache.coffee +++ /dev/null @@ -1,42 +0,0 @@ -class app.AppCache - $.extend @prototype, Events - - @isEnabled: -> - try - applicationCache and applicationCache.status isnt applicationCache.UNCACHED - catch - - constructor: -> - @cache = applicationCache - @notifyUpdate = true - @onUpdateReady() if @cache.status is @cache.UPDATEREADY - - $.on @cache, 'progress', @onProgress - $.on @cache, 'updateready', @onUpdateReady - - update: -> - @notifyUpdate = true - @notifyProgress = true - try @cache.update() catch - return - - updateInBackground: -> - @notifyUpdate = false - @notifyProgress = false - try @cache.update() catch - return - - reload: -> - $.on @cache, 'updateready noupdate error', -> app.reboot() - @notifyUpdate = false - @notifyProgress = true - try @cache.update() catch - return - - onProgress: (event) => - @trigger 'progress', event if @notifyProgress - return - - onUpdateReady: => - @trigger 'updateready' if @notifyUpdate - return diff --git a/assets/javascripts/app/config.coffee.erb b/assets/javascripts/app/config.coffee.erb index ec26b697..2f506764 100644 --- a/assets/javascripts/app/config.coffee.erb +++ b/assets/javascripts/app/config.coffee.erb @@ -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' %> diff --git a/assets/javascripts/app/serviceworker.coffee b/assets/javascripts/app/serviceworker.coffee new file mode 100644 index 00000000..40235566 --- /dev/null +++ b/assets/javascripts/app/serviceworker.coffee @@ -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 diff --git a/assets/javascripts/app/settings.coffee b/assets/javascripts/app/settings.coffee index 8d309c41..1d2e43bd 100644 --- a/assets/javascripts/app/settings.coffee +++ b/assets/javascripts/app/settings.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 diff --git a/assets/javascripts/app/update_checker.coffee b/assets/javascripts/app/update_checker.coffee index 5630b488..3558d6bc 100644 --- a/assets/javascripts/app/update_checker.coffee +++ b/assets/javascripts/app/update_checker.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') diff --git a/assets/javascripts/templates/error_tmpl.coffee b/assets/javascripts/templates/error_tmpl.coffee index c4bf40ec..9cca1f9d 100644 --- a/assets/javascripts/templates/error_tmpl.coffee +++ b/assets/javascripts/templates/error_tmpl.coffee @@ -12,8 +12,8 @@ app.templates.notFoundPage = -> app.templates.pageLoadError = -> error """ The page failed to load. """, - """ It may be missing from the server (try reloading the app) or you could be offline.
- If you keep seeing this, you're likely behind a proxy or firewall that blocks cross-domain requests. """, + """ It may be missing from the server (try reloading the app) or you could be offline (try installing the documentation for offline usage when online again).
+ If you're online and you keep seeing this, you're likely behind a proxy or firewall that blocks cross-domain requests. """, """ #{back} · Reload · Retry """ @@ -57,9 +57,9 @@ app.templates.unsupportedBrowser = """

DevDocs is an API documentation browser which supports the following browsers:

  • Recent versions of Firefox, Chrome, or Opera -
  • Safari 9.1+ -
  • Edge 16+ -
  • iOS 10+ +
  • Safari 11.1+ +
  • Edge 17+ +
  • iOS 11.3+

If you're unable to upgrade, we apologize. diff --git a/assets/javascripts/templates/pages/offline_tmpl.coffee b/assets/javascripts/templates/pages/offline_tmpl.coffee index a9a3c21c..bb9e06e8 100644 --- a/assets/javascripts/templates/pages/offline_tmpl.coffee +++ b/assets/javascripts/templates/pages/offline_tmpl.coffee @@ -25,8 +25,8 @@ app.templates.offlinePage = (docs) -> """

Questions & Answers

How does this work? -
Each page is cached as a key-value pair in IndexedDB (downloaded from a single file).
- The app also uses AppCache and localStorage to cache the assets and index files. +
Each page is cached as a key-value pair in IndexedDB (downloaded from a single file).
+ The app also uses Service Workers and localStorage to cache the assets and index files.
Can I close the tab/browser?
#{canICloseTheTab()}
What if I don't update a documentation? @@ -41,10 +41,15 @@ app.templates.offlinePage = (docs) -> """ """ canICloseTheTab = -> - if app.AppCache.isEnabled() + if app.ServiceWorker.isEnabled() """ Yes! Even offline, you can open a new tab, go to devdocs.io, and everything will work as if you were online (provided you installed all the documentations you want to use beforehand). """ else - """ No. AppCache isn't available in your browser (or is disabled), so loading devdocs.io offline won't work.
+ reason = "aren't available in your browser (or are disabled)" + + if app.config.env != 'production' + reason = "are disabled in your development instance of DevDocs (enable them by setting the ENABLE_SERVICE_WORKER environment variable to true)" + + """ No. Service Workers #{reason}, so loading devdocs.io offline won't work.
The current tab will continue to function even when you go offline (provided you installed all the documentations beforehand). """ app.templates.offlineDoc = (doc, status) -> diff --git a/assets/javascripts/templates/pages/root_tmpl.coffee.erb b/assets/javascripts/templates/pages/root_tmpl.coffee.erb index 7adce7fd..a94a99a0 100644 --- a/assets/javascripts/templates/pages/root_tmpl.coffee.erb +++ b/assets/javascripts/templates/pages/root_tmpl.coffee.erb @@ -8,7 +8,7 @@ app.templates.intro = """

Thanks for downloading DevDocs. Here are a few things you should know:

  1. Your local version of DevDocs won't self-update. Unless you're modifying the code, - I recommend using the hosted version at devdocs.io. + we recommend using the hosted version at devdocs.io.
  2. Run thor docs:list to see all available documentations.
  3. Run thor docs:download <name> to download documentations.
  4. Run thor docs:download --installed to update all downloaded documentations. diff --git a/assets/javascripts/views/content/entry_page.coffee b/assets/javascripts/views/content/entry_page.coffee index beae4d77..d11291a3 100644 --- a/assets/javascripts/views/content/entry_page.coffee +++ b/assets/javascripts/views/content/entry_page.coffee @@ -123,7 +123,7 @@ class app.views.EntryPage extends app.View @render @tmpl('pageLoadError') @resetClass() @addClass @constructor.errorClass - app.appCache?.update() + app.serviceWorker?.update() return cache: -> diff --git a/assets/javascripts/views/content/settings_page.coffee b/assets/javascripts/views/content/settings_page.coffee index e39b17df..af2e9a9d 100644 --- a/assets/javascripts/views/content/settings_page.coffee +++ b/assets/javascripts/views/content/settings_page.coffee @@ -1,7 +1,4 @@ class app.views.SettingsPage extends app.View - LAYOUTS = ['_max-width', '_sidebar-hidden', '_native-scrollbars'] - SIDEBAR_HIDDEN_LAYOUT = '_sidebar-hidden' - @className: '_static' @events: @@ -17,25 +14,18 @@ class app.views.SettingsPage extends app.View settings.dark = app.settings.get('dark') settings.smoothScroll = !app.settings.get('fastScroll') settings.arrowScroll = app.settings.get('arrowScroll') - settings[layout] = app.settings.hasLayout(layout) for layout in LAYOUTS + settings[layout] = app.settings.hasLayout(layout) for layout in app.settings.LAYOUTS settings getTitle: -> 'Preferences' toggleDark: (enable) -> - html = document.documentElement - html.classList.toggle('_theme-default') - html.classList.toggle('_theme-dark') app.settings.set('dark', !!enable) - app.appCache?.updateInBackground() return toggleLayout: (layout, enable) -> - document.body.classList[if enable then 'add' else 'remove'](layout) unless layout is SIDEBAR_HIDDEN_LAYOUT - document.body.classList[if $.overlayScrollbarsEnabled() then 'add' else 'remove']('_overlay-scrollbars') app.settings.setLayout(layout, enable) - app.appCache?.updateInBackground() return toggleSmoothScroll: (enable) -> diff --git a/assets/javascripts/views/layout/resizer.coffee b/assets/javascripts/views/layout/resizer.coffee index 86bb46f5..5584bfbe 100644 --- a/assets/javascripts/views/layout/resizer.coffee +++ b/assets/javascripts/views/layout/resizer.coffee @@ -11,9 +11,6 @@ class app.views.Resizer extends app.View init: -> @el.setAttribute('draggable', 'true') @appendTo $('._app') - - @style = $('style[data-resizer]') - @size = @style.getAttribute('data-size') return MIN = 260 @@ -24,15 +21,11 @@ class app.views.Resizer extends app.View return unless value > 0 value = Math.min(Math.max(Math.round(value), MIN), MAX) newSize = "#{value}px" - @style.innerHTML = @style.innerHTML.replace(new RegExp(@size, 'g'), newSize) - @size = newSize - if save - app.settings.setSize(value) - app.appCache?.updateInBackground() + document.documentElement.style.setProperty('--sidebarWidth', newSize) + app.settings.setSize(value) if save return onDragStart: (event) => - @style.removeAttribute('disabled') event.dataTransfer.effectAllowed = 'link' event.dataTransfer.setData('Text', '') $.on(window, 'dragover', @onDrag) diff --git a/assets/javascripts/views/layout/settings.coffee b/assets/javascripts/views/layout/settings.coffee index 7888118a..6941b9cd 100644 --- a/assets/javascripts/views/layout/settings.coffee +++ b/assets/javascripts/views/layout/settings.coffee @@ -25,7 +25,6 @@ class app.views.Settings extends app.View if super @render() document.body.classList.remove(SIDEBAR_HIDDEN_LAYOUT) - app.appCache?.on 'progress', @onAppCacheProgress return deactivate: -> @@ -33,7 +32,6 @@ class app.views.Settings extends app.View @resetClass() @docPicker.detach() document.body.classList.add(SIDEBAR_HIDDEN_LAYOUT) if app.settings.hasLayout(SIDEBAR_HIDDEN_LAYOUT) - app.appCache?.off 'progress', @onAppCacheProgress return render: -> @@ -52,7 +50,7 @@ class app.views.Settings extends app.View docs = @docPicker.getSelectedDocs() app.settings.setDocs(docs) - @saveBtn.textContent = if app.appCache then 'Downloading\u2026' else 'Saving\u2026' + @saveBtn.textContent = 'Saving\u2026' disabledDocs = new app.collections.Docs(doc for doc in app.docs.all() when docs.indexOf(doc.slug) is -1) disabledDocs.uninstall -> app.db.migrate() @@ -83,9 +81,3 @@ class app.views.Settings extends app.View $.stopEvent(event) app.router.show '/' return - - onAppCacheProgress: (event) => - if event.lengthComputable - percentage = Math.round event.loaded * 100 / event.total - @saveBtn.textContent = "Downloading\u2026 (#{percentage}%)" - return diff --git a/docs/maintainers.md b/docs/maintainers.md index 48d50b81..da7e910e 100644 --- a/docs/maintainers.md +++ b/docs/maintainers.md @@ -83,7 +83,7 @@ In addition to the [publicly-documented commands](https://github.com/freeCodeCam Once docs have been uploaded via `thor docs:upload` (if applicable), you can push to the DevDocs master branch (or merge the PR containing the updates). If the Travis build succeeds, the Heroku application will be deployed automatically. -- If you're deploying documentation updates, verify that the documentations work properly once the deploy is done (you will need to reload [devdocs.io](https://devdocs.io/) a couple times for the application cache to update and the new version to load). +- If you're deploying documentation updates, verify that the documentations work properly once the deploy is done. Keep in mind that you'll need to wait a few seconds for the service worker to finish caching the new assets. You should see a "DevDocs has been updated" notification appear when the caching is done, after which you need to refresh the page to see the changes. - If you're deploying frontend changes, monitor [Sentry](https://sentry.io/devdocs/devdocs-js/) for new JS errors once the deploy is done. - If you're deploying server changes, monitor New Relic (accessible through [the Heroku dashboard](https://dashboard.heroku.com/apps/devdocs)) for Ruby exceptions and throughput or response time changes once the deploy is done. diff --git a/lib/app.rb b/lib/app.rb index 32cac31b..b9c5bada 100644 --- a/lib/app.rb +++ b/lib/app.rb @@ -192,35 +192,47 @@ class App < Sinatra::Application request.query_string.empty? ? nil : "?#{request.query_string}" end - def manifest_asset_urls - @@manifest_asset_urls ||= [ + def service_worker_asset_urls + @@service_worker_asset_urls ||= [ javascript_path('application', asset_host: false), stylesheet_path('application'), image_path('docs-1.png'), image_path('docs-1@2x.png'), image_path('docs-2.png'), image_path('docs-2@2x.png'), - asset_path('docs.js') - ] + asset_path('docs.js'), + App.production? ? nil : javascript_path('debug'), + ].compact end - def app_size - @app_size ||= memoized_cookies['size'].nil? ? '20rem' : "#{memoized_cookies['size']}px" - end + # Returns a cache name for the service worker to use which changes if any of the assets changes + # When a manifest exist, this name is only created once based on the asset manifest because it never changes without a server restart + # If a manifest does not exist, it is created every time this method is called because the assets can change while the server is running + def service_worker_cache_name + if File.exist?(App.assets_manifest_path) + if defined?(@@service_worker_cache_name) + return @@service_worker_cache_name + end - def app_layout - memoized_cookies['layout'] - end + digest = Sprockets::Manifest + .new(nil, App.assets_manifest_path) + .files + .values + .map {|file| file["digest"]} + .join - def app_theme - @app_theme ||= memoized_cookies['dark'].nil? ? 'default' : 'dark' - end + return @@service_worker_cache_name ||= Digest::MD5.hexdigest(digest) + else + paths = App.sprockets + .each_file + .to_a + .reject {|file| file.start_with?(App.docs_path)} - def dark_theme? - app_theme == 'dark' + return App.sprockets.pack_hexdigest(App.sprockets.files_digest(paths)) + end end - def redirect_via_js(path) # courtesy of HTML5 App Cache + def redirect_via_js(path) response.set_cookie :initial_path, value: path, expires: Time.now + 15, path: '/' redirect '/', 302 end @@ -243,15 +255,15 @@ class App < Sinatra::Application end end - get '/manifest.appcache' do - content_type 'text/cache-manifest' + get '/service-worker.js' do + content_type 'application/javascript' expires 0, :'no-cache' - erb :manifest + erb :'service-worker.js' end get '/' do return redirect "/#q=#{params[:q]}" if params[:q] - return redirect '/' unless request.query_string.empty? # courtesy of HTML5 App Cache + return redirect '/' unless request.query_string.empty? response.headers['Content-Security-Policy'] = settings.csp if settings.csp erb :index end diff --git a/public/images/webapp-icon-192.png b/public/images/webapp-icon-192.png new file mode 100644 index 00000000..d1d1dd75 Binary files /dev/null and b/public/images/webapp-icon-192.png differ diff --git a/public/manifest.json b/public/manifest.json index 1faa5978..301c56d1 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -4,6 +4,7 @@ "description": "API Documentation Browser", "start_url": "/", "display": "standalone", + "background_color": "#EEEEEE", "icons": [ { "src": "/images/webapp-icon-32.png", @@ -25,6 +26,11 @@ "sizes": "128x128", "type": "image/png" }, + { + "src": "/images/webapp-icon-192.png", + "sizes": "192x192", + "type": "image/png" + }, { "src": "/images/webapp-icon-256.png", "sizes": "256x256", diff --git a/test/app_test.rb b/test/app_test.rb index 92a24acd..8e9e369b 100644 --- a/test/app_test.rb +++ b/test/app_test.rb @@ -43,35 +43,6 @@ class AppTest < MiniTest::Spec assert last_response.redirect? assert_equal 'https://example.org/', last_response['Location'] end - - it "sets default size" do - get '/' - assert_includes last_response.body, 'data-size="20rem"' - end - - it "sets size from cookie" do - set_cookie('size=42') - get '/' - assert_includes last_response.body, 'data-size="42px"' - end - - it "sets layout from cookie" do - set_cookie('layout=foo') - get '/' - assert_includes last_response.body, '' - end - - it "sets the theme from cookie" do - get '/' - assert_match %r{]*class="[^\"]*_theme-default}, last_response.body - refute_includes last_response.body, '_theme-dark' - - set_cookie('dark=1') - - get '/' - assert_match %r{]*class="[^\"]*_theme-dark}, last_response.body - refute_includes last_response.body, '_theme-default' - end end describe "/[static-page]" do @@ -106,58 +77,6 @@ class AppTest < MiniTest::Spec end end - describe "/manifest.appcache" do - it "works" do - get '/manifest.appcache' - assert last_response.ok? - end - - it "works with cookie" do - set_cookie('docs=css/html~5') - get '/manifest.appcache' - assert last_response.ok? - assert_includes last_response.body, '/css/index.json?1420139788' - assert_includes last_response.body, '/html~5/index.json?1420139791' - end - - it "ignores invalid docs in the cookie" do - set_cookie('docs=foo') - get '/manifest.appcache' - assert last_response.ok? - refute_includes last_response.body, 'foo' - end - - it "has the word 'default' when no 'dark' cookie is set" do - get '/manifest.appcache' - assert_includes last_response.body, '# default' - refute_includes last_response.body, '# dark' - end - - it "has the word 'dark' when the cookie is set" do - set_cookie('dark=1') - get '/manifest.appcache' - assert_includes last_response.body, '# dark' - refute_includes last_response.body, '# default' - end - - it "sets default size" do - get '/manifest.appcache' - assert_includes last_response.body, '20rem' - end - - it "sets size from cookie" do - set_cookie('size=42') - get '/manifest.appcache' - assert_includes last_response.body, '42px' - end - - it "sets layout from cookie" do - set_cookie('layout=foo_layout') - get '/manifest.appcache' - assert_includes last_response.body, 'foo_layout' - end - end - describe "/[doc]" do it "renders when the doc exists and isn't enabled" do set_cookie('docs=html~5') diff --git a/views/app.erb b/views/app.erb index 7cffabd0..ffaa1bf3 100644 --- a/views/app.erb +++ b/views/app.erb @@ -28,13 +28,7 @@
    -
    - <% unless @doc %> - <% App.docs.each do |slug, doc| %> - <%= doc['full_name'] %> - <% end %> - <% end %> -
    +
    @@ -63,9 +57,3 @@ - diff --git a/views/index.erb b/views/index.erb index 022e927f..4fb96153 100644 --- a/views/index.erb +++ b/views/index.erb @@ -1,5 +1,5 @@ - prefix="og: http://ogp.me/ns#" lang="en" class="_booting _theme-<%= app_theme %>"> + @@ -14,6 +14,7 @@ + DevDocs API Documentation @@ -32,7 +33,7 @@ <%= stylesheet_tag 'application' %> -> + <%= erb :app -%> <%= javascript_tag 'application', asset_host: false %> diff --git a/views/manifest.erb b/views/manifest.erb deleted file mode 100644 index 9d2df923..00000000 --- a/views/manifest.erb +++ /dev/null @@ -1,14 +0,0 @@ -CACHE MANIFEST -# <%= app_theme %> <%= app_size %> <%= app_layout %> - -CACHE: -/ -<%= manifest_asset_urls.join "\n" %> -<%= doc_index_urls.join "\n" %> - -NETWORK: -/s/ -* - -FALLBACK: -/ / diff --git a/views/other.erb b/views/other.erb index ee9b8de1..45cab943 100644 --- a/views/other.erb +++ b/views/other.erb @@ -1,10 +1,11 @@ - + <% if doc_index_page? %><% else %><% end %> + DevDocs<%= " — #{@doc['full_name']} documentation" if doc_index_page? %> @@ -13,7 +14,7 @@ <%= stylesheet_tag 'application' %> - data-doc="<%= CGI::escape_html @doc.to_json %>"> + <%= erb :app -%> <%= javascript_tag 'application', asset_host: false %><% unless App.production? %> diff --git a/views/service-worker.js.erb b/views/service-worker.js.erb new file mode 100644 index 00000000..8d5698a7 --- /dev/null +++ b/views/service-worker.js.erb @@ -0,0 +1,49 @@ +<%# The name of the cache to store responses in %> +<%# If the cache name changes DevDocs is assumed to be updated %> +const cacheName = '<%= service_worker_cache_name %>'; + +<%# Url's to cache when the service worker is installed %> +const urlsToCache = [ + '/', + '/favicon.ico', + '/manifest.json', + '<%= service_worker_asset_urls.join "',\n '" %>', + '<%= doc_index_urls.join "',\n '" %>', +]; + +<%# Set-up the cache %> +self.addEventListener('install', event => { + self.skipWaiting(); + + event.waitUntil( + caches.open(cacheName).then(cache => cache.addAll(urlsToCache)), + ); +}); + +<%# Remove old caches %> +self.addEventListener('activate', event => { + event.waitUntil((async () => { + const keys = await caches.keys(); + const jobs = keys.map(key => key !== cacheName ? caches.delete(key) : Promise.resolve()); + return Promise.all(jobs); + })()); +}); + +<%# Handle HTTP requests %> +self.addEventListener('fetch', event => { + event.respondWith((async () => { + const cachedResponse = await caches.match(event.request); + if (cachedResponse) return cachedResponse; + + const url = new URL(event.request.url); + + <%# Attempt to return the index page from the cache if the user is visiting a url like devdocs.io/offline or devdocs.io/javascript/global_objects/array/find %> + <%# The index page will handle the routing %> + if (url.origin === location.origin && !url.pathname.includes('.')) { + const cachedIndex = await caches.match('/'); + if (cachedIndex) return cachedIndex; + } + + return fetch(event.request); + })()); +}); diff --git a/views/unsupported.erb b/views/unsupported.erb index a01b7c7e..6c1ded7e 100644 --- a/views/unsupported.erb +++ b/views/unsupported.erb @@ -11,9 +11,9 @@

    DevDocs is an API documentation browser which supports the following browsers:

    • Recent versions of Firefox, Chrome, or Opera
      • -
    • Safari 9.1+
      • -
    • Edge 16+
      • -
    • iOS 10+
      • +
    • Safari 11.1+
      • +
    • Edge 17+
      • +
    • iOS 11.3+

    If you're unable to upgrade, we apologize.