-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
140 lines (132 loc) · 4.63 KB
/
index.html
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#fff" />
<meta
name="theme-color"
content="#111"
media="(prefers-color-scheme: dark)"
/>
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@tomayac" />
<meta name="twitter:title" content="How Fugu is my browser?" />
<meta
name="twitter:description"
content="The cross-company effort Project Fugu has the objective of making it possible for Web apps to do anything iOS, Android, or desktop apps can. Find out where on this exciting journey your current browser is!"
/>
<meta
name="twitter:image"
content="https://howfuguismybrowser.dev/wide_light.png"
/>
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="How Fugu is my browser?" />
<meta
property="og:description"
content="The cross-company effort Project Fugu has the objective of making it possible for Web apps to do anything iOS, Android, or desktop apps can. Find out where on this exciting journey your current browser is!"
/>
<meta property="og:url" content="https://howfuguismybrowser.dev/" />
<meta
property="og:image"
content="https://howfuguismybrowser.dev/wide_light.png"
/>
<title>How Fugu is my browser?</title>
<link rel="stylesheet" href="/css/style.css" />
<link rel="icon" href="/fugu.svg" />
<link rel="apple-touch-icon" href="/fugu.png" />
<link rel="canonical" href="https://howfuguismybrowser.dev/" />
<link rel="manifest" href="/manifest.webmanifest" />
<script src="/js/script.mjs" type="module"></script>
<base target="_blank" />
</head>
<body>
<main>
<h1>How Fugu is my browser?</h1>
<p>
The cross-company effort
<a href="https://developer.chrome.com/blog/fugu-status/"
>Project Fugu</a
>
has the objective of making it possible for Web apps to do
<em>anything</em> iOS, Android, or desktop apps can.
</p>
<p>
We do this by exposing the capabilities of these platforms to the Web,
all while maintaining user security, privacy, trust, and other core
tenets of the Web.
</p>
<p>
Find out below where on this exciting journey your current browser is
and share it with others!
</p>
<ol>
<li>Click <strong>Screenshot</strong> to download the results.</li>
<li>Click <strong>Share</strong> and attach the screenshot.</li>
</ol>
<div class="wrapper">
<div>
<img
src="/fugu.png"
width="64"
height="64"
alt="A blowfish, the Project Fugu logo."
/>
<meter id="meter"></meter>
<div hidden class="meter">
<span></span>
</div>
</div>
<button class="screenshot" type="button">Screenshot</button>
<button class="share" type="button">Share</button>
</div>
<p class="message" hidden>
My browser—<code></code>—is
<label for="meter"></label>
Fugu!
</p>
<p class="legend" hidden>
Not all features are exposed on all platforms—e.g., the Contact Picker
API is currently only exposed on mobile—so it's technically impossible
to reach a score of 100%. Therefore, regard the score more as a playful
competition than an absolute science.
</p>
<table hidden>
<thead>
<tr>
<th>Feature Name</th>
<th>Supported in Browser</th>
<th>% of Page Loads</th>
</tr>
<tr>
<th class="legend" colspan="3">
The timelines indicate the percentage of Chrome page loads (across
all channels and platforms) that use the feature at least once.
Data is collected via Chrome's anonymous usage statistics.
</th>
</tr>
</thead>
<tbody></tbody>
</table>
<footer>
Made by
<a href="https://twitter.com/tomayac">@tomayac</a>. Source code on
<a href="https://github.com/GoogleChromeLabs/how-fugu-is-my-browser"
>GitHub</a
>.
</footer>
<template>
<svg
class="sparkline"
viewBox="0 0 100 30"
width="100"
height="30"
stroke-width="1"
></svg>
<span class="tooltip" hidden></span>
</template>
</main>
</body>
</html>