Erstellen einer PWA bei Google, Teil 1

Esta es la primera de una serie de publicaciones de BlogEl término blog se usa para describir un diario virtual en Internet. El autor de un blogger puede publicar posts sobre cualquier tema. Los posts suelen estar presente de forma cronológica. El estilo de redacción de un blog suele ser informal y se escribe en primera persona. No obstante, además son posibles otros estilos, por ejemplo en el caso de los periódicos online, en los que la atención se centra Plus sobre las lecciones que aprendió el equipo de Google Bulletin al crear una PWA externa. En estas publicaciones compartiremos algunos de los desafíos que enfrentamos, los enfoques que tomamos para superarlos y consejos generales para evitar trampas. Esta no es de ninguna manera una descripción general completa de las PWA. El Ziel¿Qué es un objetivo?En marketing, un objetivo es el resultado que se pretende alcanzar en un periodo de tiempo, a través el uso de los recursos disponibles. Por tanto, se debe formular de una forma clara y hace falta que sea accesible y medible. Plus es compartir los aprendizajes de la experiencia de nuestro equipo.

In diesem ersten Beitrag werden wir zunächst einige allgemeine Informationen behandeln und dann auf alles eingehen, was wir über Servicemitarbeiter gelernt haben.

Hintergrund

Das Bulletin befand sich von Mitte 2017 bis Mitte 2019 in aktiver Entwicklung.

Warum wir uns für den Bau einer PWA entschieden haben

Bevor wir uns mit dem Entwicklungsprozess befassen, wollen wir untersuchen, warum das Erstellen einer PWA eine attraktive Option für dieses Projekt war:

• Fähigkeit, schnell zu iterieren. Besonders wertvoll, da das Bulletin in mehreren Märkten getestet werden würde.
• Einzelne Codebasis. Unsere Benutzer waren ungefähr gleichmäßig zwischen Android und iOS aufgeteilt. Eine PWA bedeutete, dass wir eine einzige Webanwendung erstellen konnten, die auf beiden Plattformen funktioniert. Dies erhöhte die Geschwindigkeit und Wirkung des Teams.
• Schnell und unabhängig vom Benutzerverhalten aktualisiert. PWAs können automatisch aktualisiert werden, wodurch die Anzahl veralteter Clients in freier Wildbahn verringert wird. Mit einer sehr kurzen Migrationszeit für Kunden konnten wir wichtige Änderungen am Backend vornehmen.
• Es lässt sich problemlos in Ihre eigenen Anwendungen und Anwendungen von Drittanbietern integrieren. Tales integraciones eran un requisito para la aplicación. Con una PWA, a menudo significaba simplemente abrir una UrlEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo Plus.
• Die Reibung bei der Installation einer App wurde beseitigt.

Unser Rahmen

Für Bulletin verwenden wir Polymer, aber jedes moderne, gut unterstützte Framework wird es tun.

Was wir über Servicemitarbeiter gelernt haben

Sie können keine PWA ohne eine haben Servicemitarbeiter. Los trabajadores de servicios le brindan mucho poder, como estrategias avanzadas de almacenamiento en ZwischenspeicherUn caché es un tipo de memoria auxiliar de la que se puede recuperar a alta velocidad con una capacidad de almacenamiento relativamente pequeña. Se encuentra entre la unidad central de procesamiento (CPU) y la memoria principal. Ayuda a evitar el acceso al disco duro o los recálculos complejos almacenando temporalmente ciertos datos y haciéndolos disponibles rápidamente cuando sea necesario. El caché almacena una copia de la petición actual y Plus, capacidades fuera de línea, sincronización en segundo plano, etc. Si bien los trabajadores de servicios agregan algo de complejidad, descubrimos que sus beneficios superan la complejidad adicional.

Generieren Sie es, wenn Sie können

Vermeiden Sie es, ein Service Worker-Skript von Hand zu schreiben. Das manuelle Schreiben von Servicemitarbeitern erfordert das manuelle Verwalten zwischengespeicherter Ressourcen und das Umschreiben der Logik, die den meisten Servicemitarbeiterbibliotheken gemeinsam ist, z Arbeitsbox.

Aufgrund unseres internen Tech-Stacks konnten wir jedoch keine Bibliothek zum Generieren und Verwalten unserer Servicemitarbeiter verwenden. Unsere folgenden Erkenntnisse werden dies manchmal widerspiegeln. Weitere Informationen finden Sie unter Probleme für nicht generierte Servicemitarbeiter.

Nicht alle Bibliotheken sind mit Servicemitarbeitern kompatibel

Einige JS-Bibliotheken gehen davon aus, dass sie nicht wie erwartet funktionieren, wenn sie von einem Servicemitarbeiter ausgeführt werden. Zum Beispiel unter der Annahme Fenster oder Dokument están disponibles, o usando una APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene Plus no disponible para los trabajadores del servicio (XMLHttpRequest, lokaler Speicher usw.). Stellen Sie sicher, dass die für Ihre Anwendung erforderlichen kritischen Bibliotheken von Servicemitarbeitern unterstützt werden. Für diese spezielle PWA wollten wir verwenden
gapi.js para la autenticación, pero no pudieron hacerlo porque no admitía a los trabajadores del servicio. Los autores de bibliotecas también deben reducir o eliminar suposiciones innecesarias sobre el contexto de JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar Plus siempre que sea posible para respaldar los casos de uso de trabajadores de servicios, como evitar API incompatibles con trabajadores de servicios y evitar el estado global.

Vermeiden Sie den Zugriff auf IndexedDB während der Initialisierung

Nicht lesen IndexedDB Während Sie Ihr Service Worker-Skript initialisieren, geraten Sie möglicherweise in diese unerwünschte Situation:

1. Der Benutzer hat eine Webanwendung mit IndexedDB (IDB) Version N.
2. Eine neue Webanwendung ist in der N + 1-Version der IDB enthalten
3. Der Benutzer besucht PWA, wodurch der Download eines neuen Servicemitarbeiters ausgelöst wird
4. Der neue Servicemitarbeiter liest vor der Registrierung aus der IDB Installieren Ereignishandler, der einen BID-Aktualisierungszyklus aktiviert, um von N nach N + 1 zu gelangen
5. Da der Benutzer einen alten Client mit Version N hat, bleibt der Aktualisierungsprozess für Service Worker hängen, da aktive Verbindungen zur vorherigen Version der Datenbank noch offen sind
6. Der Servicemitarbeiter hängt und wird nie installiert

In unserem Fall ist der Cache bei der Installation des Service Workers ungültig. Wenn der Service Worker also nie installiert wurde, haben die Benutzer die aktualisierte Anwendung nie erhalten.

Mach es hart

Aunque los SkripteConcepto de Scripts¿Qué son los Scripts?Los Scripts son fragmentos de código que se usan para dar forma a herramientas tanto en Internet como en el sector de la informática en general. Son una parte crucial del software, puesto que se trata exactamente del código que conforma a una aplicación en su totalidad o a una de sus funciones, como además el que puedes hallar explorando cómo está hecha una web.Desde Plus de los trabajadores de servicios se ejecutan en segundo plano, también se pueden finalizar en cualquier momento, incluso cuando se encuentran en medio de operaciones de E / S (red, IDB, etc.). Cualquier proceso de larga duración debería poder reanudarse en cualquier momento.

En el caso de un proceso de sincronización que cargó archivos grandes al ServerLos servidores son ordenadores centrales y potentes dentro del campo de la tecnología de la información que procesan y proporcionan software y archivos en una red. Desde el punto de vista de un cliente, varios ordenadores en una red pueden ponerse en contacto con el servidor central para conseguir la información solicitada. En la arquitectura cliente-servidor, el servidor puede ser un software que proporciona un servicio y se ejecuta en Plus y se guardó en el BID, nuestra solución para las cargas parciales interrumpidas fue aprovechar el sistema reanudable de nuestra biblioteca de carga interna, guardando la URL de carga reanudable en el BID antes de cargar y usar esa URL para reanudar una carga si no se completó la primera vez. Además, antes de cualquier operación de E / S de larga duración, el estado se guardaba en IDB para indicar en qué parte del proceso estábamos para cada registro.

Hängen Sie nicht vom globalen Staat ab

Da Servicemitarbeiter in einem anderen Kontext existieren, sind viele Symbole, die Sie möglicherweise erwarten, nicht vorhanden. Ein Großteil unseres Codes lief auf beiden Fenster Kontext sowie einen Service Worker-Kontext (wie Registrierung, Flags, Synchronisierung usw.). Der Code sollte gegenüber den von Ihnen verwendeten Diensten, wie z. B. lokalem Speicher oder Cookies, defensiv sein. Sie können verwenden
globalThis

auf das globale Objekt in einer Weise zu verweisen, die in allen Kontexten funktioniert. Verwenden Sie auch in globalen Variablen gespeicherte Daten sparsam, da nicht garantiert werden kann, wann das Skript beendet und der Status gelöscht wird.

Lokale Entwicklung

