أمي ، لقد صنعت الهبر

عمري 17 عامًا ولعدة أشهر حتى الآن أقوم باستنساخ تطبيق Habr للهاتف المحمول ، واصفًا إياه بشكل مناسب وعصري وأنيق ونقطة طنانة في النهاية - habra. اتضح أن هناك العديد من الميزات التي لم تتوفر بعد في التطبيق الرسمي من سوق اللعب ، أو على الموقع نفسه.

الرابط إلى تطبيق الويب لأكثر الأشخاص نفاد صبرًا هو habra.js.org . كل ما تبقى - من فضلك ، تحت القط.

كيف بدأ كل شيء

تذكر أنه كان هناك مثل هذا التطبيق لالروبوت لقراءة هابراهبر؟ يبدو رسميًا من مبتكري الموقع أنفسهم ، لكن التحديث الأخير كان في عام 2019. كان كل شيء على ما يرام فيه - بدءًا من المظهر الداكن وانتهاءًا بوضع غير متصل بالشبكة ، حيث يمكنك قراءة المقالات بدون الإنترنت في طريق العودة إلى المنزل. لكن العالم ليس كاملاً كما نرغب ، وهذا التحديث الأخير لتلك السنة المشؤومة قتل ، لا ، لقد قتل مثل هذا التطبيق الرائع: بدأت الصور المحملة بالظهور وتختفي ، مما تسبب في ارتعاش نص المقال. والتصميم ، وفقًا لمعايير عام 2019 ، لم يعد مجرد كعكة.

ماذا تفعل في حالة عدم وجود تحديثات لتطبيقك المفضل ، ولكنك تريد شرائح جديدة؟ هذا صحيح ، اصنع نسخة من هذا التطبيق باستخداملعبة ورقوميزات رائعة وموضوع داكن.

رقائق

أولا ، والأهم من ذلك ، المواضيع.

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

. . .

يمكننا القول إنني أكدت نفسي في المقدمة مع هذا المشروع. لذلك أعطيها لكم ، أيها السادة ، لتتمزق وتنتقد. كطفلة لديها شعور غير متطور باحترام الذات ، أحتاجها للتفاخر في غرف الدردشة في المساء (أو لا) . شكرا مقدما!

الروابط

جيثب: jarvis394 / habra الموقع

نفسه: habra.js.org

محدث: سيكون أمرًا رائعًا أن ألمح شخص من هبر إلى ما يجب فعله بالإذن. كثير من الناس يحتاجون: