♻️ (bp)

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. 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 a que 30 minutes,
+1. Des test unitaires, on n'a que 30 minutes,
-1. Des beaux commits, on 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
+- router (ne sera pas utilisé)
-- vuex
+- 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

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') {
+    if (Notification.permission === 'granted') {
-          showCustomNotification(title, options)
+      showCustomNotification(title, options)
-        }
+      return
-      })
+    }
+
+    if (Notification.permission !== 'denied') {
+      const permission = await Notification.requestPermission()
+
+      if (permission === 'granted') {
+        showCustomNotification(title, options)
+      }
     }
   } catch (error) {
     return

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>