Ein wichtiger Bestandteil der Servicemitarbeiter ist das lokale Zwischenspeichern von Ressourcen. Während der Entwicklung ist dies jedoch die Gegenteil als Sie möchten, insbesondere wenn Aktualisierungen träge durchgeführt werden. Sie möchten den Server Worker weiterhin installieren, damit Sie Probleme damit debuggen oder mit anderen APIs wie Hintergrundsynchronisierung oder Benachrichtigungen arbeiten können. In Chrome können Sie dies über Chrome DevTools erreichen, indem Sie die Option aktivieren Bypass für Netzwerk KontrollkästchenAnfrage Panel> Servicemitarbeiter Panel) zusätzlich zur Aktivierung der Cache deaktivieren Kontrollkästchen in der Netz panel para deshabilitar también la memoria caché. Para cubrir más BrowserConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet Plus, optamos por una solución diferente al incluir una marca para deshabilitar el almacenamiento en caché en nuestro trabajador de servicio, que está habilitado de forma predeterminada en las compilaciones de desarrolladores. Esto asegura que los desarrolladores siempre obtengan sus cambios más recientes sin problemas de almacenamiento en caché. Es importante incluir el Cache-Kontrolle: kein Cache encabezado también para evitar que el BrowserUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los Plus almacene en caché cualquier activo.

Leuchtturm

Leuchtturm proporciona una serie de herramientas de depuración útiles para las PWA. Escanea un sitio y genera informes que cubren PWA, rendimiento, BarrierefreiheitAccesibilidad significa que algo puede ser usado, obtenido, acercado, ingresado o alcanzado. De ello pueden derivarse dos significados aplicables a Internet. En primer lugar, la provisión de acceso a Internet a las personas con discapacidad o a las personas mayores lo más libre viable de barreras y, en segundo lugar, la accesibilidad y la legibilidad de una web para un crawler. Accesibilidad en términos de ausencia de barreras Actualmente, Internet Plus, SEO  ¿Qué es SEO o search engine optimization?   Conjunto de prácticas destinadas a mejorar el posicionamiento de una web en el ranking de resultados de los motores de búsqueda. Al contrario que la estrategia SEM, que contempla la inclusión de enlaces contratados para obtener este objetivo, el procedimiento SEO se ocupa exclusivamente de los resultados naturales (no pagados) localizados por el algoritmo propio de cada buscador. Para esto contempla ajustar Plus y otras mejores prácticas.
Wir empfehlen Lighthouse in kontinuierlicher Integration ausführen um Sie wissen zu lassen, wenn Sie keines der Kriterien für eine PWA erfüllen. Dies ist uns tatsächlich einmal passiert, als der Servicemitarbeiter nicht installiert hat und wir vorher keinen Produktionsschub bemerkt haben. Lighthouse als Teil unseres CI zu haben, hätte dies verhindert.

Umfassen Sie kontinuierliche Lieferung

Da Servicemitarbeiter automatisch aktualisieren können, können Benutzer Aktualisierungen nicht einschränken. Dies reduziert die Anzahl veralteter Kunden in freier Wildbahn erheblich. Als der Benutzer unsere App öffnete, bediente der Servicemitarbeiter den alten Kunden, während er den neuen Kunden träge herunterlud. Sobald der neue Client heruntergeladen wurde, wird der Benutzer aufgefordert, die Seite zu aktualisieren, um auf neue Funktionen zugreifen zu können. Selbst wenn der Benutzer diese Anforderung ignorierte, erhielt er beim nächsten Aktualisieren der Seite die neue Version des Clients. Infolgedessen ist es für einen Benutzer ziemlich schwierig, Aktualisierungen auf die gleiche Weise wie für native Anwendungen abzulehnen.

Mit einer sehr kurzen Migrationszeit für Kunden konnten wir wichtige Änderungen am Backend vornehmen. Wir geben den Benutzern in der Regel einen Monat Zeit, um auf neuere Clients zu aktualisieren, bevor größere Änderungen vorgenommen werden. Da die Anwendung veraltet funktionieren würde, könnten ältere Clients in freier Wildbahn existieren, wenn der Benutzer die Anwendung längere Zeit nicht geöffnet hätte. Unter iOS sind Servicemitarbeiter
nach ein paar Wochen vertrieben
por lo que este caso no sucede. Para Android, este problema podría mitigarse si no se publica mientras está obsoleto o si el InhaltEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, Plus caduca manualmente después de algunas semanas. En la práctica, nunca encontramos problemas con clientes obsoletos. Cuán estricto quiere ser un equipo dado aquí depende de su caso de uso específico, pero las PWA brindan una flexibilidad significativamente mayor que las aplicaciones nativas.

Erhalten Sie Cookie-Werte in einem Servicemitarbeiter

