owned this note   changed 6 years ago  
Linked with GitHub

Making the Browser a True User Agent

Note:

Irakli Gozalishvili Andre Garzia Dietrich Ayala
@Gozala
Mozilla		 @soapdog
LiveCode, Mozilla Tech Speaker		 @autonome
Protocol Labs

Note:

  • background image: browser icons
  • The web is really big - ~4.5 billion pages
  • ~1.5 billion websites
  • Incredible success - largest public collection of human knowledge
  • And for 30 years browsers have been a client
  • we call this client the user-agent

RFC 1945 - Hypertext Transfer Protocol – HTTP/1.0

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Note:

  • what is a user agent?
  • it fetched web pages from a server
  • this was fine for a while
  • but problems crept up along the way

Note:

  • power imbalance: the server has all the power

  • client wants the old version of a page? too bad, we redesigned!

  • client tries to access a business critical service? too bad, Twitter bought it and shut it down

  • Two devices in the same room communicate through server.

  • Data surrendered to corporate silo & can only be accessed on their terms & via their tools.

  • turns out this "user agent" isn't. it's a dumb vehicle for what the authority's agenda

  • does it represent me?

  • User has no say in which data browser surrenders to which servers.

    • website goes offline
    • company goes out of business or bought
    • Tracking
    • Censorship
    • don't have full working source

  • Image credits: Thai government, Twitter, Pixabay, me

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Note:

  • background image: main browser icons
  • Which one of these implements ipfs? dat? blockchain natively?
  • While they are pushing the web forward in some ways
  • they are also gatekeepers

What if?

Note:

  • What if we had web browsers that were reflection of our values
  • What are the trade-offs we would make if we could
  • Eg, we could all be collaborating right now even if this wifi not connected to the internet
  • Andrew from Textile mentioned yesterday about how all apps and services start to normalize to the lowest common denominator
  • Browsers are so important - the multi-app, the mega-app…
  • the user agent
  • it should be a reflection of you!

What if your web browser truly reflected your values - advocating for you, and filtering for you, running as first-class nodes in distributed networks or even light clients? What if you could build your own dweb browser, or add dweb capabilities to an existing browser? Or what’s the closest we can get to a dweb experience in today’s browsers without any core changes at all? We’ll show examples of each of these approaches to making a browser truly an agent that represents you, and discuss the benefits and challenges of each.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Note:

Note:

sticky: "what if?"

  • Your User Agent, Your Values

Note:

sticky: two values

  • Ask participants to write the values they care the about the most on the stickies and stick them to the wall.

Dweb browser == Utopia?

Note:

So if we do this, our job is done?
The web is perfect now, forever?

What do you give up?

Note:

(photo of sticky note (sticked next to the previous sticky with a value) w/ example trade-off)

Note:

(photo of sticky note (sticked next to the previous sticky with a value) w/ example trade-off)

  • Invite participants to stick their own trade-off notes next to the value stickies (does not have to be constaint for own sticky, in fact it's better if it's inviting perspective from others).

So how do we do this?

  • Browser Extensions (libdweb) 💻
  • Localhost bridges 💻
  • Proxy workers 💻📱
  • Electron 💻
  • Mozilla Reference Browser (+libdweb?) 📱
  • React Native 📱
  • Textile 📱

Note:

  • eg, SSB and Patchwork has values and trade-offs (eg: works like real life relationships, own your own data)

Browser Extensions 🚀

  • Augment existing web 🕶
  • Make a new protocol ipfs:// 🔩
  • Turn it into a local server 📻
  • Turn browser into P2P node (libdweb) 🛰
  • " Unlimited storage " 💾
  • Offline first ✈️

Patchfox

  • Offline-first secure decentralized gossip platform as a Firefox Add-on.
  • A local social network meets web browser.
  • Many apps, a single database on your machine.
  • Patchfox as a bridge between SSB and Web.

Note:

Values:

  • Based on human relationships, meaningful connections.
  • Your friends are the datacenter.
  • No cloud, no company, no ads, no tracking.
  • Like an hermit crab, you carry your house with you.
  • Your data is secure, verifiable and private.

Note:

Trade-offs:

  • Lots of friction to onboard new users.
  • Hosting friends data takes lot of disk space.
  • Our stack is a bit too complex and not web friendly.
  • Needs a locally running app.
  • No cross-device identity.

Note:

Constraints:

  • The Web Platform really wants to talk to web servers.
  • Web Browsers don't want to be web servers.
  • Lack of required networking primitives.
  • IndexedDB 😭😭😭.
    Note:
  • (TODO: Andre)
  • What were the limitations of the browsers / web platform that had to be overcome with other tools.

Solution:

  • Run a native app or daemon and connect to it over WebSockets.
  • Provide the UI/UX in the browser.
  • Use Native Messaging to start local node.
  • Custom Protocols to provide ssb:// features

Note:

  • (TODO: Andre)
  • What approach was used to overcome those limitations / fulfill values.

Patchfox DEMO

Note:

  • (TODO: Andre)
  • Show it in action.
  • Description: Using browser extensions for IPC with local nodes.
  • Trainer: Soapdog
  • Intro Slides
    *
  • Demo:
    • Show patchfox running and going from SSB to IPFS and maybe DAT.
  • Attendee should have:
    • Firefox Dev Edition or Nightly (unless I can actually releas on AMO in time)
    • IPFS Desktop
  • Workshop should provide:
    • Add-on template. I might just create a couple which they can tweak.
  • Presenter should have:
    • Faith in the network Gods.
    • Maybe a Pi running a little pub.
  • Tradeoffs:
  • Still needed:
    • Need to figure out before hand if an add-on can inject into another add-on, which could lead to some awesome demos.

