1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102<!doctype html>
<html>
<head>
<title>websnapper - bandwidth saver, text-only browsing tool</title>
<meta name="viewport" content="width=device-width">
<style>
* {
font: normal sans;
border-color: #eee;
}
main {
max-width: 600px;
margin: 0 auto;
}
label, input:not([type=checkbox]) {
width: 100%;
}
input:not([type=checkbox]), fieldset {
border: 1px solid lightgrey;
}
input {
padding: 5px;
box-sizing: border-box;
}
button {
margin: 10px;
}
code {
word-break: break-word;
}
</style>
<script>
function detect_dimensions() {
document.getElementById('width').value = window.innerWidth;
document.getElementById('height').value = window.innerHeight;
}
</script>
</head>
<body>
<main>
<h1>websnapper</h1>
<h2>Try it out</h2>
<form method="GET" action="..">
<fieldset>
<legend>
Visit any URL you like
</legend>
<label>
URL
<input required placeholder="google.com" name="url">
</label>
<label>
Width of the emulated browser
<input id="width" type="number" required min="100" max="3000" name="width" value="800">
</label>
<label>
Height of the emulated browser
<input id="height" type="number" required min="100" name="height" value="600">
</label>
<button type="button" onclick="detect_dimensions()">
<small>Detect the dimensions of your browser</small>
</button>
<br>
<label>
<input type="checkbox" checked name="links">
Make links clickable (means more network usage)
</label>
<br>
<button>Browse</button>
</fieldset>
</form>
<p><small><a href="https://github.com/phil294/websnapper">[open source on github]</a></small></p>
<h2>About</h2>
<p>This is a simple tool to dramatically save internet bandwidth when browsing the web.
<p>You will <em>not</em> see images, videos, colors or input fields, only text and (optionally) links.
<p>You will only see a section of the site, with buttons to scroll up and down in the far right corners. This can reduce the download size even more. For example, the snapped heading <a href="http://websnapper.waritschlager.de/?url=http%3A%2F%2Fzeit.de&width=800&height=600&scroll_top=500&links=false
">800x600 view of zeit.de</a> is 1.4 KB in size (gzipped), whereas the original <a href="https://www.zeit.de"></a> is about 130 KB (not counting images, scripts, styles etc.). This means more than 98% network savings for initial page load.
<p><strong>Javascript is disabled while browsing!</strong> Some sites may not function properly. <small>Reason: To prevent misusage. Enabling it is easy, but I do not want to <a href="https://medium.com/@timotheejeannin/i-built-a-screenshot-api-and-some-guy-was-mining-cryptocurrencies-with-it-cd188dfae773">end up mining bitcoins for some buffoon.</a></small> Might change this some day.
<p>If you need Javascript or images, please use the more powerful <a href="https://www.brow.sh">brow.sh</a> instead. websnapper is mostly inferior to it, except it allows to browse links without displaying images and only shows a selected viewport. Brow.sh text mode instead always downloads the entire website. Also, as this one does not support JS, the server is more likely to be available, also due to caching:
<p>The shown website snapshots may be up to 30 minutes old! URL-width-height-link-combinations are being cached for 30 minutes each.
<h3>Bugs</h3>
<p>If you experience bugs or have feedback, I would love to hear from you. Please <a href="https://github.com/phil294/websnapper/issues">open up an issue</a> or contact me (see end of page).
<h2>How it works</h2>
<h3>Server</h3>
<p>A server in the background emulates a headless Chromium browser using <a href="https://github.com/GoogleChrome/puppeteer">Puppeteer</a>, extracts all text, image and anchor elements, gets their coordinates and creates a stripped down website out of it. <a href="https://github.com/phil294/websnapper">Here is the source code.</a> This has been a mere two-day project for me to learn about headless browsers, but if you want to contribute, you are very welcome to join in. Please consider working on brow.sh instead, however.
<p>The server, located in Germany, runs on very little hardware capacity. At some point, when there are too many people using it simultaneously, you might see failure and timeouts. If you would like to provide for better hardware or support me in what I am doing here, you can best contact me directly (mail below).
<p>You can also run your own server, if you like. See the GitHub link above.
<h4>No SSL</h4>
<p>This whole domain does intentionally *not* enforce SSL encryption (https), as it can be a hinderance in remote places as described e.g. <a href="https://meyerweb.com/eric/thoughts/2018/08/07/securing-sites-made-them-less-accessible/">here</a> for rural Uganda. This is fine because usually, no sensitive information can be entered with this software: There are no input fields. You can however access this website with https://, too. Service worker caching is yet tbd.
<h4>Size</h4>
<p>The website browser is minimal in size and comes with only very little styling. You can inspect the network usage using the developer tools of your desktop browser.
<p>Note that *this* very howto page is - while still small - not optimized for speed. When your network is very slow and you do not want to open up this introduction every time you want to switch the website, you can also modify the URL query params directly. They look something like this <code>url=google.com&width=800&height=600&links=on</code> and change the same configuration that is shown on this page.
<h4>Usage as a proxy site</h4>
<p>Do what you have to do, but your IP will be forwarded to the remote server with every browse request. You should probably be using a properly configured proxy server, not this text browser.
<h2>Contact</h2>
<p>Hi, I'm Philip. Reach me at <a href="mailto:philip@waritschlager.de">philip@waritschlager.de</a>. Thanks!
<br><br>
<p><small>Made Nov 04th 2019</small>
<br><br>
</main>
</body>
</html>