Com este toolkit você pode facilmente integrar as características mais notáveis de uma PWA. Esta solução é facilmente integrada em projetos mais antigos com jQuery ou em novos frameworks JavaScript. Este projeto está em desenvolvimento. Não hesite em experimentá-lo e enviar suas Issus e Pull Resquests no Github.
🚀 Descubra o repositório on GitHub.
📱 Teste a Demo (repositório da demo).
Características
- Web App Manifest
- Estrutura de Arquivos de Ícones
- Precaching
- Estratégias de Cache
- Push Notifications
Documentação
Começando com um Exemplo
Importante: Para este exemplo funcionar perfeitamente, ele deve ser usado em localhost ou em um domínio https eo index.html ser encontrada na raiz do projeto.
Clone jfa-pwa-toolkit a partir do repositório Github e crie um index.html arquivo e um offline.html arquivo.
$ git clone --branch v1.0-beta [email protected]:jfadev/jfa-pwa-toolkit.git $ mv jfa-pwa-toolkit my-pwa $ cd my-pwa/ $ touch index.html $ touch offline.html
Simples index.html esqueleto (esqueleto completo na documentação).
Cole este esqueleto em seu index.html arquivo.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Theme color -->
<meta name="theme-color" content="#000" />
<!-- PWA Manifest -->
<link rel="manifest" href="/pwa/manifest.json"></link>
<!-- Favicon -->
<link rel="icon" type="image/png" href="/pwa/icons/chrome/chrome-favicon-16-16.png">
<!-- Icons -->
<!-- Splash Screen -->
<title>JFA PWA Toolkit Example</title>
</head>
<body>
<!-- Load JFA PWA Toolkit Configs -->
<script type="text/javascript" src="/pwa/config.js"></script>
<!-- Load JFA PWA Toolkit Lib -->
<script type="text/javascript" src="/pwa/pwa.js"></script>
<!-- Register principal Service Worker -->
<script type="text/javascript">
PWA.ServiceWorker.register();
</script>
</body>
</html>
Cole por exemplo, este html simples em seu offline.html arquivo.
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>OFFLINE - JFA PWA Toolkit Example</title>
</head>
<body>
<p>No Internet connection!</p>
</body>
</html>
Simple example of manifest.json. Use app.webmanifest instead of manifest.json if you prefer.
{
"dir": "ltr",
"lang": "en-us",
"name": "Your App Name",
"scope": "/",
"display": "standalone",
"start_url": "/",
"short_name": "Your App Short Name",
"description": "Your App Description.",
"orientation": "any",
"theme_color": "#000",
"background_color": "#000",
"related_applications": [],
"prefer_related_applications": false,
"icons": [{
"src": "/pwa/icons/windows10/Square71x71Logo.scale-400.png",
"sizes": "284x284"
},
]
}
Exemplo de um simples config.js
const PWA_CONFIG = {
app: {
name: 'your-app-name',
version: 'v1'
},
sw: {
filepath: '/sw.js',
offline_route: '/offline.html'
},
cache: {
images: {
active: true,
maxentries: 50,
maxageseconds: 24 * 60 * 60
},
statics: {
active: true,
maxentries: 50,
maxageseconds: 24 * 60 * 60
},
fonts: {
active: true,
maxentries: 50,
maxageseconds: 24 * 60 * 60
},
routes: {
networkfirst: {
active: true,
regex: /.*/
}
}
}
}
Exemplos de código JS
Brique com mais recursos com a variável de acesso global PWA em seu código Javascript como nos exemplos a seguir
Este exemplo usa a biblioteca jQuery. Na documentação pode encontrar exemplos em puro ES6
Botão para subscrever a Notificações Push
$('#btn1').click(() => {
if (
PWA.Notification.isDefault() ||
PWA.Notification.isGranted()
) {
PWA.Push.getSubscription((subscription) => {
if (subscription) {
$('#msg1').html('You are now subscribed to receive Push Notifications!');
} else {
PWA.Push.subscribe((r) => {
$('#msg1').html('Congratulations! You are subscribed to receive Push Notifications!');
});
}
});
} else {
$('#msg1').html("You've turned off Push Notifications. Allow Push Notifications in your browser settings.");
}
});
Checkbox de alternância para se inscrever / cancelar as Push Notifications
$('#switch2').click(() => {
if (
PWA.Notification.isDefault() ||
PWA.Notification.isGranted()
) {
PWA.Push.getSubscription((subscription) => {
if (subscription) {
PWA.Push.unsubscribe((r) => {
$('#msg2').html('You have been unsubscribed to receive Push Notifications!');
});
} else {
PWA.Push.subscribe((r) => {
$('#msg2').html('You have been unsubscribed to receive Push Notifications!');
});
}
});
} else {
$('#msg2').html("You've turned off Push Notifications. Allow Push Notifications in your browser settings.");
}
});
Exibe um pop-up pedindo permissão para mostrar Notificações
$('#btn3').click(() => {
PWA.Notification.requestPermission((status) => {
$('#msg3').html(status);
});
});
Obter o status de permissão de Notificações
$('#btn4').click(() => {
var permission = PWA.Notification.getPermission();
$('#msg4').html(permission);
});
Mostrar Notificação enviada pelo Navegador
$('#btn5').click(() => {
const options = {
body: 'Extra content to display within the notification',
icon: '../images/touch/chrome-touch-icon-192x192.png'
};
PWA.Notification.show('Notification Title', options, sent => {
if (sent) {
$('#msg5').html('The Notification has been sent');
}
});
});
Verifique se o navegador da suporte os Service Workers
$('#btn6').click(() => {
if (PWA.Navigator.isSupportedServiceWorker()) {
$('#msg6').html('This browser support Service Workers!');
} else {
$('#msg6').html('This browser does not support Service Workers.');
}
});
Verifique se o navegador da suporte as Notificações
$('#btn7').click(() => {
if (PWA.Navigator.isSupportedNotification()) {
$('#msg7').html('This browser support Notifications!');
} else {
$('#msg7').html('This browser does not support Notifications.');
}
});
Verifique se o navegador está offline
$('#btn8').click(() => {
if (PWA.Navigator.isOffline()) {
$('#msg8').html('No Internet connection!');
} else {
$('#msg8').html('You have an Internet connection!');
}
});
Limpar o cache do aplicativo do navegador
$('#btn9').click(() => {
PWA.Navigator.clearCache();
});
Parque Infantil
Brinque com a biblioteca PWA e aprenda a usá-la facilmente.