Практический процесс Vue+PWA

Vue.js
Практический процесс Vue+PWA

предисловие

В прошлом году, как передовой собаке, дорога оптимизации производительности была потеряна навсегда. Vue, nginx, webpack, redis, места, которые можно оптимизировать, никогда не жалели, только на последнюю секунду комфорта! (хитро улыбаясь).

Раньше я уделял все внимание PWA, и я надеюсь улучшить производительность текущего проекта с помощью PWA.Пользуясь недавним временем, я сделаю преобразование в структуре интерфейса, используемой компанией!

Этот ремонт в основном делится на две части:

  • Проекты модернизации, созданные на основе vue cli3
  • Преобразование проекта на основе упаковки webpack3.0

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

Проекты модернизации, созданные на основе vue cli3

Когда новый проект создается непосредственно в vue, выберите шаблон PWA, чтобы включить PWA.Здесь мы в основном расскажем, как включить PWA в существующем проекте.

1. Установите плагин PWA

vue add pwa

Следует отметить, что vue cli3 основан на workbox для реализации PWA.

2. Структура каталогов

После установки плагина структура каталогов выглядит следующим образом:

  • registerServiceWorker.js: отвечает за регистрацию сервисной работы.
  • service-worker.js: файл конфигурации работы пользовательского сервиса.

3. Измените registerServiceWorker.js для обработки совместимости

В настоящее время некоторые браузеры не поддерживают работу сервисов, нам нужно убедиться, что они все еще могут нормально работать. пройти через'serviceWorker' in window.navigatorЧтобы определить, поддерживает ли браузер sw, конкретный код выглядит следующим образом:

/* eslint-disable no-console */

import {register} from 'register-service-worker';

if ('serviceWorker' in window.navigator && process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log(
        'App is being served from cache by a service worker.\n' +
        'For more details, visit https://goo.gl/AFskqB'
      );
    },
    registered() {
      console.log('Service worker has been registered.');
    },
    cached() {
      console.log('Content has been cached for offline use.');
    },
    updatefound() {
      console.log('New content is downloading.');
    },
    updated() {
      console.log('New content is available; please refresh.');
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.');
    },
    error(error) {
      console.error('Error during service worker registration:', error);
    }
  });
}

4. Напишите service-work.js

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

  • Установите префикс и суффикс кеша, обычно мы используем имя проекта в качестве префикса и номер версии в качестве суффикса.
workbox.core.setCacheNameDetails({
  prefix: 'easy-front-vue-cli3',
  suffix: 'v1.0.0'
});
  • Настройте политику активации обновлений для сервисной работы
workbox.core.skipWaiting(); // 强制等待中的 Service Worker 被激活
workbox.core.clientsClaim(); // Service Worker 被激活后使其立即获得页面控制权
  • установить предварительную загрузку
workbox.precaching.precacheAndRoute(self.__precacheManifest || []);
  • Установить стратегию кэширования ресурсов Workbox в основном предоставляет следующие стратегии кэширования:

Stale-While-Revalidate: отвечайте на запросы как можно скорее, используя кэшированное содержимое (если оно доступно) или сетевые запросы, если оно не кэшировано. Затем сеть запрашивает данные для обновления кеша.

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

Network First: сначала получайте последние данные из сети. В случае успеха он поместит данные в кеш. Если сеть не может вернуть ответ, будут использоваться кэшированные данные.

Только сеть: используйте сеть только для запроса данных

Только кеш: использовать только кешированные данные.

Конкретную стратегию для использования по-прежнему необходимо установить в соответствии с реальными бизнес-сценариями и потребностями.Основные стратегии, которые я использую, следующие:

// 缓存web的css资源
workbox.routing.registerRoute(
  // Cache CSS files
  /.*\.css/,
  // 使用缓存，但尽快在后台更新
  workbox.strategies.staleWhileRevalidate({
    // 使用自定义缓存名称
    cacheName: 'css-cache'
  })
);

// 缓存web的js资源
workbox.routing.registerRoute(
  // 缓存JS文件
  /.*\.js/,
  // 使用缓存，但尽快在后台更新
  workbox.strategies.staleWhileRevalidate({
    // 使用自定义缓存名称
    cacheName: 'js-cache'
  })
);

