Dexie.js: read documentation offline

[jacobbogers]

Is this possible? on a second note maybe it can be added to devdocs.io? something like devdocs.io

[dfahlander]

Would be nice especially as the library is for the offline use case. An easy solution would be to add a service worker script that does this in the dexie.js-web repo. Googled it briefly and found this tutorial: https://developers.google.com/web/fundamentals/codelabs/offline/. Could also suggest dexie to be added to devdocs.io, but they require at least 5k stars.

A specific contribution to dexie.js-web repository that makes all pages available offline using service workers would be very welcome.

[jacobbogers]

I am not a Ruby expert, if I can get a list of resources (array of relative/remote urls) , its real easy to caches everything on install of the service worker.

[jacobbogers]

guess i will have to learn ruby, and jekyll, I need to write a lot of documentation myself, so might aswell start))

[dfahlander]

Don't know how to get it into JS, but the table-of-content does this in HTML:

      <h3>Table of Contents</h3>
      <div class="docs-toc-wrapper">
        <ul class="docs-toc">
          {% assign pages = site.pages | sort:"title"  %}
          {% for page in pages %}
            {% if page.layout == 'docs' %}
              <li>
                <a href="{{ page.url | replace: '.html', ''}}">{{ page.title }}</a>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>

It takes the page url and pipes it through the "replace" function to remove ".html".

Googling it some more, I found this: https://jamesiv.es/jekyll/amp/2017/05/09/serviceworkers-with-jekyll.html

var urlsToCache = [];

// Cache assets
{% for asset in site.static_files %}
    {% if asset.path contains '/assets/images' or asset.path contains '/assets/posts' or asset.extname == '.js' %}
    urlsToCache.push("{{ file.path }}")
    {% endif %}
{% endfor %}

// Cache posts
{% for post in site.posts %}
  urlsToCache.push("{{ post.url }}")
{% endfor %}

// Cache pages
{% for page in site.html_pages %}
  urlsToCache.push("{{ page.url }}")
{% endfor %}

[dfahlander]

If I was starting a doc page today, I would have a look at https://docusaurus.io (just a tip if you are planning to do your own docs page). My experience of jekyll is that it is a bit cryptic, especially from a non-ruby dev like me. Docasaurus seems a bit promising if you are a JS dev and familiar with react.

[jacobbogers]

Thanks alot I will take a look at docusaurus.io, that link is really good about sw-jekyll I will take a crack at it, caching can be made part of installation of service worker so the page is offline from the get go, maybde do something funky and install it as a web app on your tablet/phone (needs manifest file). but thats for later, lets get offline to work first)

[oleersoy]

Personally I would skip Ruby and Jekyll and use Nunjucks. There's a really good article on it here: https://www.smashingmagazine.com/2018/03/static-site-with-nunjucks/

I use it to create test macros and general templating for the superflycss framework. It's also used to minimize the markup in all my tests. Here's a sample:

https://github.com/superflycss/component-test

Whenever I update and push any part of the project travis rebuilds the pages/tests and pushes it to the gh-pages branch. If this page were documentation it could be saved for offline viewing in Chrome:

https://support.google.com/chrome/answer/7343019?co=GENIE.Platform%3DDesktop&hl=en

This approach does not preclude using a service worker inside a PWA, however it is a very light weight, pure javascript / node, easy to index / web crawl solution.

[jacobbogers]

created PR
https://github.com/dfahlander/dexie.js-web/pull/40