Manchmal ist es erforderlich, im Kontext eines Servicemitarbeiters auf Cookie-Werte zuzugreifen. In unserem Fall mussten wir auf die Cookie-Werte zugreifen, um ein Token zur Authentifizierung der ursprünglichen API-Anforderungen zu generieren. In einem Service Worker mögen synchrone APIs document.cookies no están disponibles. Siempre puede enviar un mensaje a los clientes activos (con ventana) desde el trabajador del servicio para solicitar los valores de las cookies, aunque es posible que el trabajador del servicio se ejecute en segundo plano sin ningún cliente con ventana disponible, como durante una sincronización en segundo plano. Para solucionar esto, creamos un punto final en nuestro servidor Vorderes EndeEl frontend de una web describe la parte que el visitante puede ver. Incluye todo el contenido que se muestra y que es visible para el público o los usuarios que han iniciado sesión. Diseño del frontend El frontend es muchas veces llamado GUI (Graphical User Interface) porque es la interfaz que los visitantes pueden ver y utilizar. El frontend se usa principalmente para mostrar varios tipos de contenido y Plus que simplemente devolvía el valor de la PlätzchenUna cookie es un registro que es almacenado por un servidor web en el disco duro del usuario. El archivo recibido es una combinación de caracteres formada por números y letras, que asigna una cierta identidad al usuario (cliente). No podrán exceder un tamaño máximo de 4 KB y contendrán, por ejemplo, información sobre la extensión de la visita o sobre lo que el usuario haya pulsado. Cuando el cliente Plus al cliente. El trabajador del servicio realizó una solicitud de red a este punto final y leyó la respuesta para obtener los valores de las cookies.

Mit dem Start der
Cookie-Store-APIDiese Problemumgehung sollte für Browser, die sie unterstützen, nicht mehr erforderlich sein, da sie asynchronen Zugriff auf Browser-Cookies bietet und direkt vom Servicemitarbeiter verwendet werden kann.

Fallstricke für nicht generierte Servicemitarbeiter

Stellen Sie sicher, dass sich das Service Worker-Skript ändert, wenn Sie statische zwischengespeicherte Dateien ändern

Ein gängiges PWA-Muster besteht darin, dass ein Servicemitarbeiter alle statischen Anwendungsdateien während der Installation installiert
Installieren Phase, in der Clients für alle nachfolgenden Besuche direkt auf den Caching-API-Cache zugreifen können. Service Worker werden nur installiert, wenn der Browser feststellt, dass sich das Service Worker-Skript auf irgendeine Weise geändert hat. Daher mussten wir sicherstellen, dass sich die Service Worker-Skriptdatei beim Ändern einer zwischengespeicherten Datei auf irgendeine Weise geändert hat. Wir haben dies manuell getan, indem wir einen Hash der statischen Ressourcendateien in unser Service Worker-Skript eingebettet haben, sodass jede Version eine andere Service Worker-JavaScript-Datei erstellt hat. Service-Worker-Bibliotheken wie
Arbeitsbox Automatisieren Sie diesen Prozess für Sie.

Unit Exam

Die Service Worker-APIs fügen dem globalen Objekt Ereignis-Listener hinzu. Zum Beispiel:

selbst.addEventListener('fetch', (evt) => evt.respondWith(holen('/foo')));

Esto puede ser difícil de probar porque necesita simular el disparador del VeranstaltungConcepto de Evento¿Qué es un Evento?Un Evento es una actividad de carácter social que suele tener cierta proyección a nivel público y, de esta manera, suscita el interés de un determinado sector relacionado con la temática o con la razón por el que se celebra. Es un tipo de acto que suele tener mucha repercusión a nivel empresarial.Podemos hallar distintos tipos de eventos, desde los deportivos hasta los empresariales, pasando Plus, el objeto del evento, esperar el Antworten mit () Rückruf, und warten Sie dann auf das Versprechen, bevor Sie das Ergebnis endgültig bestätigen. Eine einfachere Möglichkeit, dies zu strukturieren, besteht darin, die gesamte Implementierung an eine andere Datei zu delegieren, die einfacher zu testen ist.

importieren fetchHandler desde './fetch_handler.js';
selbst.addEventListener('fetch', (evt) => evt.respondWith(fetchHandler(evt)));

Aufgrund der Schwierigkeiten beim Unit-Test eines Service-Worker-Skripts haben wir das Kern-Service-Worker-Skript so einfach wie möglich gehalten und den größten Teil der Implementierung in andere Module unterteilt. Da es sich bei diesen Dateien nur um Standard-JS-Module handelte, konnten sie mit Standard-Testbibliotheken einfacher auf Einheitentests getestet werden.

Seien Sie gespannt auf Teil 2 und 3

In den Teilen 2 und 3 dieser Reihe werden wir uns mit Medienverwaltung und iOS-spezifischen Themen befassen. Wenn Sie uns mehr über das Erstellen einer PWA bei Google fragen möchten, besuchen Sie unsere Autorenprofile, um herauszufinden, wie Sie mit uns Kontakt aufnehmen können: