[email protected]
Facebook
Chilro
LinkedIn
GitHub
  • Blog
  • GitHub
  • Currículo
    • LinkedIn
    • StackOverflow
  • 🙈
    • 🇺🇸 Inglês
    • 🇪🇸 Español
    • 🇫🇷 Francês
    • 🇧🇷 Português

JFA PWA Toolkit

Abril 5, 2019BibliotecasSem comentáriosjfadev

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

  • Documentação
  • Referência API

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 --branch v1.0-beta git@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.

jsFiddle

Repositório

⚡️ Características do PWA para qualquer site (muito rápido & Fácil)
https://github.com/jfadev/jfa-pwa-toolkit
31 garfos.
242 estrelas.
9 questões em aberto.
commits recentes:

  • atualização README.md, GitHub
  • atualização README.md, GitHub
  • atualização README.md, GitHub
  • atualização README.md, GitHub
  • atualização README.md, GitHub

Reddit

Transforme seu site existente em PWA com esta biblioteca JS from r/javascript

: ES6, Javascript, Manifest, Offline, Precache, Push Notifications, PWA, Service Worker
jfadev
https://jordifernandes.com
Programador e analista de sistemas desde 2006. Diplomado em Engenharia de Software em Marselha +10 anos de experiência em Tecnologias Web. Atualmente VueJS & Symfony.

Posts relacionados

ECMAScript 6 (ECMAScript 2015): o novo standard oficial de JavaScript aprovado

Junho 19, 2015jfadev

Traduzir


Os meus Tweets

Postagens Rencentes

  • JFA PWA Toolkit
  • Lista de backlinks para SEO
  • Lista completa de geradores de backlinks para posicionamento SEO
  • Modal Dialog para Material Design Lite
  • Executar comando de Symfony2 no cronjobs no CPanel em um host compartilhado
  • Detectando o AdBlock com jQuery ou JavaScript
  • Vídeo: Introdução ao Apache Cordova em espanhol
  • jQuery: Carregar imagens conforme necessário (lazy load)
  • Materializecss: outro framework Material Design
  • Diretório de mais de 5.000 APIs

Links Patrocinados

Categorias

  • APIs (2)
  • Frameworks (8)
  • Bibliotecas (2)
  • Notícias (8)
  • Plugins (2)
  • Projetos (1)
  • Codigos (1)
  • Ferramentas (4)
  • Truques (7)

Conheça

  • Los Mejores Top 10
  • Loja Slow Fashion RJ

Tags

3D Android API Apple Apps Babylon.js Backlinks Blog Bug Chrome Extension Database E-commerce ES6 Facebook Framework Game Engine Ghost Referrer Google Google Analytics HTML5 IndexedDB Internet das Coisas iOS jQuery JS Material Design Messenger Native Apps PHP Portfolio Referrer Spam Responsivo Secret codes SEO SMS Spam Storage Symfony2 Editor de texto UI Desenvolvimento Web WebGL Windows Phone WooCommerce Wordpress
Facebook
Chilro
LinkedIn
GitHub

© 2013-2020 Jordi Fernandes Alves