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.
|
1 2 3 4 5 |
$ git clone https://github.com/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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!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.
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en-us"> <head> <title>OFFLINE - JFA PWA Toolkit Example</title> </head> <body> <p>No Internet connection!</p> </body> </html> |
Exemplo simples de manifest.json. Pode usar app.webmanifest em vez de manifest.json se você prefere.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$('#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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$('#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
|
1 2 3 4 5 |
$('#btn3').click(() => { PWA.Notification.requestPermission((status) => { $('#msg3').html(status); }); }); |
Obter o status de permissão de Notificações
|
1 2 3 4 |
$('#btn4').click(() => { var permission = PWA.Notification.getPermission(); $('#msg4').html(permission); }); |
Mostrar Notificação enviada pelo Navegador
|
1 2 3 4 5 6 7 8 9 10 11 |
$('#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
|
1 2 3 4 5 6 7 |
$('#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
|
1 2 3 4 5 6 7 |
$('#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
|
1 2 3 4 5 6 7 |
$('#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
|
1 2 3 |
$('#btn9').click(() => { PWA.Navigator.clearCache(); }); |
Parque Infantil
Brinque com a biblioteca PWA e aprenda a usá-la facilmente.
Repositório
Transforme seu site existente em PWA com esta biblioteca JS from r/javascript
