Поощрение новых версий приложений с работником службы и создание React-App

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

Распространенным заблуждением является то, что когда новый контент доступен, оно будет загружен только после того, как все вкладки для вашего прогрессивного веб -приложения будут закрыты.

Хотя это может быть поведением по умолчанию, вы можете ускорить этот процесс, пропустив ожидание и побудив пользователя обновить.

В этом коротком учебнике мы сделаем именно это с настройкой приложения Create React.

Создание приложения React

Мы будем использовать NPX Create-React-App и установить Vercel’s служить Во всем мире служить нашей сборке.

npx create-react-app hello-cra-push-notifications
cd hello-sw-push-notifications
# We'll use this to serve our app
npm i -g serve

Перед строительством давайте обновим index.js :

import React from "react"
import ReactDOM from "react-dom"
import "./index.css"
import App from "./App"
import * as serviceWorker from "./serviceWorker"

ReactDOM.render(
  
    
  ,
  document.getElementById("root")
)

// Changes made here
serviceWorker.register({
  onUpdate: registration => {
    const waitingServiceWorker = registration.waiting

    if (waitingServiceWorker) {
      waitingServiceWorker.addEventListener("statechange", event => {
        if (event.target.state === "activated") {
          if (
            window.confirm(
              "There is a new version of the app ready. Please reload to update."
            )
          ) {
            window.location.reload()
          }
        }
      })
      waitingServiceWorker.postMessage({ type: "SKIP_WAITING" })
    }
  },
})

Здесь мы добавляем магический код для onupdate Художник, который CRA предоставляет нам вне коробки.

В этом коде мы проверим, есть ли обслуживающий работник, ожидающий изменений файлов. Если это так, мы просто добавляем событие для изменения состояния и опубликоваем сообщение в Skip_waiting Анкет

Теперь, в следующий раз, когда мы перезагружаем приложение, нам будет предложено подтвердить диалог перезагрузить страницу с нашими последними обновлениями!

У пользователя все еще есть возможность отрицать изменение, если он хочет.

Строить и служить

Давайте поженимся и уйдем:

yarn build
serve build

Теперь в порту 5000 (или что -то в этом роде) вы увидите обычный базовый CRA, который был построен.

Давайте внесем некоторые изменения и увидим наше подсказку в действии!

Внесите изменения в ваше приложение React

Обновите приложение, чтобы иметь все, что вы хотите. Это может включать изменения в стили и т. Д. (Я сделал это на своем примере изображения ниже).

import React from "react"
import logo from "./logo.svg"
import "./App.css"

function App() {
  return (
    
      
        
        Make changes
        
          Learn React
        
      
    
  )
}

export default App

Как только вы счастливы, просто беги Строительница пряжи Анкет

Сделайте это на другой вкладке, пока сервер работает. Здесь нет никакой реальной причины, кроме как предотвратить себя вторым угаданием, почему происходят изменения.

Если вы перезагрузите приложение React на порту 5000, через несколько мгновений вы увидите следующее появление в консоли:

Новый контент доступен и будет использоваться, когда все вкладки для этой страницы будут закрыты.

На самом деле, этот журнал является предшественником прямо перед нашим пользовательским onupdate Крюк вступает в игру. В то же время у вас будет этот диалог с окном на экране:

Если мы примем (и вы можете отменить, если хотите), вы увидите наше обновленное приложение!

Победа!

Конечно, вам не нужно использовать диалог Window. Как только это уведомление проходит, вы можете сделать все, что ваше сердце желает, чтобы пользователь знал, что он может обновить свое приложение на перезагрузке. На самом деле, вы можете быть грубым и просто перезагрузить страницу на них (хотя я бы не стал!).

В качестве последнего примечания это поддерживается в большинстве крупных браузеров, но с предостережением, которое сафари ios не поддерживает это Анкет Компромисс-это то, что вы делаете!

Ресурсы и дальнейшее чтение

Изображение предоставлено: Климент h

Первоначально опубликовано на моем блог . Следуйте за мной в Твиттере за более скрытыми драгоценными камнями @dennisokeeffe92 .

Оригинал: “https://dev.to/okeeffed/prompting-new-app-versions-with-the-service-worker-and-create-react-app-52o2”

Создание приложения React

Строить и служить

Внесите изменения в ваше приложение React

Ресурсы и дальнейшее чтение

Читайте ещё по теме: