Commit 0ab647d4 authored by Tim Visée's avatar Tim Visée
Browse files

Merge branch '354-improve-pwa-to-meet-all-google-lighthouse-pwa-requirements' into 'master'

Resolve "Improve PWA to meet all Google Lighthouse PWA requirements"

Closes #354

See merge request !187
parents b7ce677b eb1a8db0
Pipeline #181876652 passed with stage
in 5 minutes and 6 seconds
......@@ -8,6 +8,8 @@
/public/css
/public/fonts
/public/flags
/public/sw.js
/public/workbox*.js
#################
## Laravel
......
This diff is collapsed.
......@@ -25,5 +25,8 @@
"vue": "^2.6.11",
"vue-template-compiler": "^2.6.11",
"webpack-shell-plugin": "^0.5.0"
},
"dependencies": {
"workbox-webpack-plugin": "^5.1.3"
}
}
......@@ -9,6 +9,17 @@
"src": "/img/logo/logo_square.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/img/logo/logo_maskable_icon.png",
"sizes": "1024x1024",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/img/logo/logo_square_x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"shortcuts": [
......
......@@ -4,7 +4,6 @@
"/css/app.css": "/css/app.css",
"/css/flag-icon.css": "/css/flag-icon.css",
"/js/quickbuy.js": "/js/quickbuy.js",
"/js/sw.js": "/js/sw.js",
"/js/jquery-packed.js": "/js/jquery-packed.js",
"/css/glyphicons-packed.css": "/css/glyphicons-packed.css",
"/css/semantic.min.css": "/css/semantic.min.css",
......
var axios = require('axios');
// Register service worker for offline usage
/**
* Keeps PWA prompt event so we can manually trigger it.
*/
var pwaDeferredPrompt = null;
// Register service worker for PWA/offline usage
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/js/sw.js')
.then(function() {
console.log('Service worker registered');
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js').then(registration => {
console.log('Service worker registered: ', registration);
}).catch(registrationError => {
console.log('Service worker registration failed: ', registrationError);
});
});
}
// Catch PWA install prompt
window.addEventListener('beforeinstallprompt', (e) => {
// Keep event so we can trigger prompt later
pwaDeferredPrompt = e;
// Manage PWA install button
managePwaInstallButton();
});
$(document).ready(function() {
// Initialize components
$('.ui.checkbox').checkbox();
......@@ -41,37 +57,31 @@ $(document).ready(function() {
/**
* Manage the PWA install button.
*/
// TODO: improve this logic
function managePwaInstallButton() {
// Get install button, hide if useless, hold reference to PWA prompt
let deferredPrompt;
// Select install button, hide by default
const installBtn = document.querySelector('.pwa-install-button');
installBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
// // Prevent Chrome 67 and earlier from automatically showing the prompt
// e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI to notify the user they can add to home screen
installBtn.style.display = 'block';
installBtn.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
installBtn.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then((choiceResult) => {
// TODO: remove logging?
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
// Stop if we did not catch PWA prompt
if(pwaDeferredPrompt == null)
return;
// Show install button if PWA prompt was deferred
installBtn.style.display = 'block';
installBtn.addEventListener('click', (e) => {
installBtn.style.display = 'none';
// Show prompt
pwaDeferredPrompt.prompt();
pwaDeferredPrompt.userChoice.then((choiceResult) => {
// TODO: remove logging?
// if (choiceResult.outcome === 'accepted') {
// console.log('User accepted the A2HS prompt');
// } else {
// console.log('User dismissed the A2HS prompt');
// }
pwaDeferredPrompt = null;
});
});
}
......
self.addEventListener('install', function(e) {
e.waitUntil(
caches.open('barbapappa').then(function(cache) {
return cache.addAll([
// TODO: improve this list, less resources, only necessary
'/css/app.css',
'/css/flag-icon.css',
'/css/glyphicons-packed.css',
'/css/semnatic.min.css',
'/img/logo/logo_square.png',
'/js/app.js',
'/js/jquery-packed.js',
'/js/lang.js',
'/js/quickbuy.js',
'/js/semantic.min.js',
]);
})
);
});
self.addEventListener('fetch', function(e) {
// TODO: remove console log here, only to debug?
console.log(e.request.url);
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});
......@@ -8,6 +8,7 @@
<meta name="HandheldFriendly" content="True">
<meta name="theme-color" content="#e9e9e9">
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="apple-touch-icon" href="/img/icon/logo_apple_touch_icon.png">
<meta name="application-name" content="{{ config('app.name', 'Barbapappa') }}">
<meta name="author" content="{{ config('app.author') }}">
......
// noinspection JSAnnotator
let mix = require('laravel-mix');
const WebpackShellPlugin = require('webpack-shell-plugin');
const {GenerateSW} = require('workbox-webpack-plugin');
// Add shell command plugin configured to create JavaScript language file
mix.webpackConfig({
......@@ -9,6 +10,13 @@ mix.webpackConfig({
onBuildStart:['php artisan lang:js --compress --quiet'],
onBuildEnd:[],
}),
new GenerateSW({
// TODO: do not exclude common files
exclude: [
/.*\.(js|css)/
],
swDest: 'sw.js',
}),
]
});
......@@ -33,9 +41,6 @@ mix.copyDirectory(
mix.js(
'resources/js/app.js',
'public/js',
).js(
'resources/js/sw.js',
'public/js',
).js(
'resources/js/quickbuy/quickbuy.js',
'public/js',
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment