-
Notifications
You must be signed in to change notification settings - Fork 2.4k
/
index.html
171 lines (144 loc) · 7.06 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!doctype html>
<!--
Copyright 2014 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Sample of detailed service worker registration events.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Service Worker Sample: Detailed Registration</title>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="../../images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-title" content="Service Worker Sample: Detailed Registration">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" href="../../images/apple-touch-icon-precomposed.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<link rel="icon" href="../../images/favicon.ico">
<script>
// Service workers require HTTPS (http://goo.gl/lq4gCo). If we're running on a real web server
// (as opposed to localhost on a custom port, which is allowed), then change the protocol to HTTPS.
if ((!location.port || location.port == "80") && location.protocol != 'https:') {
location.protocol = 'https:';
}
</script>
<link rel="stylesheet" href="../../styles/main.css">
</head>
<body>
<h1>Service Worker Sample: Detailed Registration</h1>
<p>Available in <a href="https://www.chromestatus.com/feature/6561526227927040">Chrome 40+</a></p>
<p>
This sample provides some insight into the events involved in a typical service worker registration.
The script <code>service-worker.js</code> is registered to handle the URL scope <code>./</code>.
It is "safe" to register the same script multiple times, so it's not necessary to check for a
previous registration.
</p>
<p>
Various pieces of information about the service worker from the perspective of the registering page
can be found below.
Additionally, visit <code>chrome://inspect/#service-workers</code> and click on the "inspect" link below
the registered service worker to view logging statements for the various actions the
<code><a href="service-worker.js">service-worker.js</a></code> script is performing.
</p>
<div class="output">
<h2>Service Worker Availability</h2>
<p>
Service Workers <strong id="availability"></strong> available in your browser.
<em>(Whether <code>'serviceWorker' in navigator</code>.)</em>
</p>
<h2>Is This Page Controlled by a Service Worker?</h2>
<p>
This page <strong id="controlled"></strong> currently controlled.
<em>(Whether <code>navigator.serviceWorker.controller</code> is set.)</em>
</p>
<h2>Info about the Current Registration</h2>
<p>
The <code>navigator.serviceWorker.register()</code> call <strong id="register"></strong>.
</p>
<p>
The current registration represents the <strong id="kind"></strong> service worker.
</p>
<p>
<em>Tip:</em> With a newly registered service worker in the <code>activated</code> state,
refresh the page to have the service worker take control.
You can also refresh with the Shift key held down to load
the page without the service worker controlling it.
</p>
<p>State transitions of the service worker associated with the current registration:</p>
<ol id="states"></ol>
</div>
<script>
function logState(state) {
var liElement = document.createElement('li');
liElement.textContent = state;
document.querySelector('#states').appendChild(liElement);
}
if ('serviceWorker' in navigator) {
// The current browser supports service workers.
document.querySelector('#availability').textContent = 'are';
// navigator.serviceWorker.controlled iff there is currently a service worker handling
// requests on this page for the current navigation.
document.querySelector('#controlled').textContent = navigator.serviceWorker.controller ? 'is' : 'is not';
// Override the default scope of '/' with './', so that the registration applies
// to the current directory and everything underneath it.
navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function(registration) {
// At this point, registration has taken place.
// The service worker will not handle requests until this page and any
// other instances of this page (in other tabs, etc.) have been
// closed/reloaded.
document.querySelector('#register').textContent = 'succeeded';
var serviceWorker;
if (registration.installing) {
serviceWorker = registration.installing;
document.querySelector('#kind').textContent = 'installing';
} else if (registration.waiting) {
serviceWorker = registration.waiting;
document.querySelector('#kind').textContent = 'waiting';
} else if (registration.active) {
serviceWorker = registration.active;
document.querySelector('#kind').textContent = 'active';
}
if (serviceWorker) {
logState(serviceWorker.state);
serviceWorker.addEventListener('statechange', function(e) {
logState(e.target.state);
});
}
}).catch(function(error) {
// Something went wrong during registration. The service-worker.js file
// might be unavailable or contain a syntax error.
document.querySelector('#register').textContent = 'failed: ' + error;
});
} else {
// The current browser doesn't support service workers.
document.querySelector('#availability').textContent = 'are not';
}
</script>
<script>
/* jshint ignore:start */
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-53563471-1', 'auto');
ga('send', 'pageview');
/* jshint ignore:end */
</script>
<!-- Built with love using Web Starter Kit -->
</body>
</html>