DEV Community: Ramzan

Launching a website offline without the Internet using Service Worker (English version)

Ramzan — Wed, 17 Apr 2024 16:28:49 +0000

Nowadays, when Internet access has become an integral part of everyday life, the ability to work offline without an Internet connection is becoming increasingly important. Service Worker is a technology that allows a site to save resources and work even when there is no Internet connection.

What is a Service Worker?
Service Worker is a script that runs in the background in the browser and manages network requests and caching. It acts as a proxy server between the application and the network, providing control over how requests are processed and resources are cached.

Use cases

Offline mode: Service Worker can cache resources such as HTML, CSS, JavaScript and images, allowing the site to function offline.
Improved Cache: When connected to the Internet, Service Worker can cache resources to improve download speeds and reduce server load.
Notifications: Service Worker can be used to send notifications to the user even when the site is not active in the browser.

Getting started
Registering a Service Worker: Create a JavaScript file for your Service Worker and register it in the main script of your site.

// Checking if the browser supports Service Worker
if ('serviceWorker' in navigator) {
    // Registering the Service Worker file '/service-worker.js'
    navigator.serviceWorker.register('/service-worker.js')
    .then((registration) => {
        // If the registration was successful, we display a message about successful registration
        console.log('Service Worker is registered:', registration);
    })
    .catch((error) => {
        // If an error occurred during registration, we display an error message
        console.error('Error registering Service Worker:', error);
    });
}

Service Worker Implementation: In your Service Worker file, define which resources need to be cached and how to process requests.

// Installing Service Worker
self.addEventListener('install', (event) => {
    // Waiting for the installation process to complete
    event.waitUntil(
        // Opening a new cache named 'my-cache'
        caches.open('my-cache')
        .then((cache) => {
            // Adding resources to the cache that need to be cached
            return cache.addAll([
                '/index.html',    // Main page
                '/styles.css',    // CSS styles file
                '/script.js',     // JavaScript file
                '/offline.html'   // Page for offline mode
            ]);
        })
    );
});

// Handling requests
self.addEventListener('fetch', (event) => {
    event.respondWith(
        // Looking for the corresponding resource in the cache
        caches.match(event.request)
        .then((response) => {
            // If the resource is found in the cache, return it
            // If not, make a network request to get the resource
            return response || fetch(event.request);
        })
        .catch(() => {
            // If an error occurs while searching in the cache or making a network request,
            // return a special page for offline mode
            return caches.match('/offline.html');
        })
    );
});

Cache Management: You can use Service Worker methods to manage the cache, add, delete, or update resources.

Example 1:
Offline page: Create an HTML page offline.html which will be displayed when there is no Internet connection, and add it to the cache.

<!-- offline.html -->
<html>
<head>
    <title>Offline</title>
</head>
<body>
    <h1>You are offline</h1>
</body>
</html>

Example 2:
Notifications: Use Service Worker to send notifications to the user.

// In the Service Worker file
self.addEventListener('push', (event) => {
    // Setting the notification title
    const title = 'Notification';

    // Forming notification parameters
    const options = {
        body: event.data.text(), // Notification text obtained from the event
        icon: '/icon.png',       // Notification icon
        badge: '/badge.png'      // Notification badge (usually a small icon)
    };

    // Displaying the notification
    // Waiting until the notification is shown
    event.waitUntil(
        // Calling the showNotification() method to register the notification
        self.registration.showNotification(title, options)
    );
});

Conclusion
This article is a basic overview of the Service Worker technology, designed to provide an understanding of its capabilities. Using Service Broker, you can create a website that, in principle, can fully function offline, providing users with access to content even in the absence of the Internet.

Running a website offline using Service Worker is just the beginning of the path to creating a sustainable and responsive web application. Using this technology, you can implement various functions such as content caching, query processing, cache management, and sending notifications. By exploring and experimenting more deeply with Service Worker, you will be able to create more complex and powerful web applications, providing users with a better experience using your site.

Превращение вашего сайта в PWA: Шаг за шагом

Ramzan — Tue, 16 Apr 2024 18:53:56 +0000

Прогрессивные веб-приложения (Progressive Web Apps, PWA) представляют собой веб-сайты или веб-приложения, обладающие возможностями, которые ранее были доступны только в нативных мобильных приложениях. Создание PWA может повысить вовлеченность пользователей, улучшить производительность и даже обеспечить возможность работы в автономном режиме. В этой статье мы рассмотрим, как превратить ваш сайт в PWA, используя технологии, такие как Service Worker, Manifest и LocalStorage.

1. Создание файла манифеста (Manifest)
Файл манифеста (manifest.json) содержит метаданные о вашем приложении, такие как название, описание, иконки и цвет темы. Этот файл используется браузером для определения внешнего вида и поведения вашего PWA при установке на устройство пользователя.

