Creació de PWA amb Vue CLI 3 (personal de servei / afegir a la pantalla d’inici / notificacions push)

PROCEDIMENT DE CANVI: ACTUALITZACIÓ 2019-05-04: la captura de pantalla de Firebase es va substituir per la versió en anglès - ACTUALITZACIÓ 2019-05-16: problema amb 7. cURL corregit - ACTUALITZACIÓ 2019-06-11: el procediment per afegir a la pantalla d’inici a l’escriptori Chrome ha canviat

PR - Dissenyador de reclutament Cofundador

Just a temps per al llançament de l’iPad OS a la tardor d’aquest any, estic desenvolupant l’eina en temps real per a la col·laboració d’escriptura a mà.

Consulteu aquestes publicacions si esteu interessat en aquest producte i la vostra carrera professional.

prototip

Què és PWA?

Les funcions següents estan disponibles per a PWA (Progressive Web App).

  • Personal de servei
  • Afegeix a la pantalla d'inici
  • anuncis

Podeu utilitzar PWA per proporcionar als usuaris UX similar a Native Application, fins i tot si el desenvolupeu com a aplicació web.

Provaré aquestes funcions amb Vue.js.

PWA amb Vue CLI 3

demostració

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

Codi font

Tutorial

1. Instal·leu Vue CLI 3

Instal·lació Ref Vue CLI 3
$ npm install -g @ vue / cli

2. Creeu un nou projecte

$ vue crea un tutorial de vista-pwa

3. Trieu manualment

Vue CLI v3.3.0? Seleccioneu una configuració predeterminada: Estàndard (Babel, Eslint) ❯ Seleccioneu les funcions manualment

4. Trieu PWA

Mecanoscrit, encaminador, Vuex a voluntat.

Vue CLI v3.3.0? Seleccioneu un valor predefinit: seleccioneu les funcions manualment? Comproveu les funcions necessàries per al vostre projecte: ❯◉ Babel ◉ TypeScript support Suport d’aplicacions web progressives (PWA) ◉ Encaminador ◉ Vuex ◯ Preprocessadors CSS ◉ Linter / formatador testing Prova d’unitat test Prova E2E

5. Llavors en conseqüència

Vue CLI v3.3.0? Seleccioneu un valor predefinit: seleccioneu les funcions manualment? Comproveu les funcions necessàries per al vostre projecte: Babel, TS, PWA, Router, Vuex, Linter? Voleu utilitzar la sintaxi del component d'estil de classe? Sí? Feu servir Babel amb TypeScript per a omplir poliesplenes reconegudes automàticament? Sí? Voleu utilitzar el mode d'historial per a l'encaminador? (Cal una configuració del servidor adequada per a la recuperació de l'índex en producció.) Sí? Trieu una configuració linter / formatador: TSLint? Seleccioneu característiques addicionals de fluff: Fluff quan deseu? On voleu situar la configuració de Babel, PostCSS, ESLint, etc.? Als fitxers de configuració dedicats? Voleu desar-lo com a predefinit per a futurs projectes? Sí? Desa la configuració predeterminada com a:

6. Inicialitzar

Vue CLI v3.3.0  Creeu un projecte a / Users / zyyx-kubo / WVVUProjects / chatty / vue-pwa-tutorial. 🗃 S'està inicialitzant el dipòsit Git ... ⚙ Instal·lant connectors CLI. Això pot trigar una estona ...

7. Executeu el servidor web

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

8. Accés a localhost

PortàtilTelèfon mòbil, telèfon mòbil

PWA: empleat del servei

Si comenceu amb el servei d'execució de npm, el personal del servei no funcionarà de la següent manera.

Eina per a desenvolupadors> Aplicació> Empleat del servei

Per comprovar el comportament dels treballadors del servei, heu de crear amb npm run build. Si publiqueu el directori ./dist mitjançant el servidor web per a Chrome, podeu verificar que els treballadors del servei funcionin de la manera següent. (Normalment, comenceu amb npm run servif si no utilitzeu treballadors del servei).

$ npm run build S'ha completat la compilació. El directori dist ja està llest per desplegar-se.
Eina per a desenvolupadors> Aplicació> Empleat del serveiEina per a desenvolupadors> Aplicació> Emmagatzematge de memòria cau

El contingut estàtic (* .html, * .css, * .js, * .txt) es guarda a la memòria cau.

Eina per a desenvolupadors verificada> Aplicació> Personal de servei> Actualització de la recàrrega. La memòria cau es buida cada vegada que es torna a carregar el navegador. En cas contrari, suprimiu el fitxer de destinació de la memòria cau.

PWA - Afegeix a la pantalla d'inici

Manifest d'aplicació web

Es necessita un fitxer de manifest d'aplicació web amb format JSON per mostrar el quadre de diàleg Afegeix a la pantalla d'inici.

Si heu seleccionat PWA amb Vue CLI, es crearà per defecte. Així que utilitzeu-lo tal com és.

./public/manifest.json
{"name": "vue-pwa-tutorial", "short_name": "vue-pwa-tutorial", "icons": [{"src": "./img/icons/android-chrome-192x192.png" , "Mides": "192x192", "tipus": "imatge / png"}, {"src": "./img/icons/android-chrome-512x512.png", "Mides": "512x512", " escriviu ":" image / png "}]," start_url ":" ./index.html "," display ":" Autònom "," background_color ":" # 000000 "," theme_color ":" # 4DBA87 "}

Entorn immediat

Obert com a aplicació d'escriptorichrome: // apps /

Feu el desplegament al servidor perquè no el podreu verificar amb el telèfon mòbil.

Creeu un entorn de demostració amb l'allotjament de Firebase

