소개 👋🏽

안녕하세요, 저는 트리니다드토바고 🇹🇹에서 온 카리브해에 거주하는 웹 개발자 Nicholas Mendez입니다. 저는 웹 앱의 열렬한 지지자이므로 플랫폼에 적용되는 새로운 첨단 기능을 항상 찾고 있습니다. 이러한 API는 많은 사람들에게 벅차게 보일 수 있으므로 예제와 설명으로 분해할 수 있기를 바랍니다.

배경 이벤트 🎉

전통적인 웹 모델에서 앱에서 일어나는 모든 일은 일반적으로 사용자나 클라이언트에 의해 시작됩니다.

예: 영화 앱에서 페이지를 요청할 때 서버에서 영화 데이터를 가져올 수 있습니다. 페이지 로드 이후 업데이트를 검색할 수 있도록 새로 고침 버튼을 추가할 수 있습니다.

그러나 Progressive Web Applications의 서비스 워커 기술은 앱이 열려 있지 않거나 온라인(°ro°)이 아닐 때도 백그라운드 작업을 수행하는 데 사용할 수 있습니다!

이는 다음과 같이 백그라운드에서 시간 기반 이벤트를 트리거하려는 경우에 유용합니다.

오프라인 캐시 업데이트

서버에서 앱으로 새 상태 푸시

미리 알림 알림 트리거

참고 이 문서에서는 전체 코드 예제를 제공하지 않지만 대신 주요 API 호출을 강조 표시합니다. 자세한 내용은 아래 참조를 참조하세요.

방법론 💡

현재 이를 달성할 수 있는 세 가지 방법(AFAIK)이 있습니다.

푸시 알림

푸시 알림을 사용하면 서버에서 하나 이상의 클라이언트로 푸시 메시지를 보낼 수 있습니다. Firebase Cloud Messaging (FCM)은 푸시 메시지를 장치에 전달하는 데 사용할 수 있는 무료 서비스입니다. 이러한 메시지는 장치에서 푸시 알림으로 나타납니다(사전에 권한이 부여된 경우). 보기 a demo . 알림을 자동 데이터 메시지로 구성할 수도 있으므로 앱이 사용자에게 경고하지 않고 서버에서 데이터를 수신할 수 있습니다.

//using fcm in sw.js (service worker)
//note: these URLs only resolve if app is hosted on firebase
//use cdn URLs if app is hosted elsewhere
importScripts('/__/firebase/7.12.0/firebase-app.js');
importScripts('/__/firebase/7.12.0/firebase-messaging.js');
importScripts('/__/firebase/init.js');

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  // do other data fetching here too
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: './assets/img/192.png'
  };
  //if we want to alert the user else omit
  return self.registration.showNotification(notificationTitle, notificationOptions);
});

주기적 백그라운드 동기화

이 방법은 클라이언트가 네트워크 연결이 항상 보장되지 않을 때 데이터를 가져오는 최선의 접근 방식을 구현하려는 경우에 유용합니다. API를 사용하면 알림을 표시하거나 24시간마다 서버에서 데이터를 검색하는 것과 같은 시간 간격으로 일부 작업을 예약하도록 ServiceWorker를 구성할 수 있습니다.

일회성 이벤트를 예약하려는 경우 처음으로 트리거된 후 주기적 동기화를 등록 취소하도록 서비스 워커를 구성할 수 있습니다.

//request permission and register periodicSync in ./main.js
// Check if service workers are supported
if ('serviceWorker' in navigator) {
  const registration = await navigator.serviceWorker.ready;
  // Check if periodicSync is supported
  if ('periodicSync' in registration) {
    // Request permission
    const status = await navigator.permissions.query({
      name: 'periodic-background-sync',
    });
    if (status.state === 'granted') {
      try {
        // Register new sync every 24 hours
        await registration.periodicSync.register('news', {
          minInterval: 24 * 60 * 60 * 1000, // 1 day
        });
        console.log('Periodic background sync registered!');
      } catch(e) {
        console.error(`Periodic background sync failed:\n${e}`);
      }
    }
  }
}

그런 다음 서비스 워커에서:

//setup handler in sw.js
self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'news') {
    console.log('Fetching news in the background!');
    event.waitUntil(fetchAndCacheNews());
    //for one off event
    registration.periodicSync.unregister('periodicsync');
  }
});

알림 트리거

오프라인 상태에서도 장치에서 로컬 알림을 예약하려면 알림 트리거가 가장 좋습니다. 서버에서 푸시 메시지로 수신되는 대신 인터넷 연결이 없는 경우에도 앱이 '로컬' 알림 메시지를 깜박이도록 할 수 있습니다. 이는 서버의 새 데이터가 필요하지 않은 미리 알림 및 알람에 유용할 수 있습니다. 알림 API에 타임스탬프를 제공하기만 하면 해당 시간이 되면 메시지가 사용자에게 알려줍니다.

const createScheduledNotification = async (tag, title, timestamp) => {
  const registration = await navigator.serviceWorker.getRegistration();
  registration.showNotification(title, {
    tag: tag,
    body: "This notification was scheduled 30 seconds ago",
    showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
  });
};

Repl.it에서 사용할 수 있는 알림 트리거의 전체 데모가 있습니다.

마무리 🎁

이 긴 게시물을 읽어 주셔서 감사합니다. 제가 빠트린 부분이나 틀린 부분이 있다면 아래 댓글로 알려주세요!

참조 📚

주기적 동기화 및 알림 트리거에 대한 코드 조각은 여기에서 인용됩니다.

web.dev: Periodic Background Sync
web.dev: Notification Triggers
Google Developers: Push Notifications