Last active
November 8, 2023 01:24
-
-
Save Uriel29/e4fa54c0ddf173a5c348266a34e972e2 to your computer and use it in GitHub Desktop.
Instalar PWA com botão que aparece assim que o Service esta registrado e o beforeinstallprompt esta funcional! Deixei o botão como none:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| window.onload = function() { | |
| if ('serviceWorker' in navigator) { | |
| navigator.serviceWorker.register('sw.js').then(function() { | |
| console.log('Service Worker Registered'); | |
| }); | |
| } | |
| let deferredPrompt; | |
| const addBtn = document.querySelector('#enable-banner-install'); | |
| window.addEventListener('beforeinstallprompt', (e) => { | |
| console.log('beforeinstallprompt...'); | |
| addBtn.style.display = 'block'; | |
| e.preventDefault(); | |
| deferredPrompt = e; | |
| addBtn.addEventListener('click', (e) => { | |
| addBtn.style.display = 'none'; | |
| deferredPrompt.prompt(); | |
| deferredPrompt.userChoice.then((choiceResult) => { | |
| if (choiceResult.outcome === 'accepted') { | |
| console.log('User accepted the prompt'); | |
| } else { | |
| console.log('User dismissed the prompt'); | |
| } | |
| deferredPrompt = null; | |
| }); | |
| }); | |
| }); | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <link rel="manifest" href="manifest.json" /> | |
| <meta name="theme-color" content="#f2f2f2"/> | |
| <style> | |
| #enable-banner-install{ | |
| display:none ; | |
| } | |
| </style> | |
| <link rel="stylesheet" type="text/css" href="tes.css"> | |
| </head> | |
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <button type="button" id="enable-banner-install">clique e me instale na sua tela inicial</button> | |
| <h1>Nada a declarar neste h1 </h1> | |
| <p>Este paragrafo nem quer dizer nada.</p> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "APP I TESTE", | |
| "short_name": "APPI", | |
| "theme_color": "#2196f3", | |
| "background_color": "#2196f3", | |
| "display": "standalone", | |
| "Scope": "/", | |
| "start_url": "http://localhost/pw/index.html", | |
| "icons": [ | |
| { | |
| "src": "images/icons/icon-72x72.png", | |
| "sizes": "72x72", | |
| "type": "image/png" | |
| }, | |
| { | |
| "src": "images/icons/icon-96x96.png", | |
| "sizes": "96x96", | |
| "type": "image/png" | |
| }, | |
| { | |
| "src": "images/icons/icon-128x128.png", | |
| "sizes": "128x128", | |
| "type": "image/png" | |
| }, | |
| { | |
| "src": "images/icons/icon-144x144.png", | |
| "sizes": "144x144", | |
| "type": "image/png" | |
| }, | |
| { | |
| "src": "images/icons/icon-152x152.png", | |
| "sizes": "152x152", | |
| "type": "image/png" | |
| } | |
| ], | |
| "splash_pages": null | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var VERSION = '22'; | |
| this.addEventListener('install', function(e) { | |
| e.waitUntil(caches.open(VERSION).then(cache => { | |
| return cache.addAll([ | |
| 'http://localhost/pw/tes.css' | |
| ]); | |
| })) | |
| }); | |
| this.addEventListener('fetch', function(e) { | |
| var tryInCachesFirst = caches.open(VERSION).then(cache => { | |
| return cache.match(e.request).then(response => { | |
| if (!response) { | |
| return handleNoCacheMatch(e); | |
| } | |
| fetchFromNetworkAndCache(e); | |
| return response | |
| }); | |
| }); | |
| e.respondWith(tryInCachesFirst); | |
| }); | |
| this.addEventListener('activate', function(e) { | |
| e.waitUntil(caches.keys().then(keys => { | |
| return Promise.all(keys.map(key => { | |
| if (key !== VERSION) | |
| return caches.delete(key); | |
| })); | |
| })); | |
| }); | |
| function fetchFromNetworkAndCache(e) { | |
| if (e.request.cache === 'only-if-cached' && e.request.mode !== 'same-origin') return; | |
| return fetch(e.request).then(res => { | |
| if (!res.url) return res; | |
| if (new URL(res.url).origin !== location.origin) return res; | |
| return caches.open(VERSION).then(cache => { | |
| return res; | |
| }); | |
| }).catch(err => console.error(e.request.url, err)); | |
| } | |
| function handleNoCacheMatch(e) { | |
| return fetchFromNetworkAndCache(e); | |
| } |
Site para ver o que o HTML5 acessa
https://whatwebcando.today/
De onde retirei os códigos > https://github.com/mdn/pwa-examples
Show cara!! Testei aqui funcionou 100%, estava alguns dias buscando um código mais limpo e funcional. 👍 +1:
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Deixei o botão como style: none. Caso o beforeinstallprompt não esteja funcional por algum motivo. Ele nem aparece!
Para IOS https://medium.com/appscope/designing-native-like-progressive-web-apps-for-ios-1b3cdda1d0e8