Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marco0antonio0/como-aplicar-manifestoagil-e-serviceworker
Tutorial de como aplicar o manifesto agil e serviceWorker
https://github.com/marco0antonio0/como-aplicar-manifestoagil-e-serviceworker
Last synced: about 1 month ago
JSON representation
Tutorial de como aplicar o manifesto agil e serviceWorker
- Host: GitHub
- URL: https://github.com/marco0antonio0/como-aplicar-manifestoagil-e-serviceworker
- Owner: marco0antonio0
- Created: 2024-06-06T19:30:39.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-06-06T19:44:29.000Z (7 months ago)
- Last Synced: 2024-10-13T04:26:38.599Z (2 months ago)
- Language: HTML
- Size: 33.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Tutorial de Aplicação de Manifesto Ágil
Este tutorial orienta você sobre como aplicar um Manifesto Ágil e configurar um Service Worker em seu projeto.
https://github.com/marco0antonio0/como-aplicar-manifestoAgil-e-serviceWorker/assets/72234855/2ca6c7d9-2d9a-4f7d-be84-d1706f586ad5
## Estrutura de pastas
```bash
/seu_projeto
├── imagens
│ ├── favicon.ico
│ ├── small_icon.png
│ ├── medium_icon.png
│ ├── large_icon.png
│ └── xlarge_icon.png
├── index.html
├── manifest.json
├── service-worker.js
└── README.md
```
## Passo a Passo
### 1. Criação do Arquivo `index.html`
Primeiro, criaremos o arquivo `index.html` com as configurações iniciais.
#### Conteúdo do `index.html`
```html
Meu site
Titulo do meu site
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function (registration) {
console.log('Service Worker registrado com sucesso:', registration);
})
.catch(function (error) {
console.log('Falha ao registrar o Service Worker:', error);
});
}
```
### 2. Criação do Arquivo manifest.json
Em seguida, criaremos o arquivo manifest.json, que contém as informações do manifesto ágil.
**Conteúdo do manifest.json**
```json
{
"title": "Tutorial",
"description": "Este é um tutorial para criar um manifesto ágil com diferentes tamanhos de ícones.",
"version": "1.0.0",
"author": {
"name": "Seu Nome",
"email": "[email protected]",
"url": "https://seuwebsite.com"
},
"icons": {
"small": {
"src": "./imagens/small_icon.png",
"sizes": "48x48",
"type": "image/png"
},
"medium": {
"src": "./imagens/medium_icon.png",
"sizes": "72x72",
"type": "image/png"
},
"large": {
"src": "./imagens/large_icon.png",
"sizes": "96x96",
"type": "image/png"
},
"xlarge": {
"src": "./imagens/xlarge_icon.png",
"sizes": "144x144",
"type": "image/png"
}
},
"background_color": "#ffffff",
"theme_color": "#000000",
"display": "standalone",
"start_url": "/index.html",
"scope": "/",
"lang": "pt-BR"
}
```
### 3. Criação do Arquivo service-worker.js
O próximo passo é criar o arquivo service-worker.js, responsável por cachear os arquivos para acesso offline.
**Conteúdo do service-worker.js**
```Javascript
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/',
'/index.html',
'/manifest.json',
'/imagens/small_icon.png',
'/imagens/medium_icon.png',
'/imagens/large_icon.png',
'/imagens/xlarge_icon.png',
'/imagens/favicon.ico'
]);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
```