Making the Browser a True User Agent

--- title: Making the Browser a True User Agent tags: Talk description: Learn how to create web applications, modify web browsers, and even create your own web browser which truly represent you and your values. slideOptions: theme: white --- # Making the Browser a True User Agent Note: * How to hack on this deck: https://hackmd.io/slide-example?both * Example slides all at end of this deck * Run presentation * To view as deck: https://hackmd.io/@dietrich/rkrZEKFRV#/ * Or: click the share button on top-right, select "Slides" view and click the "Preview" button * Themes * black (default), white, league, sky, beige, simple, serif, blood, night, moon, solarized --- | **Irakli Gozalishvili** | **Andre Garzia** | **Dietrich Ayala** | |-|-|-| |![](https://avatars0.githubusercontent.com/u/21236) |![](https://avatars2.githubusercontent.com/u/23247)|![](https://avatars0.githubusercontent.com/u/50103)| |[@Gozala](https://github.com/Gozala)<br>Mozilla |[@soapdog](https://github.com/soapdog)<br>LiveCode, Mozilla Tech Speaker|[@autonome](https://github.com/autonome)<br>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 <style> .noborder { border: none !important; box-shadow: none !important; } </style> <img class="noborder" src="https://i.imgur.com/16zN2L3.png"> 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 --- <style> .noborder { border: none !important; box-shadow: none !important; } </style> <img class="noborder" src="https://i.imgur.com/OqSiZMR.png"> 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. ---  <style> .noborder { border: none !important; box-shadow: none !important; } </style> <img class="noborder" src="https://66.media.tumblr.com/b5bdf68b772376295f6a24f1841268d7/tumblr_n0ty84wTuq1sso6sco1_400.gif"> Note: * so what does that look like? * IPFS built in? * DAT? * mdns? * is it also a webserver? * Does it have bluetooth mesh networking? * image: https://dailycube.tumblr.com/post/76317534563/cube266-title-mario-question-cube-material ---  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](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions). * A local social network meets web browser. * Many apps, a single database on your machine. * [Patchfox](https://patchfox.org) as a bridge between [SSB](https://scuttlebutt.nz) 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](https://github.com/ipfs-shipyard/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](https://lunet.link/peerdium.gozala.io/) example. * Maybe @jimpick's collaborative notebook ? * Attendee should have: * Firefox or Chrome (Safari SW is a struggle) * [IPFS Desktop](https://github.com/ipfs-shipyard/ipfs-desktop) * 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: - [JS IPFS](https://github.com/ipfs/js-ipfs) - [ServiceWorker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Updating_your_service_worker) + [SharedWorker](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker) - `<iframe sandbox>` - [MessageChannel](https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API) / [MessagePort](https://developer.mozilla.org/en-US/docs/Web/API/MessagePort) - [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) - (Optional) Localhost bridge with [IPFS Desktop](https://github.com/ipfs-shipyard/ipfs-desktop) --- ![orchestration](https://github.com/Gozala/lunet/releases/download/ipfs-camp/worker.orchestration.png) ## 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](https://github.com/Gozala/lunet/releases/download/ipfs-camp/create-document.gif) --- ![open in console](https://github.com/Gozala/lunet/releases/download/ipfs-camp/open-in-console.gif) --- ![change document](https://github.com/Gozala/lunet/releases/download/ipfs-camp/change-document.gif) --- ![write in console](https://github.com/Gozala/lunet/releases/download/ipfs-camp/write-in-console.gif) --- ![create in console](https://github.com/Gozala/lunet/releases/download/ipfs-camp/create-in-console.gif) --- ![request](https://github.com/Gozala/lunet/releases/download/ipfs-camp/request-lifecycle.png) --- # 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](https://docs.textile.io/install/desktop/). * Maybe trivial example leveraging IPFS Desktop. * Attendee should have: * Modern Browser * [IPFS Desktop](https://github.com/ipfs-shipyard/ipfs-desktop) * 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](https://github.com/cliqz-oss/dat-webext) example. * Show IPFS extension example (where can I get it ?) * Attendee should have: * Firefox Nightly * [web-ext](https://github.com/mozilla/web-ext) tool installed. * Workshop should provide: * [libdweb repo](https://github.com/mozilla/libdweb) * [Template repo](https://github.com/libdweb/template) * Presenter should have: * [dat-webext](https://github.com/cliqz-oss/dat-webext) * ipfs-companion with libdweb * dat-webext mobile --- <iframe src="https://ipfs-labs-day-2018.hashbase.io/#/libdweb" style="height: 100vh; width: 100%; top: -30px; position: relative;" /> --- ## Electron <style> .noborder { border: none !important; box-shadow: none !important; } </style> <img class="noborder" src="https://i.imgur.com/a1CsDWG.png"> Building dweb-capable desktop browser-based applications. Note: - (TODO: Dietrich) - Describe what it is * Demo: * Show IPFS Electron example * Show Beaker browser * Attendee should have: * node.js and npm * npm install electron -g * Workshop should provide: * repo: autonome/electron-ipfs * Presenter should have: * Beaker browser and a dat URL to demo * IPFS-electron and a CID to demo --- # Values: - you can publish! - you can share (republish)! - you own your own data! - you can fetch from swarms! - you can do whatever you want!!! Note: - more capabilities than regular web - non-traditional use-cases --- # Trade-offs: - have to download and install - no cross browser compatibility - unclear security/privacy risks - you can do whatever you want!!! Note: --- # Solution: * Electron * Whole browser or embedded web view * Bundle the dweb tool of your choice! Note: - (TODO: Dietrich) - What approach was used to overcome those limitations / fulfill values. --- <style> img { border: none !important; box-shadow: none !important; } </style> <img class="noborder" src="https://i.imgur.com/9iwm7kv.png"> Note: * Beaker browser --- <style> .noborder { border: none !important; box-shadow: none !important; } </style> <img class="noborder" src="https://i.imgur.com/SXYlWnW.png"> Note: * Beaker showing me showing Cliqz --- <iframe src='https://gfycat.com/ifr/ThirstyScentedGoldfish' frameborder='0' scrolling='no' allowfullscreen width='640' height='945'></iframe> 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 - Install [ServiceWorker](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker) (to work offline) - Start JS-IPFS in [SharedWorker](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker) - Attempt localhost bridge with [IPFS Desktop](https://github.com/ipfs-shipyard/ipfs-desktop) - Host cross-origin communication via [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) --- ### Load https://lunet.link/peerdium.gozala.io/ - Resolve [DNSLink](https://docs.ipfs.io/guides/concepts/dnslink/) for peerdium.gozala.io `-> /ipfs/QmYj...BPZro/` - Arrange sandbox ```html <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` - [ServiceWorker](#) forwards request to iframe parent - Parent resolves `./index.html -> /ipfs/QmYj...BPZro/index.html` - Parent reads content via - Localhost bridge with [IPFS Desktop](#) - JS-IPFS in [SharedWorker](#) - Parent post content to [ServiceWorker](#) - [ServiceWorker](#) responds with content. --- # User Library Each app gets own document space (+ REST API). --- ### Listing Documents ```js 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 ```js await fetch("/data/Demo.space", {method:"OPEN"}) // => { path: "/Demo.space" } ``` --- ### Create Document ```js await fetch("/data/Demo.space?create", {method:"OPEN"}) // => { path: "/Demo.space" } ``` _Documents are encrypted_ --- ### Read Document Content ```js const content = await fetch("/data/Demo.space/content.json") const data = await file.json() ``` _Documents content is seamlessly decrypted_ --- ### Write Document Content ```js await fetch("/data/Demo.space/content.json", { body: JSON.stringify(data), method: "PUT" }) ``` _Documents content seamlessly encrypted_ ---

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.