From 59c48184a76cb519c72c18971f123afdd8565418 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Sat, 4 Jul 2020 22:24:58 +0200 Subject: [PATCH] :recycle: (bp) --- README.md | 14 ++++++++------ src/utils/notification.ts | 30 ++++++++++++++++-------------- src/views/About.vue | 5 ----- 3 files changed, 24 insertions(+), 25 deletions(-) delete mode 100644 src/views/About.vue diff --git a/README.md b/README.md index 737434c..294dbf9 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Bons programmeurs -# De 0 à héros : Mettre une PWA en production _en 30 minutes_. +# PWA : de 0 à héros - mettre en production _en 30 minutes_. ## Étapes @@ -13,9 +13,9 @@ Dans cette formation, il n'y aura pas : -1. React ou React-Native, l'application sera un site web avec des traits d'application mobile, ce sera l'occasion de voir une nouvelle techno JavaScript ! -1. Des test unitaires, on a que 30 minutes, -1. Des beaux commits, on a que 30 minutes. +1. React ou React-Native, le but est de réaliser un site web avec des traits d'application mobile, ce sera l'occasion de voir une nouvelle techno JavaScript ! +1. Des test unitaires, on n'a que 30 minutes, +1. Des beaux commits, on n'a que 30 minutes. ### Une PWA avec VueJS @@ -28,14 +28,15 @@ Fonctionnalités : - node-sass - babel - typescript -- router -- vuex +- router (ne sera pas utilisé) +- vuex (ne sera pas utilisé) - eslint `yarn install @vue/composition-api` 1. Ajouter composition API au fichier principal `main.ts` 1. Nettoyer `App.ts` +1. Ajouter les règles à `eslintrc` #### Code @@ -46,6 +47,7 @@ Fonctionnalités : 1. Créer le fichier `app.scss` et l'importer dans `App.vue` 1. Créer le système de notification 1. Créer le logo et utiliser `npx vue-pwa-asset-generator -a public/logo.svg -o public/img` +1. Présenter `vue.config.js` pour alimenter le `manifest.json` 1. Créer la fonctionnalité de musique. #### Déployer sur Netlify diff --git a/src/utils/notification.ts b/src/utils/notification.ts index 705d55c..7d920c9 100644 --- a/src/utils/notification.ts +++ b/src/utils/notification.ts @@ -1,5 +1,3 @@ -declare const Notification: any - type ShowNotification = ( title: string, options?: NotificationOptions @@ -11,7 +9,10 @@ export const setNotificationInstance = (sn: ShowNotification) => { showNotification = sn } -export const notify = (title: string, options?: NotificationOptions) => { +export const notify: ShowNotification = async ( + title: string, + options?: NotificationOptions +) => { const showCustomNotification = ( title: string, options?: NotificationOptions @@ -31,18 +32,19 @@ export const notify = (title: string, options?: NotificationOptions) => { try { if (!('Notification' in window)) { return - } else if (Notification.permission === 'granted') { - showCustomNotification(title, options) - } else if (Notification.permission !== 'denied') { - Notification.requestPermission((permission: any) => { - if (!('permission' in Notification)) { - Notification.permission = permission - } + } - if (permission === 'granted') { - showCustomNotification(title, options) - } - }) + if (Notification.permission === 'granted') { + showCustomNotification(title, options) + return + } + + if (Notification.permission !== 'denied') { + const permission = await Notification.requestPermission() + + if (permission === 'granted') { + showCustomNotification(title, options) + } } } catch (error) { return diff --git a/src/views/About.vue b/src/views/About.vue deleted file mode 100644 index 3fa2807..0000000 --- a/src/views/About.vue +++ /dev/null @@ -1,5 +0,0 @@ -