Initial cut of the prefetch sample.
This commit is contained in:
Jeff Posnick
Родитель
a2d5fba318
Коммит
098f89b69c
|
|
@ -0,0 +1,5 @@
|
|||
Service Worker Sample: Prefetching Resources During Registration
|
||||
===
|
||||
See https://googlechrome.github.io/samples/service-worker/prefetch/index.html for a live demo.
|
||||
|
||||
Learn more at http://www.chromestatus.com/feature/6561526227927040
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<!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 prefetching resources during Service Worker registration.">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>Service Worker Sample: Prefetching Resources During 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 -->
|
||||
<!-- TODO: Replace PLACEHOLDER with feature name. -->
|
||||
<meta name="apple-mobile-web-app-title" content="Service Worker Sample: Basic 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">
|
||||
|
||||
<link rel="stylesheet" href="../../styles/main.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Service Worker Sample: Prefetching Resources During Registration</h1>
|
||||
|
||||
<p>Available in <a href="http://www.chromestatus.com/feature/6561526227927040">Chrome 40+</a></p>
|
||||
|
||||
<p>
|
||||
This sample demonstrates basic Service Worker registration, in conjunction with pre-caching of a list
|
||||
of specific resource URLs during the installation phase.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Visit <code>chrome://serviceworker-internals</code> and click on the "Inspect" button next to
|
||||
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>
|
||||
|
||||
<p>
|
||||
The resources that have been pre-fetched should be available without a network connection—
|
||||
try disabling your network and then clicking on the corresponding links. Contrast that with
|
||||
the resource that have not been pre-fetched which will not be initially available without a
|
||||
network connection. There's also an example of a non-existent resource that will always
|
||||
return a HTTP 404.
|
||||
</p>
|
||||
|
||||
<!-- // [START code-block] -->
|
||||
<div class="output">
|
||||
<div id="status"></div>
|
||||
|
||||
<ul id="files" style="display: none">
|
||||
<li><a href="static/file1.txt" target="_blank">file1.txt (pre-fetched)</a></li>
|
||||
<li><a href="static/file2.txt" target="_blank">file2.txt (pre-fetched)</a></li>
|
||||
<li><a href="static/file3.txt" target="_blank">file3.txt (not pre-fetched)</a></li>
|
||||
<li><a href="static/does_not_exist.txt" target="_blank">does_not_exist.txt (returns a 404)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showFilesList() {
|
||||
document.querySelector('#files').style.display = 'block';
|
||||
}
|
||||
|
||||
if ('serviceWorker' in navigator) {
|
||||
// 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) {
|
||||
if (registration.installing) {
|
||||
registration.installing.addEventListener('statechange', function(e) {
|
||||
if (e.target.state === 'installed') {
|
||||
showFilesList();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
showFilesList();
|
||||
}
|
||||
},
|
||||
function(error) {
|
||||
// Something went wrong during registration. The service-worker.js file
|
||||
// might be unavailable or contain a syntax error.
|
||||
document.querySelector('#status').textContent = error;
|
||||
}
|
||||
);
|
||||
} else {
|
||||
// The current browser doesn't support Service Workers.
|
||||
var aElement = document.createElement('a');
|
||||
aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
|
||||
aElement.textContent = 'Service Workers are not supported in the current browser.';
|
||||
document.querySelector('#status').appendChild(aElement);
|
||||
}
|
||||
</script>
|
||||
<!-- // [END code-block] -->
|
||||
|
||||
<script>
|
||||
(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');
|
||||
</script>
|
||||
<!-- Built with love using Web Starter Kit -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
self.addEventListener('install', function(event) {
|
||||
var urlsToPrefetch = [
|
||||
'./static/file1.txt',
|
||||
'./static/file2.txt'
|
||||
];
|
||||
|
||||
// All of these logging statements should be visible via the "Inspect" interface
|
||||
// for the relevant SW accessed via chrome://serviceworker-internals
|
||||
console.log('Handling install event. Resources to pre-fetch:', urlsToPrefetch);
|
||||
|
||||
event.waitUntil(
|
||||
caches.open('prefetch-sample').then(function(cache) {
|
||||
console.log('Successfully opened the cache. About to pre-fetch...');
|
||||
|
||||
// This two-stage fetch() + cache.put() combo is required because Chrome doesn't
|
||||
// currently support cache.addAll(). Once support for that is added, it's preferable
|
||||
// to use that.
|
||||
return Promise.all(
|
||||
urlsToPrefetch.map(function(url) {
|
||||
return fetch(url);
|
||||
})
|
||||
).then(function(responses) {
|
||||
return responses.map(function(response, i) {
|
||||
return cache.put(urlsToPrefetch[i], response);
|
||||
});
|
||||
}).then(function(responses) {
|
||||
console.log('Pre-fetching is complete.');
|
||||
|
||||
return responses;
|
||||
});
|
||||
}).catch(function(error) {
|
||||
// This catch() will handle any exceptions from the fetch()/cache.put() steps.
|
||||
console.error('Pre-fetching failed:', error);
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', function(event) {
|
||||
console.log('Handling fetch event for', event.request.url);
|
||||
|
||||
event.respondWith(
|
||||
caches.open('prefetch-sample').then(function(cache) {
|
||||
return cache.match(event.request).then(function(response) {
|
||||
console.log('Found response in cache:', response);
|
||||
|
||||
return response;
|
||||
}).catch(function() {
|
||||
// This catch() will handle exceptions due to missing cache entries.
|
||||
// Don't panic! That just means we need to fetch the resource from the network.
|
||||
console.log('No response found in cache. About to fetch from network...');
|
||||
|
||||
return fetch(event.request).then(function(response) {
|
||||
console.log('Response from network is:', response);
|
||||
|
||||
return response;
|
||||
}).catch(function(error) {
|
||||
// This catch() will handle exceptions thrown from the fetch() operation.
|
||||
// Note that a HTTP error response (e.g. 404) will NOT trigger an exception.
|
||||
console.error('Fetching failed:', error);
|
||||
|
||||
throw error;
|
||||
});
|
||||
});
|
||||
})
|
||||
);
|
||||
});
|
||||
|
|
@ -0,0 +1 @@
|
|||
Havin' fun in file 1!
|
||||
|
|
@ -0,0 +1 @@
|
|||
Yoo-hoo from file 2!
|
||||
|
|
@ -0,0 +1 @@
|
|||
File 3 just skinned its knee :-(
|
||||
Загрузка…
Ссылка в новой задаче