Плагин Vue PWA | Кодементор

Вы когда-нибудь задумывались, как создать PWA с помощью Vue? На самом деле это довольно легко 😃. В этом сообщении блога я покажу вам, как вы можете предварительно кэшировать свои файлы и как вы можете применять стратегии кэширования различий.

Инициализировать плагин PWA

Для начала вам понадобится как минимум версия 3 Vue CLI. После этого вы должны запустить эту команду:

vue add @vue/pwa

После того, как вы запустите его, вы увидите пару файлов, которых раньше не было. Первый — это registerServiceWorker.js. Этот файл зарегистрирует вашего сервисного работника в браузере. Если вы посмотрите на код, вы увидите, что вам не следует использовать сервис-воркеров для локальной разработки. Причина этого в том, что кэширование файлов при локальной разработке может привести к неожиданному поведению. Особенно, если вы предварительно кэшируете некоторые из ваших файлов разработки.

Кроме того, вы не должны пытаться запускать его локально, т.е. менять условие if в registerServiceWorker.js на «разработка». Service Worker не предназначен для обработки локальной среды — изменение вашего базового URL-адреса в view.config.js в любом случае нарушит загрузку сервисного работника для локальной разработки.

Поскольку остальные файлы пока не имеют значения, мы займемся настройкой прекешей.

Настройка прекэшей

Как только вы создадите свой проект через сборка нпм вы увидите файл service-worker.js в вашем каталоге dist. Содержание должно быть:

...

importScripts("

importScripts(
  "/precache-manifest.415f21068aad841ef1d7c6250910c3ca.js"
);

workbox.core.setCacheNameDetails({prefix: "todoapp"});

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 * See 
 */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

Как вы, возможно, уже заметили, сервис-воркер использует файл с именем:
предварительный кеш-манифест.415f21068aad841ef1d7c6250910c3ca.js

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

npm install http-server -g
http-server dist -p 8081 -a localhost

Если вы теперь откроете вкладку сети в своем браузере, вы увидите, что файлы js и css будут загружены работником службы.

1*yVlSjig7h8i6EhfDczrCNQ.png

Но, возможно, вы не хотите кэшировать файлы и только 1. Вы можете сделать это, настроив view.config.js (расположен в корне вашего проекта). Если добавить строки

pwa: {
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
        swSrc: 'public/service-worker.js',
    }
}

вы можете создать собственный файл service-worker.js в вашем каталоге src. «InjectManifest» гарантирует, что precache-manifest.js также будет импортирован в ваш пользовательский файл. Но пока мы только то, что загрузить 1 файл. Добавьте это в свой src/service-worker.js

workbox.precaching.precacheAndRoute([{
    "revision": "17ecfaee522eaf5b3ad9c9aa1b2973cc",
    "url": "/manifest.json"
}]);

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

Но поскольку самые важные файлы уже предварительно кэшированы, может быть полезнее исключить некоторые файлы. Для этого мы сначала настроим наш service-worker.js так, чтобы precache-manifest.js будет загружен снова. Для этого добавьте:

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

на ваш сервис-воркер.js. Теперь откройте свой vue.config.js и исключите нужные файлы:

...
workboxOptions: {
    swSrc: 'public/service-worker.js',
    exclude: /\.js$/
}
...

После этого вы можете открыть свой precache-manifest.js в каталоге dist, и вы увидите, что файлов js больше нет. Дополнительные параметры, такие как включить и т. д., см.: параметры рабочего поля.

Если вы хотите увидеть, какие файлы были фактически кэшированы, вы можете найти их в indexeddb (вкладка приложения в инструментах разработки браузера) или в хранилище кеша.

Настройка кэширования API

Чтобы создать запрос, я также буду использовать аксиомы — но вы, конечно, можете использовать любой клиент, какой захотите. Мой вызов теперь выглядит так:

axios.get("
    .then(e => console.log(e))
    .catch(e => console.log(e));

Если у вас все еще есть запись исключения для вашего рабочего ящика, было бы неплохо удалить ее на данный момент. Вы также можете использовать гостевое окно (пользователя) каждый раз, когда вы что-то меняете с помощью service-worker.js.

Одним из самых простых способов поддержки кэширования является использование кэширования стратегии из рабочего ящика(если вы хотите узнать разницу между стратегиями, напишите мне 😃). В нашем примере мы будем использовать подход «сначала кеш» — это означает, что сначала будет оцениваться кеш, и только если кеш пуст, сеть будет использоваться. Для этого мы добавим эти строки в наш service-worker.js.

workbox.routing.registerRoute(' workbox.strategies.cacheFirst({
    cacheName: 'placeholder-cache',
}));

Здесь происходит то, что мы говорим, что для данного маршрута мы хотим использовать стратегию первого кеша с кешем-заполнителем-кэшем. Если вы сейчас откроете браузер и обновите его 2 раза, вы увидите такой ответ:
изображение.png

Поскольку Workbox предоставляет действительно хорошие сообщения, вы можете шаг за шагом видеть, что происходит, и если вы хотите увидеть используемый ответ, вы можете найти его на вкладке приложения инструментов разработчика вашего браузера. Там вы найдете тайник с заданным именем.

Но вы можете добавить свою собственную логику, если сеть выйдет из строя. Для этого вы можете оценить обещание стратегии следующим образом:

const placeholderHandler = workbox.strategies.cacheFirst({
    cacheName: 'placeholder-cache',
});

workbox.routing.registerRoute(' args => {
    return placeholderHandler.handle(args).then(response => {
        console.log("Online: Fetch was called successful");
        return response;
    }).catch(err => {
        console.log("no cache data");
    });
});

Здесь у вас есть возможность изменить значения ответа. Это будет все на данный момент.

Если у вас есть какие-либо вопросы, не стесняйтесь написать комментарий или написать мне по электронной почте 😃

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *