dariocravero

Running CouchApps on PouchDB in the browser using service workers

What is this?

A description of how to run an existing CouchApp on PouchDB in the browser using service workers - without any modifications to existing code being necessary! The best thing is that if service workers aren't available, the CouchApp will still run as normal: that is, online.

Demo

dariocravero

import coldReload from './cold-reload';

// ...

const cold = coldReload();
const store = configureStore(cold.state);
cold.run(store);

// ...

dariocravero

jwt_authentication_handler(Req) ->
  case header_value(Req, "Authorization") of
    "Bearer " ++ Token -> 
      try
        ensure_safe_token(Token, couch_config:get("jwt_auth_blacklist")),
        token_auth_user(Req, decode(Token))
      catch
        % return generic error message (https://www.owasp.org/index.php/Authentication_Cheat_Sheet#Authentication_Responses)
        throw:_ -> throw({unauthorized, <<"Token rejected">>});
        error:_ -> throw({unauthorized, <<"Token rejected">>})

dariocravero

couch_jwt_auth [master*] $ ./build.sh
==> erlsha2 (get-deps)
==> jsx (get-deps)
==> ejwt (get-deps)
==> couch_jwt_auth (get-deps)
==> erlsha2 (compile)
Compiling c_src/erlsha2_nif.c
Compiling c_src/hmac_nif.c
==> jsx (compile)
==> ejwt (compile)

dariocravero

import { Howl } from 'howler/src/howler.core';

export default function createHowl(src, onEnd) {
  return new Promise(function(resolve, reject) {
    const howl = new Howl({
      autoplay: false,
      onend: onEnd,
      src: [src],
      onload() { resolve(howl) },
      onloadeerror: reject

dariocravero

export async function load({id, src, onEnd}) {
  const node = await createNode(src, onEnd);
  nodes[id] = node;
  
  return {
    duration: node.duration()
  };
}

dariocravero

    iframe.contentWindow.addEventListener('beforeunload',() => this.middlewareCleanupWrapper() );
 
    if (this.observer) {
      this.observer.disconnect();
    }

    this.observer = new MutationObserver(mutations => {
      iframe.parentElement.style.height = iframe.contentDocument.documentElement.offsetHeight + 'px';
    });

dariocravero

require=(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({"app.com":[function(require,module,exports){
// app.js
var PanelsUi = require('panels-ui');
var React = require('react');

var lookup = [
  '/hi-:name'
];

var panels = {

dariocravero

server {
  listen 80 default_server;
  server_name _;

  keepalive_timeout 5;

  root /var/www/panels-pages;
  access_log /var/log/panels-pages-nginx.access.log;
  error_log /var/log/panels-pages-nginx.error.log;

dariocravero

<div class="colour-signal">
  <div class="colour-signal-basics colour-signal-choices clearfix">
    <div class="colour-signal-basics-transparent colour-signal-choice colour-signal-basics-choice" ng-class="{ &#39;colour-signal-choice-active&#39;: colour === &#39;transparent&#39; }" ng-click="colour=&quot;transparent&quot;"></div>
    <div class="colour-signal-basics-white colour-signal-choice colour-signal-basics-choice" ng-class="{ &#39;colour-signal-choice-active&#39;: hue === 0 &amp;&amp; saturation === 0 &amp;&amp; lightness &gt;= 50}" ng-click="hue=0;saturation=0;lightness=100;"></div>
    <div class="colour-signal-basics-black colour-signal-choice colour-signal-basics-choice" ng-class="{ &#39;colour-signal-choice-active&#39;: hue === 0 &amp;&amp; saturation === 0 &amp;&amp; lightness &lt; 50 }" ng-click="hue=0;saturation=0;lightness=0;"></div>
    <input class="colour-signal-custom" ng-model="colour" style="border-color: {{ colour }}" />
  </div>
  <div class="colour-signal-hue colour-signal-choices clea