PWA: Deje que el usuario descargue contenido para uso fuera de línea -- download campo con progressive-web-apps campo con workbox campo con cacheapi camp Relacionados El problema

PWA: Let user download content for offline use


1
vote

problema

Español

Estoy trabajando en una aplicación para los visitantes de los museos que muestran información multi de medios sobre los objetos de algunas exposiciones. Un ejemplo podría ser la página de información para la Mona Lisa de la exposición da Vinci.

La aplicación se realiza como una PWA para habilitar el uso fuera de línea. Actualmente estoy usando la caja de trabajo para precargar el shell de la aplicación. Obtener solicitudes de recursos de descanso también se almacenan en caché. Esto le permite al usuario volver a cargar la página Mona Lisa después de pasar de línea, pero la aplicación falla en las páginas que no se han cargado antes.

Una solución sería preca de todo el contenido junto con la carcasa de la aplicación. Pero entonces, también se descargaría las exposiciones que no son interesantes para el usuario. En su lugar, el usuario debe poder descargar los "paquetes de exposición" de su elección.

Ahora, me pregunto cómo implementar mi botón "Exposición de descarga":

  • Aproveche las solicitudes de ruta de la caja de trabajo [1] para el almacenamiento en caché y obtener todos los recursos en el fondo
  • Cache Las solicitudes obtienen manualmente usando el caché API
  • Presente una base de datos local que refleja la base de datos en línea. Llénalo con las respectivas respuestas para obtener cuando haga clic en "Descargar"

¿Recomendaría la caja de trabajo, la API de caché o el enfoque de DB? ¿O hay una solución estándar que haya pasado por alto?

[1] https://developers.google.com/ Web / Herramientas / Caja de trabajo / Guías / Solicitudes de ruta

Original en ingles

I am working on an app for museum visitors that shows multi media information about the objects of some expositions. An example could be the info page for the Mona Lisa of the Da Vinci exposition.

The app is realized as a PWA to enable offline usage. Currently I am using workbox to precache the app shell. GET requests for REST resources are cached as well. This allows the user to reload the Mona Lisa page after going offline, but the app fails on pages that haven't been loaded before.

A solution would be precaching all the content together with the app shell. But then, expositions that are not interesting to the user would be downloaded as well. Instead, the user should be able to download the "exposition packages" of his choice.

Now, I wonder how to implement my "Download Exposition" button:

  • Leverage workbox's route requests [1] for caching and GET all resources in the background
  • Cache the GET requests manually using the Cache API
  • Introduce a local database that mirrors the online database. Fill it with the respective GET responses when clicking "Download"

Would you recommend the workbox, the Cache API or the DB approach? Or is there a standard solution I'm overlooking?

[1] https://developers.google.com/web/tools/workbox/guides/route-requests

           

Lista de respuestas


Relacionados problema

1  Número de almacenamiento de caché del navegador  ( Browser cache storage issue ) 
Estoy almacenando 40,000 imágenes más en el almacenamiento de caché utilizando cache.put (). Puedo ver todas las imágenes en el almacenamiento de caché almace...

1  Guarde las imágenes vinculadas en una aplicación dentro de la memoria caché utilizando el trabajador de servicio o en la base de datos utilizando NEDB  ( Save linked images in an app inside the cache using service worker or in databas ) 
Quiero guardar las imágenes que proporcionan una respuesta JSON de un servicio API. En este momento, el usuario tiene la capacidad de eliminarlos y guardarlos...

8  Comodines en ServiceWorker / Cache API  ( Wildcards in serviceworker cache api ) 
Estoy usando ServiceWorker y en modo Dev funciona perfectamente, mi problema es que en el modo de producción se genera mi nombre de paquete usando Hash, por e...

0  Trabajador de servicio que busca el fracaso de los activos en caché  ( Service worker fetching cached assets failure ) 
Hola a cada uno nuevo en el trabajador de servicio y estoy enfrentando este error The FetchEvent for "<My Local URL>" resulted in a network error response:...

1  @ Anotación en @cacheable, utilizando el mismo valor en un método diferente  ( Cacheable annotation using same value in a differents methods ) 
Estoy tratando de usar la anotación de primavera @cacheable. @Cacheable(value="users") public List<User> findAll() { System.out.println("Loo...

0  JS Cache API: Imágenes en caché servidas por Google Cloud Bucket no se cargue  ( Js cache api cached images served by google cloud bucket dont load ) 
Estoy escribiendo una aplicación web, donde el usuario puede descargar imágenes para un uso más tarde fuera de línea usando la API de caché. // when the us...

4  Capacidad fuera de línea PWA en los datos que cambian con frecuencia  ( Pwa offline capability on data that frecuently changes ) 
¿Las aplicaciones web progresivas son una buena capacidad de conexión en las aplicaciones que muestran datos que cambian con frecuencia como un saldo de la cu...

3  Fuente de elemento de audio HTML de caché  ( Html audio element source from cache ) 
Estoy construyendo una aplicación web para reproducir algunos archivos de audio sin conexión. He leído y probado la caché parte del trabajador de servicio A...

1  ¿Cómo puedo hacer que el trabajador de servicio caché la página siguiente?  ( How can i make the service worker cache the next page ) 
Estoy construyendo un cuestionario. Una página está mostrando una Pregunta , y cuando el usuario responde, otra página está mostrando la respuesta . Cuando ...

1  ¿Cómo puedo devolver el contenido de mi archivo fuera de línea en una captura de búsqueda?  ( How can i return content of my offline file in a fetch catch ) 
Tengo una solicitud de spa y tratando de implementar el soporte para la PWA utilizando un trabajador de servicio. Cache un archivo offline.html que quiero m...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos