dsw
Version:
Dynamic Service Worker, offline Progressive Web Apps much easier
411 lines (385 loc) • 20.9 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>DSW: Try-it-yourself page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/helmet.png">
<!-- WEB APP META DATA -->
<link rel="manifest" href="/webapp-manifest.json">
<meta name="theme-color" content="#438948">
<!-- /WEB APP META DATA -->
<link rel="stylesheet" href="styles/default.css">
<script src="dsw.js"></script>
<script>
DSW.setup()
.then(function(result){
var el = document.getElementById('offline-support-message');
el.classList.add('offline-support');
el.innerHTML = 'Offline enabled<br/><sub onclick="history.go(0);">(Reload the page)</sub>';
console.info('[ DSW ] :: Service Worker is activated and has all the appShell ready (happens only once)');
})
.catch(function(reason){
var el = document.getElementById('offline-support-message');
el.innerHTML = 'Offline support<br/>not installed';
el.classList.add('no-offline-support');
console.warn('[ DSW ] :: Service Worker could now be activated!\n', reason);
});
DSW.ready.then(function dswReady (status) {
console.info('[ DSW ] :: Service Worker is active and working');
}).catch(err=>{
console.warn('[ DSW ] :: Service Worker could not be fully registered\n', err);
});
DSW.addEventListener('activated', function(event){
console.log('[ DSW ] :: Service worker was activated (happens only once)');
});
</script>
</head>
<body>
<script>
var _gaq=[['_setAccount','UA-32119524-2'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<div class="wrapper">
<h1>DSW SandboxX</h1>
<span>Use this page to test and see it working.
<br/>Open your browser's console and check the cached content, and the network requests as you test the features.</span><br/>
<div class="project-status">
<a class="github-button"
href="https://github.com/NascHQ/dsw"
data-count-href="/NascHQ/dsw/stargazers"
data-count-api="/repos/NascHQ/dsw#stargazers_count"
data-count-aria-label="# stargazers on GitHub"
aria-label="Star NascHQ/dsw on GitHub"></a>
<a href="https://www.npmjs.com/package/dsw"><img src="https://camo.githubusercontent.com/159568c52812aa1358d524b906741090568bfc34/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6473772e7376673f6c6162656c3d56657273696f6e266d61784167653d32353932303030" alt="" data-canonical-src="https://img.shields.io/npm/v/dsw.svg?label=Version&maxAge=2592000" style="max-width:100%;"></a>
<a href="https://www.codacy.com/app/felipenmoura/dsw?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=NascHQ/dsw/&amp;utm_campaign=Badge_Grade"><img src="https://camo.githubusercontent.com/676d421a26946fdce9bd384cb3839cba3d2094d9/68747470733a2f2f6170692e636f646163792e636f6d2f70726f6a6563742f62616467652f47726164652f6262353839616564633034623434356439363333646466363662353564613036" alt="" data-canonical-src="https://api.codacy.com/project/badge/Grade/bb589aedc04b445d9633ddf66b55da06" style="max-width:100%;"></a>
<a href="https://raw.githubusercontent.com/NascHQ/dsw/master/license.txt"><img src="https://camo.githubusercontent.com/890acbdcb87868b382af9a4b1fac507b9659d9bf/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667" alt="" data-canonical-src="https://img.shields.io/badge/license-MIT-blue.svg" style="max-width:100%;"></a>
<a href="https://github.com/NascHQ/dsw/issues"><img src="https://camo.githubusercontent.com/077c29af3f2f6b30b98ddf2921d3a4038ce78d89/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f4e61736348512f6473772e737667" alt="" data-canonical-src="https://img.shields.io/github/issues/NascHQ/dsw.svg" style="max-width:100%;"></a>
<a href="https://travis-ci.org/NascHQ/dsw"><img src="https://camo.githubusercontent.com/5f5c194d287883f9eb3319830f81558e8e5f7971/68747470733a2f2f7472617669732d63692e6f72672f4e61736348512f6473772e737667" alt="" data-canonical-src="https://travis-ci.org/NascHQ/dsw.svg" style="max-width:100%;"></a>
</div>
<div class="card small right blue">
<div class="test-container">
<input id="enable-notif-btn" type="button" value="Enable Notifications" />
</div>
<div class="fg">
<div class="test-description-container">
Use push notifications
</div>
</div>
</div>
<div class="card small right green" id="online-offline-status">
<div class="test-container">
<span>ONLINE</span>
</div>
<div class="fg">
<div class="test-description-container">
Turn on and off your wi-fi
</div>
</div>
</div>
<div class="card right orange">
<div class="test-container">
<div class="header">
<div class="counter">01</div>
<div class="title"></div>
<div class="test-content">
<img id="test-1-image" src="" alt="" />
</div>
</div>
</div>
<div class="fg">
<div class="corner"></div>
<div class="test-description-container">
<div class="test-description">
<h3>Load image</h3>
<div class="test-long-description">
This example will successfuly load an image from cache.<br/>
This image loads dynamically and will be cached only after the first time it loaded successfuly.
</div>
</div>
</div>
</div>
<div class="run-test-btn" id="btn-img-1">➤ Run test</div>
<a href="https://github.com/NascHQ/dsw/blob/master/sandbox/dswfile.json#L74-L83"
class="run-test-btn see-rule-btn"
target="dsw-rule">≡ See rule</a>
</div>
<div class="card left blue">
<div class="test-container">
<div class="header">
<div class="counter">02</div>
<div class="title"></div>
<div class="test-content">
<img id="test-2-image" src="" alt="" />
</div>
</div>
</div>
<div class="fg">
<div class="corner"></div>
<div class="test-description-container">
<div class="test-description">
<h3>Image not found</h3>
<div class="test-long-description">
This tries to load an image that does not exist.<br/>
It loads then, a default 404 image.<br/>
The 404 image was cached during the Service Worker installation.
</div>
</div>
</div>
</div>
<div class="run-test-btn" id="btn-img-2">➤ Run test</div>
<a href="https://github.com/NascHQ/dsw/blob/master/sandbox/dswfile.json#L43-L51"
class="run-test-btn see-rule-btn"
target="dsw-rule">≡ See rule</a>
</div>
<div class="card right red">
<div class="test-container">
<div class="header">
<div class="counter">03</div>
<div class="title"></div>
<div class="test-content">
<img id="test-3-image" src="" alt="" />
</div>
</div>
</div>
<div class="fg">
<div class="corner"></div>
<div class="test-description-container">
<div class="test-description">
<h3>Redirected Image</h3>
<div class="test-long-description">
When trying to load one image, another one is loaded.<br/>
The image has been cached as soon as the service worker got installed.
</div>
</div>
</div>
</div>
<div class="run-test-btn" id="btn-img-3">➤ Run test</div>
<a href="https://github.com/NascHQ/dsw/blob/master/sandbox/dswfile.json#L52-L59"
class="run-test-btn see-rule-btn"
target="dsw-rule">≡ See rule</a>
</div>
<div class="card left green">
<div class="test-container">
<div class="header">
<div class="counter">04</div>
<div class="title"></div>
<div class="test-content">
<img id="test-4-image" src="" alt="" />
</div>
</div>
</div>
<div class="fg">
<div class="corner"></div>
<div class="test-description-container">
<div class="test-description">
<h3>Uncacheable image</h3>
<div class="test-long-description">
This image will never be cached.<br/>
Try checking the "offline" box in the Application panel, reload the page and try this again.
</div>
</div>
</div>
</div>
<div class="run-test-btn" id="btn-img-4">➤ Run test</div>
<a href="https://github.com/NascHQ/dsw/blob/master/sandbox/dswfile.json#L68-L73"
class="run-test-btn see-rule-btn"
target="dsw-rule">≡ See rule</a>
</div>
<div class="card right orange">
<div class="test-container">
<div class="header">
<div class="counter">05</div>
<div class="title"></div>
<div class="test-content">
<iframe id="test-5-iframe"></iframe>
</div>
</div>
</div>
<div class="fg">
<div class="corner"></div>
<div class="test-description-container">
<div class="test-description">
<h3>404 Page</h3>
<div class="test-long-description">
Accesing a non existing page.<br/>
You may also try typing anyhting in the URL and hitting enter.
</div>
</div>
</div>
</div>
<div class="run-test-btn" id="btn-5-page">➤ Run test</div>
<a href="https://github.com/NascHQ/dsw/blob/master/sandbox/dswfile.json#L60-L67"
class="run-test-btn see-rule-btn"
target="dsw-rule">≡ See rule</a>
</div>
<div class="card left blue">
<div class="test-container">
<div class="header">
<div class="counter">06</div>
<div class="title"></div>
<div class="test-content">
<iframe id="test-6-iframe"></iframe>
</div>
</div>
</div>
<div class="fg">
<div class="corner"></div>
<div class="test-description-container">
<div class="test-description">
<h3>Load json</h3>
<div class="test-long-description">
Loading JSON data from an address.<br/>
You could load a REST API for example.<br/>
This information will be stored in an IndexedDB structure.<br/>
It uses a "online-first" strategy, so, it will always look first for it online(using the network).
</div>
</div>
</div>
</div>
<div class="run-test-btn" id="btn-6-data">➤ Run test</div>
<a href="https://github.com/NascHQ/dsw/blob/master/sandbox/dswfile.json#L116-L137"
class="run-test-btn see-rule-btn"
target="dsw-rule">≡ See rule</a>
</div>
<div class="card right red">
<div class="test-container">
<div class="header">
<div class="counter">07</div>
<div class="title"></div>
<div class="test-content">
<iframe id="test-7-iframe"></iframe>
</div>
</div>
</div>
<div class="fg">
<div class="corner"></div>
<div class="test-description-container">
<div class="test-description">
<h3>Redirected Page</h3>
<div class="test-long-description">
Redirecting pages under a given directory.<br/>
Run the test more times to see random pages being redirected.<br/>
These pages will be cached only after the first time they got loaded.<br/>
After that, you can get offline and seen each one of them working from cache, too.<br/>
Also, the redirected page is receiving a variable with the information.
</div>
</div>
</div>
</div>
<div class="run-test-btn" id="btn-7-page">➤ Run test</div>
<a href="https://github.com/NascHQ/dsw/blob/master/sandbox/dswfile.json#L37-L42"
class="run-test-btn see-rule-btn"
target="dsw-rule">≡ See rule</a>
</div>
<div class="card left green">
<div class="test-container">
<div class="header">
<div class="counter">08</div>
<div class="title"></div>
<div class="test-content">
<iframe id="iframe-embeded-video" width="240" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="fg">
<div class="corner"></div>
<div class="test-description-container">
<div class="test-description">
<h3>Embeded content</h3>
<div class="test-long-description">
We are embeding content here, so you can try and load external libraries, audio, video, etc.<br/>
Also, we are using external data from github to show the stars button and the shields on top of this page.
</div>
</div>
</div>
</div>
<div class="run-test-btn" id="btn-8-video">➤ Run test</div>
</div>
<div class="card right orange">
<div class="test-container">
<div class="header">
<div class="counter">09</div>
<div class="title"></div>
<div class="test-content">
<video id="video-test" src=""></video>
</div>
</div>
</div>
<div class="fg">
<div class="corner"></div>
<div class="test-description-container">
<div class="test-description">
<h3>Media</h3>
<div class="test-long-description">
You can load and use media like audio or video.<br/>
Be careful, though, avoid adding large files to your user's storage.
</div>
</div>
</div>
</div>
<div class="run-test-btn" id="btn-9-video">➤ Run test</div>
</div>
<div class="card left blue">
<div class="test-container">
<div class="header">
<div class="counter">10</div>
<div class="title"></div>
<div class="test-content message">
</div>
</div>
</div>
<div class="fg">
<div class="corner"></div>
<div class="test-description-container">
<div class="test-description">
<h3>Trigger Message</h3>
<div class="test-long-description">
You can test the push notification.<br/>
It will ask Google's GCM server to push a notification. As soon as the notification arrives, it simply shows you a default message.<br/>
This will only work online, of course.
</div>
</div>
</div>
</div>
<div class="run-test-btn" id="btn-10-message">➤ Run test</div>
</div>
<div class="card right orange">
<div class="test-container">
<div class="header">
<div class="counter">11</div>
<div class="title"></div>
<div class="test-content">
<iframe id="iframe-preload-bundle" src=""></iframe>
</div>
</div>
</div>
<div class="fg">
<div class="corner"></div>
<div class="test-description-container">
<div class="test-description">
<h3>Bundle</h3>
<div class="test-long-description">
You can preload bundles of files on demand.<br/>
This means that you can load and cache a group of files when your user loads another page.<br/>
For example, when the user loads the <i>kart page</i>, you can load and store the <i>purchase</i> scripts and styles, as they are probably going to need this later.
</div>
</div>
</div>
</div>
<div class="run-test-btn" id="btn-11-iframe">➤ Run test</div>
</div>
</div>
<div class="test-output">
<img id="test-image" width="300" alt="">
<div id="fetch-result"></div>
<iframe src="" id="redirectionFrame" name="redirectionFrame" frameborder="0"></iframe>
</div>
<div id="offline-support-message"></div>
<script src="scripts/default.js"></script>
<!-- GITHUB STAR BUTTON -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>