// 缓存web的图片资源
workbox.routing.registerRoute(
  /\.(?:png|gif|jpg|jpeg|svg)$/,
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'images',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60 // 设置缓存有效期为30天
      })
    ]
  })
);

// 我们很多资源在其他域名上，比如cdn、oss等，这里做单独处理，需要支持跨域
workbox.routing.registerRoute(
  /^https:\/\/cdn\.my\.com\/.*\.(jpe?g|png|gif|svg)/,
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'cdn-images',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 60,
        maxAgeSeconds: 5 * 24 * 60 * 60 // 设置缓存有效期为5天
      })
    ],
    fetchOptions: {
      credentials: 'include' // 支持跨域
    }
  })
);

// 缓存get api请求的数据
workbox.routing.registerRoute(
  new RegExp('https://m.my.com/api'),
  workbox.strategies.networkFirst({
    cacheName: 'api'
  })
);

// 缓存post api请求的数据
// const bgSyncPlugin = new workbox.backgroundSync.Plugin('apiQueue', {
//   maxRetentionTime: 1 * 60
// });

// workbox.routing.registerRoute(
//   /.*\/api\/.*/,
//   new workbox.strategies.NetworkOnly({
//     plugins: [bgSyncPlugin]
//   }),
//   'POST'
// );

5. Измените main.js

добавьте следующий код

import './registerServiceWorker';

6. Измените vue.config.js

Обратитесь к нашему проекту внешнего интерфейсаvue.config.js.js, ниже перечислены части, связанные с PWA:

pwa: {
    name: 'easy-front-vue-cli3',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',
    // configure the workbox plugin (GenerateSW or InjectManifest)
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: 'src/service-worker.js',
      importWorkboxFrom: 'disabled',
      importScripts: 'https://cdn.your.info/workbox-v4.3.1/workbox-sw.js'
      // ...other Workbox options...
    }
  }
  • workboxPluginMode: режим рабочей области, GenerateSW использует режим по умолчанию, InjectManifest использует пользовательский режим, я рекомендую использовать InjectManifest, который имеет больше степеней свободы.
  • workboxOptions.swSrc: укажите расположение service-worker.js
  • workboxOptions.importWorkboxFrom: Способ внедрения зависимой библиотеки workbox.Зависимая библиотека по умолчанию находится на гугловском cdn.Всем знакома отечественная ситуация.Поэтому рекомендуется ставить зависимую библиотеку на свой cdn,поэтому я установил ее здесь.disabled
  • workboxOptions.importScripts: укажите URL-адрес cdn вашей собственной зависимой библиотеки.

7. Настройте файл manifest.json

PWA поддерживает создание ярлыков, а manifest.json содержит имя ярлыка, значок, путь входа и другие конфигурации. Вы также можете не создавать ярлык, если он вам не нужен

{
  "name": "easy-front-vue-cli3",
  "short_name": "easy-front-vue-cli3",
  "icons": [
    {
      "src": "/img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

Преобразование проекта на основе упаковки webpack3.0

Мы вводим здесь только те части, которые отличаются от vue cli3, и одни и те же части registerServiceWorker.js, service-work.js и manifest.json повторяться не будут.

1. Установите пакеты зависимостей

npm install workbox-webpack-plugin -D
npm install register-service-worker -S

2. Измените webpack.prod.conf.js

// 在webpack中加入workbox插件，并进行配置
const {InjectManifest} = require('workbox-webpack-plugin');
  webpackConfig.plugins.push(new InjectManifest({
    swSrc: 'src/service-worker.js',
    importWorkboxFrom: 'disabled',
    importScripts: 'https://cdn.your.info/workbox-v4.3.1/workbox-sw.js'
  }));

3. Измените main.js

добавьте следующий код

import './registerServiceWorker';

Ссылаться на

Мой шаблонный проект:easy-front-vue-cli3

Адрес склада ящиков:workbox

Учебные материалы ПВА:Битва приложений PWA

Категории