Comment construire PWA avec Vue CLI 3 (Travailleurs de service / Ajouter à l'écran d'accueil / Notifications push)

CHANGER LE JOURNAL
- MISE À JOUR 2019–05–04: remplacement de la capture d'écran de Firebase par la version anglaise
- MISE À JOUR 2019–05–16: correction d'un problème concernant 7. cURL
- MISE À JOUR 2019–06–11: modification du mode «Ajouter à l'écran d'accueil» sur le chrome du bureau.

Relations publiques - Embauche d'un concepteur co-fondateur

Je développe actuellement un outil de collaboration pour l’écriture manuscrite en temps réel pour la sortie du système d’exploitation iPad, cet automne.

Veuillez consulter ces publications si ce produit et votre carrière vous intéressent!

Prototype

Quel est PWA?

Les fonctions suivantes concernent l’application Web progressive (PWA).

  • Travailleurs de service
  • Ajouter à l'écran d'accueil
  • Notifications push

En utilisant PWA, vous pouvez fournir aux utilisateurs une UX similaire à l'application native, même si vous la développez en tant qu'application Web.

Je vais essayer ces fonctions avec Vue.js.

PWA avec Vue CLI 3

Démo

https://vue-pwa-tutorial.firebaseapp.com

Code source

Didacticiel

1. Installez Vue CLI 3

Réf. Installation | Vue CLI 3
$ npm install -g @ vue / cli

2. Créer un nouveau projet

$ vue create vue-pwa-tutorial

3. Sélectionnez manuellement

Vue CLI v3.3.0
? Veuillez choisir un préréglage:
  default (babel, eslint)
❯ Sélectionner manuellement les fonctionnalités

4. Sélectionnez PWA

Dactylographié, routeur, Vuex comme vous voudrez.

Vue CLI v3.3.0
? Veuillez choisir un préréglage: sélectionnez manuellement les fonctionnalités
? Vérifiez les fonctionnalités nécessaires à votre projet:
❯◉ Babel
 ◉ TypeScript
 Support Prise en charge de l'application Web progressive (PWA)
 ◉ routeur
 ◉ Vuex
 Pre Pré-processeurs CSS
 ◉ Linter / Formatter
 ◯ Test unitaire
 Testing Test E2E

5. Après cela de manière appropriée

Vue CLI v3.3.0
? Veuillez choisir un préréglage: sélectionnez manuellement les fonctionnalités
? Vérifiez les fonctionnalités nécessaires à votre projet: Babel, TS, PWA, Routeur, Vuex, Linter
? Utiliser la syntaxe de composant de style de classe? Oui
? Utilisez Babel aux côtés de TypeScript pour les remplissages automatiques détectés? Oui
? Utiliser le mode historique pour le routeur? (Nécessite une configuration de serveur appropriée pour le repli de l'index en production) Oui
? Choisissez une configuration linter / formatter: TSLint
? Choisissez des fonctions de peluche supplémentaires: peluche lors de la sauvegarde
? Où préférez-vous placer la configuration pour Babel, PostCSS, ESLint, etc.? Dans des fichiers de configuration dédiés
? Enregistrer ceci comme préréglage pour des projets futurs? Oui
? Enregistrer le préréglage sous:

6. Initialiser

Vue CLI v3.3.0
Création d'un projet dans / Users / zyyx-kubo / WVVUProjects / chatty / vue-pwa-tutorial.
Initialisation du référentiel git ...
Installation des plugins CLI. Cela pourrait prendre un certain temps ...

7. Lancer le serveur web

$ cd vue-pwa-tutorial /
$ npm run serve

8. Accès à localhost

PortableMobile

PWA - Travailleurs de service

Si vous commencez avec npm run serve, les ouvriers du service ne fonctionneront pas comme suit.

Outil de développement> Application> Travailleurs de service

Pour vérifier le comportement des travailleurs du service, vous devez créer avec npm run build.
Si vous publiez le répertoire ./dist à l'aide de Web Server pour Chrome, vous pouvez vérifier que Service Workers fonctionne comme suit. (Commencez généralement par npm run serve quand vous n’utilisez pas de service ouvriers)

$ npm run build
 FAIT La construction est terminée. Le répertoire dist est prêt à être déployé.
Outil de développement> Application> Travailleurs de serviceOutil de développement> Application> Stockage en cache

Le contenu statique (*. Html, * .css, * .js, * .txt) est mis en cache.

Outil Vérifié pour les développeurs> Application> Travailleurs de service> Mettre à jour lors du rechargement et le cache est vidé à chaque rechargement du navigateur. Sinon, supprimez le fichier cible de la mémoire cache.

PWA - Ajouter à l'écran d'accueil

Manifeste Web App

Afin d’afficher la boîte de dialogue «Ajouter à l’écran d’accueil», un fichier manifeste Web App au format JSON est requis.

Si vous avez sélectionné PWA avec Vue CLI, il sera créé par défaut, utilisez-le tel quel.

./public/manifest.json
{
  "name": "vue-pwa-tutorial",
  "short_name": "vue-pwa-tutorial",
  "Icônes": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "tailles": "192x192",
      "type": "image / png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "tailles": "512x512",
      "type": "image / png"
    }
  ],
  "start_url": "./index.html",
  "display": "autonome",
  "background_color": "# 000000",
  "theme_color": "# 4DBA87"
}

Environnement local

Ouvert en tant qu'application de bureauchrome: // apps /

Déployez-vous sur le serveur car vous ne pouvez pas le vérifier par téléphone mobile.

Construire un environnement de démonstration par Firebase Hosting

Comme raison d'utiliser Firebase, j'essaierai les notifications push la prochaine fois. donc c’est une base pour cela.