Lunet

local-first applications on IPFS

Note:

  • Description: Progressive peer-to-peer applications in mainstream browsers through existing web APIs and seamless enhancment through companion app.
  • Trainer: Irakli
  • Intro Slides
    *
  • Demo:
    • Show peerdium example.
    • Maybe @jimpick's collaborative notebook ?
  • Attendee should have:
  • Workshop should provide:
    • App Template (TODO: Help wellcomed)
  • Presenter should have:
    • Local verison of lunet.link in case internet is broken.
  • Tradeoffs
    • Requires internet to first time

Values:

  • Works offline (after first load)
  • Users own data & choose who to share with
  • Data encrypted by default
  • No tracking

Additional Goals:

  • Unified user data library
  • Works in mainstream browsers
  • No install requirements
  • Apps = HTML+JS that read/write data via REST

Tradeoffs:

  • Apps are constrained
  • Data interop
  • Availability across devices

Note:

  • can't embed third party content like images, scripts.
  • built-in encryption introduces separate data format not supported by existing software.
  • Availability across devices requires sync that is more complicated than centralized system.

Solution:

orchestration

Constraints:

  • No install => Gateway
  • Domain Name resolution => Gateway
  • Cross device share => Install OR Gateway
  • Browser in your Browser (UX challenge)
  • Local collaboration => Install
  • Browser might purge data

create document

open in console

change document

write in console

create in console

request

Localhost Bridge

Going beyond web capabilities via companion application.

(Flash of P2P)

Note:

  • Description: Using companion application to access p2p capabilities in the the mainstream browsers.
  • Trainer: One of us
  • Intro slides:
    *
  • Demo:
    • Lunet is is non-trivial demo using IPFS Desktop.
    • Textile Desktop.
    • Maybe trivial example leveraging IPFS Desktop.
  • Attendee should have:
  • Workshop should provide:
    • App Template (TODO)

Goals:

  • Works in mainstream browsers
  • Overcome web platform limitations
    • UDP Socket
    • FileSystem
    • OS Integration
  • Works Offline

Solution:

  • Native App exposing HTTP / WebSocket API
  • Access-Control-Allow-Origin: https://myapp.com

Trade-offs:

  • High upfront cost (Requires install)
  • Not viable model for mobile
  • UX challenges

Libdweb

Note:

  • Description: Turning Firefox into full-fledged node via experimental extension APIs.
  • Trainer: Irakli
  • Demo:
    • Show dat-webext example.
    • Show IPFS extension example (where can I get it ?)
  • Attendee should have:
    • Firefox Nightly
    • web-ext tool installed.
  • Workshop should provide:
  • Presenter should have:
    • dat-webext
    • ipfs-companion with libdweb
    • dat-webext mobile

Note:

  • Frame gif

Mozilla Reference Browser

Note:

  • Description: Building mobile IPFS applications with react-native-webview.
  • Trainer: Dietrich
  • Demo:
    • Show dat mobile
    • Show Manyverse
    • Show Puma
  • Attendee should have:
    *
  • Workshop should provide:
  • Presenter should have:
  • TODO
    • gifs for each demo

Note:

  • android web components
  • for browsers or browser-like applications

Note:

  • led to reference browser

Note:

  • which combined with webextensions
  • to make Cliqz DAT browser

Note:

  • one line of code to install!

Breakout!

Build a web-view powered app: This group gathers both those interested in react-native and electron.

Work with the browser today: This group gathers those that want to augment browsers with tech that works today. It groups lunet (web apps) and patchfox (add-ons)

Towards a future browser: This group changes the browser and appeals to those interested in libdweb.

Note:
After an initial exposition, we'll break out into groups per interest. Each group has a facilitator to help people around the subject matter.

Closure

Note:
We reserve the final minutes of the workshop for a "round the circle" feedback session where each participant tells the other what exciting thing they saw during the workshop and what are their takeaways or plans for the future.

More

Static Site / User Agent

https://lunet.link/

Arrangements

Load https://lunet.link/peerdium.gozala.io/

  • Resolve DNSLink for peerdium.gozala.io
    -> /ipfs/QmYj...BPZro/
  • Arrange sandbox 
    ​​<iframe
​​  sandbox
​​  src="https://peerdium_gozala_io.celestial.link"
​​  data-source="/ipfs/QmYj...BPZro/"
​​  csp="default-src 'self';"
​​/>
  • Arrange proxy ServiceWorker (via iframe parent)
  • Request ./index.html

Request ./index.html

User Library

Each app gets own document space (+ REST API).

Listing Documents

await fetch("/data/", {method:"LIST"})
// => [{name:"Demo.space", open:false}]

Note:

  • Initially will be empty
  • Each app has own namespace
  • Need to open to read / write

Open Document

await fetch("/data/Demo.space", {method:"OPEN"})
// => { path: "/Demo.space" }

Create Document

await fetch("/data/Demo.space?create", {method:"OPEN"})
// => { path: "/Demo.space" }

Documents are encrypted

Read Document Content

const content = await fetch("/data/Demo.space/content.json")
const data = await file.json()

Documents content is seamlessly decrypted

Write Document Content

await fetch("/data/Demo.space/content.json", {
  body: JSON.stringify(data),
  method: "PUT"
})

Documents content seamlessly encrypted

Select a repo