Рубрики

Сервисный работник | Как создать пользовательскую офлайн-страницу?

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

Понимание жизненного цикла приложения

  1. Когда пользователь первоначально загружает страницу, Service Worker устанавливается и активируется. Затем пользовательская автономная страница сохраняется в кеше браузера.
  2. Когда пользователь инициирует событие, которое вызывает перезагрузку или переход на другую страницу, но в то же время он больше не подключен к Интернету, работник службы перехватывает сетевой запрос и возвращает автономную кэшированную страницу в качестве ответа.

Начальные файлы

Учтите, что для большей простоты « index.html » и « style.css » находятся в одной папке.

  • index.html

    <! - index.html ->
    <!DOCTYPE html>

    <html lang="en">

      

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" 

              content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <link rel="stylesheet" href="./style.css" />

        <title>Service Worker App</title>

    </head>

      

    <body>

        <! - Кнопка, вызывающая перезагрузку страницы ->

        <div class="wrapper">

            <! - Логотип GfG ->

            <img src=

    "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png" 

                 alt="GfG logo" />

            <button type="button" 

                    onClick="window.location.reload();">

                Refresh Page

            </button>

        </div>

    </body>

      

    </html>

  • stylew.css

    / * style.css * /

      
    * {

        margin: 0;

        padding: 0;

    }

      
    *,
    *::before,
    *::after {

        box-sizing: inherit;

    }

      
    html {

        box-sizing: border-box;

        font-size: 62.5%;

    }

      
    .wrapper {

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        height: 80vh;

    }

      
    button {

        padding: .5rem;

        font-size: 1.5rem;

    }

Выход:

Поведение по умолчанию, когда пользователь теряет связь:

Поведение страницы по умолчанию при потере соединения

Добавление сервисного работника:

Обратите внимание, что для большей простоты «index.html», «style.css», «service-worker.js» и «offline-page.html» находятся в одной папке.

  • index.html

    <! - index.html ->
    <!DOCTYPE html>

    <html lang="en">

      

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport"

              content="width=device-width, initial-scale=1.0" />

        

        <meta http-equiv="X-UA-Compatible" 

              content="ie=edge" />

        

        <link rel="stylesheet" href="./style.css" />

        <title>Service Worker App</title>

    </head>

      

    <body>

        <div class="wrapper">

            <img src=

    "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png"

                 alt="GfG logo" />

            <! - Кнопка, вызывающая перезагрузку страницы ->

            <button type="button" 

                    onClick="window.location.reload();">

                Refresh Page

            </button>

        </div>

        <script>

            // Check if browser supports service workers

            if (navigator.serviceWorker) {

                console.log("Service Worker Supported");

                

                // Start registration process on page load

                window.addEventListener("load", () => {

                    navigator.serviceWorker

                                          

                        // The register function takes as argument

                        // the file path to the worker's file

                        .register("./service_worker.js")

                  

                        // Gives us registration object

                        .then(reg => console.log("Service Worker Registered"))

                        .catch(swErr => console.log(

                          `Service Worker Error: ${swErr}}`));

                });

            }

        </script>

    </body>

      

    </html>

  • style.css

    / * style.css * /

      
    * {

        margin: 0;

        padding: 0;

    }

      
    *,
    *::before,
    *::after {

        box-sizing: inherit;

    }

      
    html {

        box-sizing: border-box;

        font-size: 62.5%;

    }

      
    .wrapper {

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        height: 80vh;

    }

      
    button {

        padding: .5rem;

        font-size: 1.5rem;

    }

  • service_worker.js

    / * service_worker.js * /

      

    const offlineCache = './offline-page.html';

    // Добавление автономной страницы
    // при установке сервисного работника

    self.addEventListener('install', e => {

        // Дождаться окончания обещания

        // Пока не избавимся от сервисного работника

        e.waitUntil(

            caches.open(offlineCache)

            .then(cache => {

                cache.add(offlineCache)

                    // Когда все установлено

                    .then(() => self.skipWaiting())

            })

        );

    })

      
    // Call Activate Event

    self.addEventListener('activate', e => {

        console.log('Service Worker - Activated')

        e.waitUntil(

            caches.keys().then(cacheNames => {

                return Promise.all(

                    cacheNames.map(

                        cache => {

                            if (cache !== offlineCache) {

                                console.log(

                                  'Service Worker: Clearing Old Cache');

                                return caches.delete(cache);

                            }

                        }

                    )

                )

            })

        );

      
    });

      
    // Call Fetch Event

    self.addEventListener('fetch', e => {

        console.log('Service Worker: Fetching');

        e.respondWith(

            // Если нет интернета

            fetch(e.request).catch((error) =>

                caches.match(offlineCache)

            )

        );

    });

  • офлайн-page.html

    <! - offline-page.html ->
    <!DOCTYPE html>

    <html lang="en">

      

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" 

              content="width=device-width, initial-scale=1.0" />

        

        <meta http-equiv="X-UA-Compatible" 

              content="ie=edge" />

      

        <title>Custom Offline Page</title>

        <style>

            .wrapper {

                display: flex;

                flex-direction: column;

                justify-content: center;

                align-items: center;

                height: 80vh;

            }

        </style>

    </head>

      

    <body>

        <div class="wrapper">

            <h1>Ooops, it looks like you lost connection.</h1>

            <h2>Please check your network and try again!</h2>

            <h3>Sincerely, GeeksForGeeks team!</h3>

        </div>

    </body>

      

    </html>

Потеря поведения перезагрузки соединения после добавления Service Worker:

Поведение страницы с примером кода сервисного работника

Как воссоздать потерянную связь

Почти каждый браузер поставляется со встроенными инструментами разработчика. В большинстве из них ярлык для открытия инструментов — F12 или щелчок правой кнопкой мыши на веб-странице и выбор элемента проверки. Затем вы можете зайти в сеть и изменить поле «Онлайн» на «Автономно» и обновить страницу.

Инструменты разработчика Google Chrome

Рекомендуемые посты:

Сервисный работник | Как создать пользовательскую офлайн-страницу?

0.00 (0%) 0 votes