Réf. Déploiement Firebase | Vue CLI 3
  1. Créer un nouveau projet sur Firebase

Connectez-vous d'abord à la console Firebase avec un compte Google et créez un nouveau projet.

Console Firebase

2. Déployer

Installation de la CLI de Firebase car le déploiement s’exécute avec la ligne de commande.

$ npm install -g firebase-tools
$ login firebase

Initialisation par racine de projet.

$ Firebase init hébergement

? Sélectionnez un projet Firebase par défaut pour ce répertoire: (Utilisez les touches de direction)
  [ne pas configurer un projet par défaut]
❯ vue-pwa-tutorial (vue-pwa-tutorial)
  [créer un nouveau projet]

? Que voulez-vous utiliser comme répertoire public? (public) dist

? Configurer comme une application d'une seule page (réécrire toutes les URL dans /index.html)? (y / N) y

? Le fichier dist / index.html existe déjà. Écraser? (y / N) y

Déploiement

$ firebase deploy --only hosting

L'icône est maintenant ajoutée à l'écran d'accueil ainsi qu'à l'application native. (Le problème d'installation depuis AppStore a également été réduit)

Les contenus statiques étant mis en cache, cela fonctionne rapidement. (Bien que l'API semble être capable de mettre en cache aussi, mais cette fois, il est omis)

PWA - Notifications Push

J'utilise Firebase Cloud Messaging (FCM) pour les notifications push.

Réf. Configurer une application cliente JavaScript Firebase Cloud Messaging | Base de feu
Réf. Recevoir des messages dans un client JavaScript | Base de feu
Réf. Firebase Cloud Messaging Démarrage rapide | GitHub
  1. Configurer les informations d'identification Web avec FCM
Générer une nouvelle paire de clés (Paramètres> Messagerie possible)

2. Ajoutez le gcm_sender_id dans le manifeste de l'application Web.

./public/manitest.json
{
  ...
  "gcm_sender_id": "103953800507"
}

3. Installez le SDK Firebase

$ npm install --save firebase

4. Obtenir la configuration de Firebase

Étape 1Étape 2Étape 3Étape 4Étape 5Terminer (Paramètres> Général)

5. Demander la permission de recevoir des notifications et obtenir un jeton

./src/main.ts
importer * en tant que base de feu à partir de "base de données";

var config = {
  apiKey: "xxxxxxxxxxxxx",
  authDomain: "xxx.firebaseapp.com",
  databaseURL: "https://xxx.firebaseio.com",
  projectId: "xxx",
  storageBucket: "xxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxxx"
}; // 4. Obtenir la configuration de Firebase
firebase.initializeApp (config);

const messagerie = firebase.messaging ();

messaging.usePublicVapidKey ("xxxxxxx"); // 1. Générer une nouvelle paire de clés

// Demande d'autorisation de notifications
messaging.requestPermission (). then (() => {
  console.log ('autorisation de notification accordée.');

  // Obtenir un jeton
  messaging.getToken (). then ((token) => {
    console.log (jeton)
  })
}). catch ((err) => {
  console.log ('Impossible d'obtenir l'autorisation de notifier.', err);
});

6. Ajouter un agent de service pour FCM

Pour recevoir l'événement onMessage, votre application doit définir le travailleur du service de messagerie Firebase dans firebase-messaging-sw.js. Vous pouvez également spécifier un agent de service existant avec useServiceWorker.

./public/firebase-messaging-sw.js
// [START initialize_firebase_in_sw]
// Donne au technicien de service l'accès à la messagerie Firebase.
// Notez que vous pouvez uniquement utiliser la messagerie Firebase ici, les autres bibliothèques Firebase
// ne sont pas disponibles dans le service worker.
importScripts ('https://www.gstatic.com/firebasejs/5.5.6/firebase-app.js');
importScripts ('https://www.gstatic.com/firebasejs/5.5.6/firebase-messaging.js');
// Initialise l'application Firebase dans l'agent de service en transmettant le messagingSenderId.
firebase.initializeApp ({
  'messagingSenderId': 'xxxxxxxxx' // 4. Obtenir la configuration de Firebase
});

// Récupère une instance de Firebase Messaging afin qu'elle puisse gérer les messages en arrière-plan.
const messagerie = firebase.messaging ();
// [END initialize_firebase_in_sw]

Étant donné que la notification push nécessite que Service Worker soit en cours d'exécution, npm exécute la construction et accède à localhost avec Web Server for Chrome.

Demander la permissionObtenir un jeton

7. Recevoir un message de test via cURL

Cloud Messaging> Clé du serveur
$ curl -X POST -H "Autorisation: clé = $ {La clé de serveur ci-dessus}" -H "Type de contenu: application / json" -d '{
  "to": "$ {5’s Token}",
  "notification": {
    "title": "FCM Message",
    "body": "Ceci est un message FCM",
    "icon": "./img/icons/android-chrome-192x192.png"
  }
} 'https://fcm.googleapis.com/fcm/send
SuccèsNe pas recevoir de message si la page cible est activeDialogue de permissionSuccèsUn point de notification est également attaché à l'icône

Sommaire

En utilisant PWA, vous pouvez fournir une UX similaire à une application native, même avec une application Web.

Puisqu'il y a des choses que je ne peux pas présenter cette fois-ci, j'écrirai de nouveau si j'en ai l'occasion.

Travailleurs de service

  • Contrôle du cache
  • Page hors ligne

Notifications push

  • Actualiser les jetons
  • Firebase Cloud Messaging

finalement

J'ai posté le tutoriel original sur mon blog. Si vous pensez que cet article est bon, réagissez-le. Je vous remercie.