Интерфейсный проект PWA для установки, автономного кэширования, отправки сообщений

внешний интерфейс JavaScript Chrome PWA

концепция

Progressive Web Apps— это прогрессивное веб-приложение, которое работает в современных браузерах и обладает сверхспособностями. Он поддерживает возможности, специфичные для приложения, такие как обнаружение, установка, автономная работа и отправка сообщений.Этот проект инкапсулирует вышеуказанные функции самым простым способом.

SIMPLE-PWA

SIMPLE-PWAЭто пример проекта pwa, смонтированного на vue. pwa — это концепция прогрессивного веб-приложения, которое не зависит ни от какого фреймворка, vue — просто носитель реализации.

ПроверитьРеализация сервера push-сообщений PWA

demo

pwa example

Пожалуйста, используйте последнюю версию браузера Chrome с более высокой версией Android (> 5.0) для доступа.

содержание

рабочий процесс

Работа pwa зависит от Service Worker (сокращенно sw).

Список задач -> регистрация ПО -> мониторинг ПО/прокси

  1. Во-первых, добавьте manifest.json и register.js для регистрации sw в index.html;
  2. Затем register.js обнаружит navigator.serviceWorker и зарегистрирует sw.js;
  3. Наконец, sw.js постоянно прослушивает и делегирует события sw.

Примечание. Этот проект использует copy-webpack-plugin и sw-precache-webpack-plugin для компиляции и создания файлов из каталога /src/sw в корневой каталог проекта, поэтому используйте переменную <% htmlwebpackplugin.files.publicpath %> для получать

index.html:

<!DOCTYPE html>
<html>
  <head>
    ...
    <!-- Manifest -->
    <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
  </head>
  <body>
    ...
    <!-- Service Worker register -->
    <!-- without webpush -->
    <script src="<%= htmlWebpackPlugin.files.publicPath %>register.simple.js"></script>
    <!-- with webpush -->
    <!-- <script src="<%= htmlWebpackPlugin.files.publicPath %>register.js"></script> -->
  </body>
</html>

register.js:

if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/sw.js')
    .then(function (registration) {
      console.log('Registered events at scope: ', registration)
    })
    .catch(function (err) {
      console.log('ServiceWorker registration failed: ', err)
    })
}

sw.js:

self.addEventListener('some event', e => {
  // do something
})

правила работы

добавить на домашний экран

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

  1. Требуется файл manifest.json.
  2. Файлу манифеста требуется начальный URL-адрес (start_url).
  3. Для файла манифеста требуется значок PNG размером не менее 144x144 пикселей.
  4. Веб-сайт использует Service Worker, работающий через HTTPS (или локальный хост), т.е. sw активирован
  5. Пользователям необходимо просмотреть веб-сайт не менее двух раз, а интервал между двумя посещениями должен составлять более пяти минут.

添加到主屏幕

{
  "name": "PWA Lite",
  "short_name": "PWA",
  "display": "standalone",
  "start_url": "/",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "./static/appicon_144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "./static/appicon_96.png",
      "sizes": "96x96",
      "type": "image/png"
    },

    {
      "src": "./static/appicon_48.png",
      "sizes": "48x48",
      "type": "image/png"
    }
  ]
}

В инструментах разработчика Chrome:

  1. Проверка приложения/манифеста на достоверность manifest.json
  2. Application/Service Workers Просмотр текущего статуса ПО
  3. Вы можете проверить «Обновление при перезагрузке» при отладке рабочих приложений/служб.

Добавление на главный экран появится только один раз, что очень неудобно при отладке. Однако, если вы используете хром для отладки, вы можете получить доступchrome://flags/#bypass-app-banner-engagement-checksУстановите флажок «Игнорировать», чтобы он отображался при каждом посещении.

Просмотр в автономном режиме

SW предлагает многорежим кэширования.

Когда sw находится в активированном состоянии, вы можете прослушивать событие fetch в sw.js и перехватывать и обрабатывать любой запрос:

// 请求命中缓存时直接返回缓存结果，否则发起请求
self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(response => {
      if (response != null) {
        return response
      }
      return fetch(e.request.url)
    })
  )
})

离线浏览

В инструментах разработчика Chrome:

  1. Application/Cache/Cache Storage Просмотр списка кешей
  2. Если перехват sw прошел успешно, слово (от ServiceWorker) можно увидеть в колонке размера Network
  3. Проверьте офлайн в сети, а затем обновите страницу, вы увидите, что страницы, которые вы посетили, по-прежнему доступны, и не будет «не подключен к Интернету», в этом сила автономного просмотра.

О режиме кеша браузера

  1. from memory cacheПамять существует только во время работы браузера, например данные изображения base64 и статические ресурсы, неконтролируемые
  2. from disk cacheЖесткий диск, долгосрочный кеш на жестком диске, например статические ресурсы, неуправляемый
  3. from ServiceWorkerSW прокси, полностью управляемый

浏览器缓存模式

сообщение push.

notification
notification

Push-сообщение должно соответствовать следующим условиям:

  1. sw находится в активированном состоянии
  2. Пользователь разрешает уведомления
  3. Диалоговое окно, спрашивающее пользователя, разрешить ли это, будет отображаться только один раз.Вы можете щелкнуть значок i в адресной строке Chrome и изменить элемент «Уведомление» на «Использовать глобальные настройки по умолчанию (спросить)», чтобы инициировать диалоговое окно запроса. .
  4. После того, как пользователь разрешит, будет получен объект подписки, в котором конечная точка указывает на push-сервер Google, поэтому его нужно глобально отменять при получении

消息推送

// 服务器推送事件
self.addEventListener('push', e => {
  // do something
}

// 推送消息对话框点击事件
self.addEventListener('notificationclick', e => {
  // do something
}

Начинать

github

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
Категории