Skip to content

Commit

Permalink
fixed merging conflict
Browse files Browse the repository at this point in the history
  • Loading branch information
felipenmoura committed Sep 12, 2016
2 parents 914f127 + afabb90 commit 2a62237
Show file tree
Hide file tree
Showing 6 changed files with 67 additions and 43 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ node_modules
.DS_Store
tests/index/
.tmp-dsw-lib.js
npm-debug.log
7 changes: 4 additions & 3 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
language: node_js

node_js:
- "4.2.6"
- "5.10"
- "6.1"
- 6
- 5
- 4
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "dsw",
"version": "1.9.0",
"version": "1.9.2",
"description": "Dynamic Service Worker, offline Progressive Web Apps much easier",
"bin": {
"dsw": "./bin/index.js"
Expand Down
78 changes: 50 additions & 28 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,14 @@ If you are starting from scratch and want to see it working right away, you can
You can access this page and see a live demo of DSW working.
After loading the page the first time, it will install the service worker. When opening it the second time, it will cache everything according to the defined rules (described in each block and link).
You can then go offline and reload the page to validate it.
[Dynamic Service Worker demo](https://dsw-demo-zrrauyeple.now.sh)
[Dynamic Service Worker demo](https://dsw-demo-jxhxbuvhpi.now.sh)

## Advantages

- Use of variables
- Use of variables to build URLs and redirects
- Different strategies (offline-first, online-first or fastest)
- Easy-to-set rules for 404 pages, redirects, cache or use indexedDB, or outpus
- Trace requests to debug your configuration, rules and filters
- Decision over cache naming and versioning for each matching request
- Many named rules (for future debugging tooling...I imagine we can have a lighthouse-like page for debugging your service workers and your rules)
- Support for indexedDB
Expand All @@ -42,47 +43,52 @@ Or locally:

```npm install dsw --save-dev```

## TL;DR

Want to just see it working as fast as possible?<br/>
Clone the project, go to its directory, install it and run `npm run try`

## Using it

DSW will look for a file called `dswfile.json`. So:
DSW will look for a file called `dswfile.json`, just like gulp or grunt do.<br/>
So:

```
1) Go to your project's root directory and create the `dswfile.json`.

```bash
cd path-to-your-project
touch dswfile.json
```

You will use your prefered editor to make changes to this file later.

And now, you will add this to your `index.html` file, like so, in the `head` element:
2) Add this to your `index.html` file, in the `head` element:

```html
<link rel="manifest" href="/webapp-manifest.json" />
<meta name="theme-color" content="#color">
<script src="dsw.js"></script>
<script>
DSW.setup()
.then(function(){
// inform the user your page works offline, now!
})
.catch(function(){
// do something if the page will not work offline
// or if the current browser does not support it
});
</script>
<link rel="manifest" href="/webapp-manifest.json" />
<meta name="theme-color" content="#color">
<script src="dsw.js"></script>
<script>
DSW.setup()
.then(() => {
// inform the user your page works offline, now!
// maybe, consider reloading the page automaticaly
})
.catch(() => {
// do something if the page will not work offline
// or if the current browser does not support it
});
</script>
```

Done! Now, for any change in your Dynamic Service Worker configuration, just run the `dsw` command line on your project.<br/>
For ever new change or version, you will have to run `dsw` again, so it will generate the updated service worker file.<br/>
3) Now, for any change in your Dynamic Service Worker configuration, just run(in your project's root directory):

```dsw```

You can also use `dsw path-to-your/project`.<br/>
This will generate the `webapp.manifest` and `dsw.js` files in your project's root directory.

4) For every new change or version, you will have to run `dsw` again, so it will generate the updated service worker file.<br/>
This will create the `manifest` (if not there, already) and the `dsw.js` file.

To do so, if you installed it globally:

```dsw path-to-your-project```
```dsw path-to-your/project```

If you installed locally, though:

Expand All @@ -92,8 +98,6 @@ This second example is specially useful if you intend to run it in a stand alone

From now on, let's work as if you had installed it globally in our examples.

You will notice a `dsw.js` file that has been created in your project's root path.

Now, let's set up your project's offline configuration.

When you change something in your `dswfile.json`, you shall re-execute the command above.
Expand Down Expand Up @@ -250,6 +254,19 @@ Well, it uses the `cacheApi` to store as requests, only your keys. When you try

This way, you can access the information in your IndexedDB by yourself, while your requests will automatically deal with it, too.

### Tracing and debugging

Yes, you can debug your configuration and trace requests!<br/>
The API for that is quite simple and very powerful.

```js
DSW.trace('/some/matching-pattern', function(data){
console.log(data);
});
```

This is it. Now, any request that matches `/some/matching-pattern` will be sent to your callback function with all the trace information.<br/>
This data includes all the steps and different states your requests have been through. This way you validate and debug your rules.

# Examples

Expand Down Expand Up @@ -531,6 +548,11 @@ DSW.onNetworkStatusChange(function(connected){
* This depends on browser support...some browser will say the device is online even though there is no internet connection, just because the device is connected to a private network(with a rounter).
## Sandbox
Want to just see it working as fast as possible?<br/>
Clone the project, go to its directory, install it and run `npm run try`
# Contributing
So, you want to contribute? Cool! We need it! :)
Expand Down
2 changes: 1 addition & 1 deletion sandbox/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
el.classList.add('offline-support');
el.innerHTML = 'Offline enabled<br/><sub>(Reloading the page)</sub>';
setTimeout(function(){
//history.go(0);
history.go(0);
}, 6000);
})
.catch(function(error){
Expand Down
20 changes: 10 additions & 10 deletions sandbox/package.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
{
"name": "dsw-demo",
"version": "0.0.1",
"dependencies": {
"dsw": "*",
"http-server": "*"
},
"scripts": {
"start": "http-server -p 80"
}
}
"name": "dsw-demo",
"version": "0.0.1",
"dependencies": {
"dsw": "*",
"http-server": "*"
},
"scripts": {
"start": "http-server -p 80"
}
}

0 comments on commit 2a62237

Please sign in to comment.