Skip to content
This repository has been archived by the owner on Apr 8, 2023. It is now read-only.

Commit

Permalink
simplify documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
okitavera authored Jan 16, 2019
1 parent 7e39ee1 commit e600bfa
Showing 1 changed file with 7 additions and 68 deletions.
75 changes: 7 additions & 68 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Since (at this moment) `eleventy` doesn't have any API to do a things after buil
npm i eleventy-plugin-pwa
```

#### in Eleventy config file
#### Add to eleventy config file

```js
const pluginPWA = require("eleventy-plugin-pwa");
Expand All @@ -22,78 +22,17 @@ module.exports = function(eleventyConfig) {
};
```

Read more about [Eleventy plugins](https://www.11ty.io/docs/plugins/).
Read more about [Eleventy plugins](https://www.11ty.io/docs/plugins/)

### Registering Service Worker
#### Registering Service Worker

To make it works when you're updating your content, you should cache-busting the path.
The simplest way to do it is using eleventy's addFilter.
- [Eleventy-ways](<https://github.com/okitavera/eleventy-plugin-pwa/wiki/Registering-Service-Worker-(Eleventy-ways)>)

#### in the template (header/footer)
- [Webpack-ways](<https://github.com/okitavera/eleventy-plugin-pwa/wiki/Registering-Service-Worker-(using-webpack.DefinePlugin)>)

```html
<script>
if ("serviceWorker" in navigator) {
// default filename generated by plugin + cache busting via eleventy's filter
navigator.serviceWorker
.register("{{ '/service-worker.js' | cacheBust }}")
.then(function() {
console.log("ServiceWorker has been registered!");
})
.catch(console.error);
}
</script>
```

#### in Eleventy config file

```js
// append "?v=timestamp" to the end of str
eleventyConfig.addFilter("cacheBust", (str) => {
const dateNow = Date.now();
return str.concat(`?v=${dateNow}`);
});
```

### Manifest file for the browser

#### ./manifest.json

for example:

```json
{
"name": "Nanda Okitavera",
"short_name": "okitavera",
"icons": [
{
"src": "/assets/img/favicon/192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/img/favicon/512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ec407a",
"background_color": "#ec407a",
"display": "standalone"
}
```
#### Adding Web App Manifest

#### inside your header template

```html
<link rel="manifest" href="/manifest.json" />
```

#### tell eleventy to copy the manifest.json to the output dir.

```js
eleventyConfig.addPassthroughCopy("manifest.json");
```
Read [The Web App Manifest Guide](https://developers.google.com/web/fundamentals/web-app-manifest/)

## Options

Expand Down

0 comments on commit e600bfa

Please sign in to comment.