Пример структуры каталогов:

root
│   index.html
│   manifest.json
│   sw.js
│   styles
│   └── main.css
│   scripts
│   └── main.js
│   images
│       └── logo.png

Пример файла манифеста:

{
  "name": "Мое PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

В этом примере:

name - полное название вашего приложения.
short_name - краткое название, используемое на рабочем столе или экране устройства.
start_url - URL-адрес, который браузер открывает при запуске PWA.
display - режим отображения, например, standalone для того, чтобы приложение отображалось в полноэкранном режиме.
background_color - цвет фона приложения.
theme_color - основной цвет темы приложения.
icons - массив иконок разных размеров и форматов для различных устройств.

2. Регистрация Service Worker
Service Worker - это скрипт, который работает в фоне вашего приложения и управляет событиями сети, такими как запросы на сервер и кэширование ресурсов. Регистрация Service Worker происходит на странице вашего сайта и сообщает браузеру о наличии Service Worker'а для вашего приложения.

Файл Service Worker (sw.js) также должен быть размещен в корневой директории вашего проекта. Затем вы должны зарегистрировать его на вашей веб-странице (например, в index.html).

Пример регистрации Service Worker:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My PWA</title>
    <link rel="manifest" href="/manifest.json">
</head>
<body>
    <!-- Ваш контент -->
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .then(registration => {
                        console.log('Service Worker registered:', registration);
                    })
                    .catch(error => {
                        console.error('Service Worker registration failed:', error);
                    });
            });
        }
    </script>
</body>
</html>

В этом примере:
Мы проверяем, поддерживает ли браузер Service Worker.
Если поддерживает, мы регистрируем файл Service Worker (в данном случае sw.js), который будет находиться в корне вашего сайта.
После успешной регистрации мы выводим сообщение об успешной регистрации в консоль.

3. Кэширование ресурсов
Service Worker позволяет кэшировать ресурсы вашего сайта для работы в автономном режиме. Для этого в файле Service Worker (sw.js) вы должны определить, какие ресурсы кэшировать и какой кэш использовать.

const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js',
  '/images/logo.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

В этом примере:
CACHE_NAME - имя вашего кэша, которое вы можете изменить при обновлении версии вашего PWA.
urlsToCache - массив URL-адресов ресурсов, которые вы хотите кэшировать.
В событии install Service Worker открывает кэш с заданным именем и добавляет в него все ресурсы из массива urlsToCache.

4. Использование LocalStorage
LocalStorage позволяет сохранять данные на стороне клиента между сеансами работы вашего приложения. Вы можете использовать LocalStorage для сохранения настроек пользователя, состояния приложения и других данных.

// Сохранение данных в LocalStorage
localStorage.setItem('userPreferences', JSON.stringify({ theme: 'dark', language: 'en' }));

// Получение данных из LocalStorage
const userPreferences = JSON.parse(localStorage.getItem('userPreferences'));
console.log(userPreferences.theme); // Вывод: 'dark'

В этом примере:
Мы сохраняем объект пользовательских предпочтений в LocalStorage, используя метод setItem.
Затем мы извлекаем эти данные из LocalStorage с помощью метода getItem и парсим их из JSON обратно в объект.

5. Добавление функциональности PWA
Включите функции PWA, такие как установка на домашний экран и уведомления. Например, запрос разрешения на отправку уведомлений выглядит следующим образом:

// Запрос разрешения на отправку уведомлений
Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    new Notification('Добро пожаловать в наше приложение!');
  }
});

В этом примере:
Мы используем Notification.requestPermission() для запроса разрешения на отправку уведомлений пользователю.
Если разрешение было предоставлено, мы создаем новое уведомление с помощью new Notification().

Заключение
Эта обзорная базовая статья предоставила введение в ключевые технологии, используемые для создания прогрессивных веб-приложений (PWA) - Service Worker, Manifest и LocalStorage.

Эти примеры служат базовым уровнем для начинающих, предоставляя понимание того, как использовать эти технологии для создания PWA.
Использование этих технологий позволяет создавать веб-приложения, которые обладают преимуществами нативных приложений, такими как возможность работы в автономном режиме, быстродействие и возможность установки на домашний экран устройства.

Тем не менее, не забывайте, что эти примеры лишь базовый ввод для начинающих. Существует множество дополнительных функций и методов оптимизации, которые могут быть реализованы для создания более продвинутых и эффективных PWA.

Запуск сайта в автономном режиме без интернета с помощью Service Worker

Ramzan — Fri, 12 Apr 2024 18:04:37 +0000

В наше время, когда доступ в интернет стал неотъемлемой частью повседневной жизни, возможность работы в автономном режиме без подключения к сети Интернет становится всё более важной. Service Worker - это технология, которая позволяет сайту сохранять ресурсы и работать даже при отсутствии подключения к интернету.

