Bu, saya membuat Habr

Saya berumur 17 tahun dan saya telah membuat tiruan dari aplikasi seluler Habr selama beberapa bulan sekarang, menyebutnya dengan tepat, modis, dengan gaya dan titik yang megah di akhir - habra. Ternyata menerapkan beberapa fitur yang belum tersedia di aplikasi resmi dari pasar bermain, atau di situs itu sendiri.

Tautan ke aplikasi web yang paling tidak sabar adalah habra.js.org . Sisanya - tolong, di bawah kucing.

Bagaimana semua ini dimulai

Ingatkah ada aplikasi android untuk membaca Habrahabr? Tampaknya resmi, dari pembuat situs itu sendiri, tetapi pembaruan terakhir adalah pada 2019. Semuanya baik-baik saja di dalamnya - dimulai dengan tema gelap dan diakhiri dengan mode offline, di mana Anda dapat membaca artikel tanpa internet dalam perjalanan pulang. Tetapi dunia tidak seideal yang kita inginkan, dan pembaruan terakhir pada tahun yang menentukan ini membunuh, tidak, itu mematikan aplikasi yang sangat keren: gambar yang kekurangan muatan mulai muncul dan menghilang, menyebabkan teks artikel berkedut. Dan desainnya, menurut standar 2019, tidak lagi seperti kue.

Apa yang harus dilakukan jika tidak ada pembaruan pada aplikasi favorit Anda, tetapi Anda menginginkan chip baru? Benar, buat klon aplikasi ini denganselikuran, fitur keren, dan tema gelap.

Keripik

Pertama, dan yang terpenting, tema.

— , (), 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 . .

. . .

Kami dapat mengatakan bahwa saya telah menegaskan diri saya di front-end dengan proyek ini. Oleh karena itu, saya berikan kepada Anda sekalian yang membaca, untuk dihancurkan dan dikritik. Sebagai seorang anak dengan rasa harga diri yang belum berkembang, saya ingin dia membual di ruang obrolan di malam hari (atau tidak) . Terima kasih sebelumnya!

Tautan

Github: jarvis394 / habra Situs

itu sendiri: habra.js.org

UPD: Akan sangat keren jika seseorang dari Habr mengisyaratkan apa yang harus dilakukan dengan otorisasi. Banyak orang membutuhkan: P