Mamá, hice Habr

Tengo 17 años y llevo varios meses haciendo un clon de la aplicación móvil Habr, llamándola apropiadamente, a la moda, con estilo y un puntito pretencioso al final - habra. Resultó implementar varias características que aún no están en la aplicación oficial del mercado de juegos o en el sitio mismo.

El enlace a la aplicación web para los más impacientes es habra.js.org . Todo lo demás, por favor, debajo del gato.

Cómo todo empezó

¿Recuerdas que existía una aplicación para Android para leer Habrahabr? Parece oficial, de los propios creadores del sitio, pero la última actualización fue en 2019. Todo estaba bien en él, comenzando con un tema oscuro y terminando con un modo fuera de línea, en el que se podían leer artículos sin Internet en el camino a casa. Pero el mundo no es tan perfecto como nos gustaría, y esta última actualización de ese fatídico año mató, no, mató a una aplicación tan genial: empezaron a aparecer y desaparecer imágenes subcargadas, haciendo que el texto del artículo se moviera. Y el diseño, según los estándares de 2019, ya no era un pastel.

¿Qué hacer cuando no hay actualizaciones para su aplicación favorita, pero desea nuevos chips? Así es, haz un clon de esta aplicación conveintiuna, características interesantes y un tema oscuro.

Papas fritas

Primero, y lo más importante, temas.

— , (), OLED . , , ?

475ms , ( — 1 207ms):

- ? , , . i7-7700K:

DevTools, , , 16 , i7! . :

, 16 user input.

PWA PWA, service-worker, . API .

const whitelist = ['https://m.habr']
const CACHE_LIFETIME = 3600 * 1000

self.addEventListener('fetch', (event) => {
  return event.respondWith(
    (async () => {
      const isOffline = !navigator.onLine

      // Do not cache requests that are not in whitelist
      if (!whitelist.some((e) => event.request.url.startsWith(e)))
        return fetch(event.request)

      // Try to get the response from a cache
      const cachedResponse = await caches.match(event.request)

      // Return it if we found one and we don't have connection
      if (cachedResponse && isOffline) return cachedResponse

      // If we didn't find a match in the cache, use the network
      const response = await fetch(event.request)

      if (response.status < 400) {
        try {
          const responseClone = response.clone()
          const cacheStore = await caches.open('v1')
          cacheStore
            .put(event.request, responseClone)
            .catch((e) =>
              console.warn('Cannot put a request to the cache:', e.message)
            )
        } catch (e) {
          console.warn('Cannot put a request to the cache:', e.message)
        }
      }

      return response
    })()
  )
})

, ! , - . , .

, , ( , )

… issues, . 70% — , , , .. ( , ), . , , , .

. , -. Material-UI , "-".

Github Pages , , 404. , service worker .

. - . , , . -, , . - , csrf-token , git/issues/22. , API . .

. . .

Podemos decir que me he afirmado en el front-end con este proyecto. Por tanto, se los doy, señores lectores, para que lo destrocen y critiquen. Como niña con un sentido de autoestima poco desarrollado, necesito que se jacte en las salas de chat por las noches (o no) . ¡Gracias por adelantado!

Enlaces

Github: jarvis394 / habra Sitio en

sí: habra.js.org

UPD: Sería genial si alguien de Habr insinuara qué hacer con autorización. Mucha gente necesita: P