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 $ JFA-peso MVC Toolkit-meu-peso $ cd meu-pwa / $ index.html toque $ tocar offline.html
Simples index.html esqueleto (esqueleto completo na documentação).
Cole este esqueleto em seu index.html arquivo.
<!html DOCTYPE>
<html lang ="en-us">
<head>
<meta conjunto de caracteres ="utf-8">
<meta http-equiv ="X-UA-Compatible" content ="IE = borda">
<conteúdo de meta ="= largura dispositivo de largura, inicial escala = 1, escala máxima = 1, facilidade de escalável = nenhuma" name="janela de exibição">
<!-- Cor do tema ->
<meta name ="tema-color" content ="#000" />
<!-- PESO Manifesto ->
<link rel ="manifesto" href ="/peso / manifest.json"></link>
<!-- favicon ->
<link rel ="ícone" tipo ="image / png" href ="/pwa / ícones / cromo / cromo-favicon-16-16.png">
<!-- ícones ->
<!-- Tela de abertura -->
<título>JFA PESO Exemplo Toolkit</título>
</head>
<body>
<!-- Carregar JFA PWA Toolkit Configs ->
<script type="text/javascript" src="/pwa / config.js"></script>
<!-- Carregar JFA PESO Toolkit gratuito ->
<script type="text/javascript" src="/peso / pwa.js"></script>
<!-- Cadastre Trabalhador serviço principal ->
<script type="text/javascript">
PWA.ServiceWorker.register();
</script>
</body>
</html>
Cole por exemplo, este html simples em seu offline.html arquivo.
<!html DOCTYPE>
<html lang ="en-us">
<head>
<título>DESLIGADA - JFA PESO Exemplo Toolkit</título>
</head>
<body>
<p>Sem ligação à Internet!</p>
</body>
</html>
Exemplo simples de manifest.json. Pode usar app.webmanifest em vez de manifest.json se você prefere.
{
"você": "ltr",
"unicamente": "en-us",
"name": "Seu nome App",
"escopo": "/",
"exibição": "estar sozinho",
"START_URL": "/",
"nome curto": "Seu App Nome Curto",
"descrição": "Sua descrição do aplicativo.",
"orientação": "qualquer",
"theme_color": "#000",
"cor de fundo": "#000",
"related_applications": [],
"prefer_related_applications": falso,
"ícones": [{
"src": "/pwa / ícones / Windows 10 / Square71x71Logo.scale-400.png",
"tamanhos": "284x284"
},
]
}
Exemplo de um simples config.js
const PWA_CONFIG = {
app: {
name: 'Your-app-name',
versão: 'V1'
},
sw: {
caminho de arquivo: '/sw.js',
offline_route: '/Offline.html'
},
esconderijo: {
imagens: {
ativo: verdadeiro,
maxentries: 50,
maxageseconds: 24 * 60 * 60
},
estática: {
ativo: verdadeiro,
maxentries: 50,
maxageseconds: 24 * 60 * 60
},
fontes: {
ativo: verdadeiro,
maxentries: 50,
maxageseconds: 24 * 60 * 60
},
rotas: {
networkfirst: {
ativo: verdadeiro,
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(() => {
se for (
PWA.Notification.isDefault() ||
PWA.Notification.isGranted()
) {
PWA.Push.getSubscription((inscrição) => {
se for (inscrição) {
$('Btn1 #').html('Você agora está inscrito para receber Push Notifications!');
} mais {
PWA.Push.subscribe((r) => {
$('Btn1 #').html('Parabéns! Você está inscrito para receber notificações push!');
});
}
});
} mais {
$('Btn1 #').html("Você desligado Push Notifications. Permitir Push Notifications em configurações do seu navegador.");
}
});
Checkbox de alternância para se inscrever / cancelar as Push Notifications
$('Btn1 #').click(() => {
se for (
PWA.Notification.isDefault() ||
PWA.Notification.isGranted()
) {
PWA.Push.getSubscription((inscrição) => {
se for (inscrição) {
PWA.Push.unsubscribe((r) => {
$('Btn1 #').html('Você foi retirado para receber Push Notifications!');
});
} mais {
PWA.Push.subscribe((r) => {
$('Btn1 #').html('Você foi retirado para receber Push Notifications!');
});
}
});
} mais {
$('Btn1 #').html("Você desligado Push Notifications. Permitir Push Notifications em configurações do seu navegador.");
}
});
Exibe um pop-up pedindo permissão para mostrar Notificações
$('Btn1 #').click(() => {
PWA.Notification.requestPermission((estado) => {
$('Btn1 #').html(estado);
});
});
Obter o status de permissão de Notificações
$('Btn1 #').click(() => {
permissão var = PWA.Notification.getPermission();
$('Btn1 #').html(permissão);
});
Mostrar Notificação enviada pelo Navegador
$('Btn1 #').click(() => {
opções const = {
body: 'Conteúdo extra para exibir dentro da notificação',
ícone: '../Images/touch/chrome-touch-icon-192x192.png'
};
PWA.Notification.show('Título Notificação', opções, enviados => {
se for (enviei) {
$('Btn1 #').html('A notificação foi enviada');
}
});
});
Verifique se o navegador da suporte os Service Workers
$('Btn1 #').click(() => {
se for (PWA.Navigator.isSupportedServiceWorker()) {
$('Btn1 #').html('Este suporte navegador Trabalhadores de Serviços!');
} mais {
$('Btn1 #').html('Este navegador não suporta Trabalhadores de Serviços.);
}
});
Verifique se o navegador da suporte as Notificações
$('Btn1 #').click(() => {
se for (PWA.Navigator.isSupportedNotification()) {
$('Btn1 #').html('Notificações de apoio Este navegador!');
} mais {
$('Btn1 #').html('Este navegador não suporta notificações.);
}
});
Verifique se o navegador está offline
$('Btn1 #').click(() => {
se for (PWA.Navigator.isOffline()) {
$('Btn1 #').html('Sem ligação à Internet!');
} mais {
$('Btn1 #').html('Você tem uma conexão com a Internet!');
}
});
Limpar o cache do aplicativo do navegador
$('Btn1 #').click(() => {
PWA .Na VI pensado para r.cle arCache();
});
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