Что такое Service Worker?
Service Worker - это скрипт, который работает в фоновом режиме в браузере и управляет сетевыми запросами и кэшированием. Он действует как прокси-сервер между приложением и сетью, обеспечивая контроль над тем, как запросы обрабатываются и ресурсы кэшируются.

Варианты использования

Оффлайн режим: Service Worker может кэшировать ресурсы, такие как HTML, CSS, JavaScript и изображения, позволяя сайту функционировать в автономном режиме.
Улучшенный кэш: При наличии подключения к интернету Service Worker может кэшировать ресурсы, чтобы улучшить скорость загрузки и уменьшить нагрузку на сервер.
Уведомления: Service Worker может использоваться для отправки уведомлений пользователю, даже когда сайт не активен в браузере.

Начало работы
Регистрация Service Worker: Создайте файл JavaScript для вашего Service Worker и зарегистрируйте его в главном скрипте вашего сайта.

// Проверяем поддерживает ли браузер Service Worker
if ('serviceWorker' in navigator) {
    // Регистрируем файл Service Worker '/service-worker.js'
    navigator.serviceWorker.register('/service-worker.js')
    .then((registration) => {
        // Если регистрация прошла успешно, выводим сообщение об успешной регистрации
        console.log('Service Worker зарегистрирован:', registration);
    })
    .catch((error) => {
        // Если произошла ошибка при регистрации, выводим сообщение об ошибке
        console.error('Ошибка при регистрации Service Worker:', error);
    });
}

Реализация Service Worker: В вашем файле Service Worker определите, какие ресурсы нужно кэшировать и как обрабатывать запросы.

// Установка Service Worker
self.addEventListener('install', (event) => {
    // Ждем, пока процесс установки не завершится
    event.waitUntil(
        // Открываем новый кэш с именем 'my-cache'
        caches.open('my-cache')
        .then((cache) => {
            // Добавляем в кэш ресурсы, которые нужно закэшировать
            return cache.addAll([
                '/index.html',    // Главная страница
                '/styles.css',    // Файл стилей CSS
                '/script.js',     // JavaScript файл
                '/offline.html'   // Страница для оффлайн режима
            ]);
        })
    );
});

// Обработка запросов
self.addEventListener('fetch', (event) => {
    event.respondWith(
        // Ищем в кэше соответствующий запросу ресурс
        caches.match(event.request)
        .then((response) => {
            // Если ресурс найден в кэше, возвращаем его
            // Если нет, делаем сетевой запрос для получения ресурса
            return response || fetch(event.request);
        })
        .catch(() => {
            // Если произошла ошибка при поиске в кэше или сетевом запросе,
            // возвращаем специальную страницу для оффлайн режима
            return caches.match('/offline.html');
        })
    );
});

Управление кэшем: Вы можете использовать методы Service Worker для управления кэшем, добавления, удаления или обновления ресурсов.

Пример 1:
Оффлайн страница: Создайте HTML-страницу offline.html, которая будет отображаться при отсутствии интернет-соединения, и добавьте её в кэш.

<!-- offline.html -->
<html>
<head>
    <title>Оффлайн</title>
</head>
<body>
    <h1>Вы не подключены к интернету</h1>
</body>
</html>

Пример 2:
Уведомления: Используйте Service Worker для отправки уведомлений пользователю.

// В файле Service Worker
self.addEventListener('push', (event) => {
    // Устанавливаем заголовок уведомления
    const title = 'Уведомление';

    // Формируем параметры уведомления
    const options = {
        body: event.data.text(), // Текст уведомления, полученный из события
        icon: '/icon.png',       // Иконка уведомления
        badge: '/badge.png'      // Значок уведомления (обычно маленькая иконка)
    };

    // Отображаем уведомление
    // Ожидаем, пока уведомление не будет показано
    event.waitUntil(
        // Вызываем метод showNotification() для регистрации уведомления
        self.registration.showNotification(title, options)
    );
});

Заключение
Эта статья представляет собой базовый обзор технологии Service Worker, предназначенный для дачи понимания её возможностей. С помощью Service Worker можно создать сайт, который в принципе может полностью функционировать в автономном режиме, обеспечивая пользователям доступ к контенту даже при отсутствии интернета.

Запуск сайта в автономном режиме с использованием Service Worker - лишь начало пути к созданию устойчивого и отзывчивого веб-приложения. С помощью этой технологии можно реализовать различные функции, такие как кэширование контента, обработка запросов, управление кэшем и отправка уведомлений. Путём более глубокого изучения и экспериментов с Service Worker вы сможете создавать более сложные и мощные веб-приложения, обеспечивая пользователям лучший опыт пользования вашим сайтом.