pwFoo

## Service_Workers_Messaging.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                pwFoo
                / Service_Workers_Messaging.md
            
            
              Created
              October 22, 2023 12:55
                — forked from Jonarod/Service_Workers_Messaging.md
            
              
                Describes how to send messages between a page's main thread and a service worker thread
              
          
    Page to ServiceWorker

// in page.html
navigator.serviceWorker.controller.postMessage({'hello':'world'});
// in sw.js
self.addEventListener('message', event => { 

  
## index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Concept Chat</title>
  <link rel="stylesheet" href="index.css" >
</head>

<body>

## minimal_pubsub.js
  var pubsub = function(l, u, r, i) { // cool! 闭包并且初始化vars
    return function(n, f) {
      r = l[n] = l[n] || [], i = -1;
      if (f && f.call) r.push(f);
      else while (r[++i]) r[i].apply(u, arguments);
    }
  }({});

  // subscribe to event
  pubsub("eat_cookie", function() {

## audio-recorder-gun.html
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>capture microphone audio into buffer</title>
  </head>
  <body>
    <audio id="player" controls></audio>
    <input
      type="text"
      id="username"

## custom-element-minimal.js
/* non-shadow dom minimal custom element */
customElements.define("counter-ce", class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <button>
        ${this.innerHTML} <span></span>
      </button>
    `;

    this.update = ()=>{

## proxyftw.js

let providerHandler = {
    get: async(target, name) => {
        console.log('load someting from remote...')
        return new Promise( (res, rej) => {
            setTimeout(() => res(42), 4200)
        })
    },
    set: function (obj, prop, value) {
        return new Promise((res, rej) => {

## jkq.js
(function() {
    'use strict';

    /**
     * Core method, similar to jQuery (only simpler)
     *
     * @param  {String|HTMLElement} s     The CSS selector to search for or HTML element to wrap with functionality
     * @param  {HTMLElement}        root  OPTIONAL An HTML element to start the element query from
     * @return {Array}                    The collection of elements, wrapped with functionality (see API methods)
     */

## mo_vs.proxy.js

<!--
This demo shows two ways to detect changes to a DOM node `.textContent`, one
using a `MutationObserver` and the other using an ES2015 `Proxy`.

From testing, a `Proxy` appears to be 6-8x faster than using a MO in Chrome 50.

**Update**: removing the `Proxy` altogether speeds up the MO to be inline with the Proxy.
This has something to do with how the browser queues/prioritizes Proxies over MO.

## alpine-virtual-desktop.sh
#!/bin/sh
#
# This script installs a virtual desktop using Xvfb, x11vnc, mate-desktop,
# mate-session-manager and Apache Guacamole. It runs on Alpine Linux Edge.
#
# See also:
# https://www.reddit.com/r/selfhosted/comments/b6k8go/poc_a_desktop_in_a_container_on_a_server/

# This is the user, under which the MATE desktop will run
# Notice: For several reasons this shouldn't be root

## dom-events.js
Object.prototype.emit = function(name, d) {
  this.dispatchEvent(new CustomEvent(name, { detail: d }));
  return this;
};
Object.prototype.on = function(name, cb) {
  this.addEventListener(name, cb, false);
  return cb;
};
Object.prototype.once = function(name, cb) {
  var wrapper = function() {
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title>Concept Chat</title>
	<link rel="stylesheet" href="index.css" >
	</head>

	<body>
	var pubsub = function(l, u, r, i) { // cool! 闭包并且初始化vars
	return function(n, f) {
	r = l[n] = l[n] \|\| [], i = -1;
	if (f && f.call) r.push(f);
	else while (r[++i]) r[i].apply(u, arguments);
	}
	}({});

	// subscribe to event
	pubsub("eat_cookie", function() {
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>capture microphone audio into buffer</title>
	</head>
	<body>
	<audio id="player" controls></audio>
	<input
	type="text"
	id="username"
	/* non-shadow dom minimal custom element */
	customElements.define("counter-ce", class extends HTMLElement {
	connectedCallback() {
	this.innerHTML = `
	<button>
	${this.innerHTML} <span></span>
	</button>
	`;

	this.update = ()=>{

	let providerHandler = {
	get: async(target, name) => {
	console.log('load someting from remote...')
	return new Promise( (res, rej) => {
	setTimeout(() => res(42), 4200)
	})
	},
	set: function (obj, prop, value) {
	return new Promise((res, rej) => {
	(function() {
	'use strict';

	/**
	* Core method, similar to jQuery (only simpler)
	*
	* @param {String\|HTMLElement} s The CSS selector to search for or HTML element to wrap with functionality
	* @param {HTMLElement} root OPTIONAL An HTML element to start the element query from
	* @return {Array} The collection of elements, wrapped with functionality (see API methods)
	*/

	<!--
	This demo shows two ways to detect changes to a DOM node `.textContent`, one
	using a `MutationObserver` and the other using an ES2015 `Proxy`.

	From testing, a `Proxy` appears to be 6-8x faster than using a MO in Chrome 50.

	Update: removing the `Proxy` altogether speeds up the MO to be inline with the Proxy.
	This has something to do with how the browser queues/prioritizes Proxies over MO.
	#!/bin/sh
	#
	# This script installs a virtual desktop using Xvfb, x11vnc, mate-desktop,
	# mate-session-manager and Apache Guacamole. It runs on Alpine Linux Edge.
	#
	# See also:
	# https://www.reddit.com/r/selfhosted/comments/b6k8go/poc_a_desktop_in_a_container_on_a_server/

	# This is the user, under which the MATE desktop will run
	# Notice: For several reasons this shouldn't be root
	Object.prototype.emit = function(name, d) {
	this.dispatchEvent(new CustomEvent(name, { detail: d }));
	return this;
	};
	Object.prototype.on = function(name, cb) {
	this.addEventListener(name, cb, false);
	return cb;
	};
	Object.prototype.once = function(name, cb) {
	var wrapper = function() {