Com a motiu per utilitzar Firebase, provaré les notificacions push la propera vegada. per tant, és una base per a això.

Ref. Desplegament Firebase | Vue CLI 3
  1. Creeu un projecte nou a Firebase

Primer, inicieu sessió a la consola de Firebase amb un compte de Google i creeu un projecte nou.

Consola Firebase

2. Desplegar

Instal·leu Firebase CLI ja que el desplegament es realitza des de la línia d’ordres.

$ npm install -g firebase-tools
$ inici de sessió de firebase

Inicialització pel mestre del projecte.

$ firebase init hosting? Seleccioneu un projecte estàndard de Firebase per a aquest directori: (Utilitzeu les tecles de fletxa.) [No configureu un projecte estàndard] ❯ vue-pwa-Tutorial (vue-pwa-Tutorial) [Voleu crear un projecte nou]? Què voleu utilitzar com a directori públic? (públic) dist? Voleu configurar-lo com a aplicació unilateral (reescriviu tots els URL a /index.html)? (sí / n) sí? El fitxer dist / index.html ja existeix. Sobreescriure? (sí / n) y

compromís

Implementació de $ firebase: només allotjament

La icona ara s’afegeix a la pantalla d’inici i a l’aplicació nativa. (També s'ha reduït l'esforç d'instal·lació d'AppStore)

Com que el contingut estàtic està emmagatzemat a la memòria cau, això funciona ràpidament. (Sembla que l'API també pot emmagatzemar a la memòria cau, però aquesta vegada s'omet

PWA: notificacions push

Faig servir Firebase Cloud Messaging (FCM) per a notificacions push.

Ref. Configureu una aplicació de client de JavaScript Firebase Cloud Messaging Ref. Firebase Ref. Rebre missatges en un client JavaScript Firebase Ref. Firebase Cloud Messaging - Inici ràpid | GitHub
  1. Configureu les credencials web mitjançant FCM
Genereu un parell de claus nou (Configuració> Podria fer missatges)

2. Afegiu el gcm_sender_id al Manifest de l'aplicació web

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

3. Instal·leu l'SDK de Firebase

$ npm install - save firebase

4. Obteniu la configuració de Firebase

Pas 1pas 2pas 3Pas 4Pas 5Finalitza (Configuració> General)

5. Sol·liciteu permís per a notificacions i recupereu fitxes

./src/main.ts
* importar com a firebase des de "firebase"; var config = {apiKey: "xxxxxxxxxxxx", authDomain: "xxx.firebaseapp.com", databaseURL: "https://xxx.firebaseio.com", projectId: "xxx", storageBucket: "xxx.appspot.com", messagingSenderId: "xxxxxxxxxxxx"}; // 4. Obteniu la configuració de Firebase firebase.initializeApp (config); const messaging = firebase.messaging (); messaging.usePublicVapidKey ("xxxxxxx"); // 1. Genereu un nou parell de claus // sol·liciteu permís per a notificacions messaging.requestPermission (). then (() => {console.log ('Permís de notificació concedit.'); // Obtenir token messaging.getToken (). then ((Token) => {console.log (Token)})}). catch ((err) => {console.log ('No es pot obtenir el permís de notificació.', err);});

6. Afegiu treballadors del servei a FCM

Per rebre l'esdeveniment onMessage, l'aplicació ha de definir el treballador del servei de missatgeria Firebase a firebase-messaging-sw.js. Com a alternativa, podeu especificar un empleat de servei existent amb useServiceWorker.

./public/firebase-messaging-sw.js
// [START initialize_firebase_in_sw] // Concediu accés als empleats del servei a la missatgeria Firebase. // Tingueu en compte que aquí només podeu utilitzar la missatgeria de Firebase; altres biblioteques de Firebase // no estan disponibles al treballador del servei. importScripts ('https://www.gstatic.com/firebasejs/5.5.6/firebase-app.js'); importScripts ('https://www.gstatic.com/firebasejs/5.5.6/firebase-messaging.js'); // Inicialitzeu l'aplicació Firebase al treballador del servei passant el missatgeSenderId. firebase.initializeApp ({'messagingSenderId': 'xxxxxxxxx' // 4. Obteniu la configuració de Firebase}); // Obteniu una instància de missatges de Firebase perquè pugui gestionar els missatges en segon pla. const messaging = firebase.messaging (); // [END initialize_firebase_in_sw]

Com que Service Worker ha d’executar-se per a la notificació push, executeu npm build i accediu a localhost mitjançant el servidor web per a Chrome.

Demana permísObteniu fitxes

7. Rebeu el missatge de prova mitjançant cURL

Missatgeria al núvol> Claus de servidor
$ curl -X POST -H "Autorització: clau = $ {La clau del servidor anterior}" -H "Tipus de contingut: application / json" -d '{"to": "$ {5's token}", "Notification": {" title ":" Missatge FCM "," body ":" Aquest és un missatge FCM "," icona ":" ./img/icons/android-chrome-192x192.png "}} 'https: //fcm.googleapis .com / fcm / send
èxitNo s'ha rebut cap missatge quan la pàgina de destinació està activaDiàleg d'autoritzacióèxitTambé s’adjunta un punt de notificació al símbol

Resum

En utilitzar PWA, podeu desplegar UX amb una aplicació web, de manera similar a una aplicació nativa.

Com que hi ha coses que no puc imaginar aquesta vegada, tornaré a escriure quan tingui l'oportunitat.

Personal de servei

  • Control de memòria cau
  • Costat fora de línia

anuncis

  • Actualitza el testimoni
  • Missatgeria en núvol de Firebase

Finalment

Vaig publicar el tutorial original al meu bloc. Si creieu que aquest article és bo, responeu. Gràcies.