지난번 의 계속입니다.

색인
(1) Hello World PWA
(2) Add to Home
(3) Standard Web Notification
(4) Hook request and Do original processing
(5) Post message

코드
htps : // 기주 b. 코 m / 코로 히로 / 메모 _p 와_2018

이번에는 Web Push의 클라이언트 측을 Dart로 실현해 보겠습니다.



라는 알림을 보낼 수 있습니다.

Web Push란?

Push 알림을 사용할 수 있으므로 최종 사용자에게 메시지를 보낼 수 있습니다.
신경이 쓰이는 정보를 전달해주는 매우 편리한 기능입니다.

Push 통지는 편리한 것으로, 긴급 메일이 왔을 때 등, 통지 기능 덕분에, 즉각적으로 반응할 수 있습니다.

직장에서 채팅으로 질문이 오거나 질문에 대답해 주면 그 일을 즉시 할 수 있습니다.

경매 사이트에, 원하는 상품이 출품되었을 때 등, 눈치채게 해 있어 편리합니다.

나쁜 면으로는, Push 통지를 받아, Background에서 가상 통화의 마이닝 하는데 사용된다든가.
※ 의도하지 않은 이용
h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 39544963 / - 굉장히 - ゔ ぇ

스팸처럼 알림이 날아 오는가?
솔직히 Chrome이라면 쉽게 불필요한 ServiceWorker를 삭제할 수 없는 것 같습니다.

Dart에서 Push 알림을 시도합니다.

이번에 사용하는 코드입니다.
htps : // 기주 b. 코 m / 쇼로 히로 / 메모 _ p 와 _ 2018 / t 네 / 뭐 r / 05_

[1] public key / private key 생성

h tps : // 우에 b 뿌 sh 코데 아 b. gぃtch. 메/ 가기

[2] Push 알림을받는 웹 페이지 만들기

pwa.dart를 종속성에 추가

pubspec.yaml

..
dependencies:
  pwa: 
    git: 
      url: https://github.com/kyorohiro/pwa.git
..
.
.

Push 알림을 받는 ServiceWorker 만들기

pwa.dart

import 'package:pwa/worker.dart' as pwa;

void main() {
  pwa.Worker worker = new pwa.Worker();
  worker.offlineUrls = <String> [];
  worker.pushHandler = (pwa.PushContext context) async {
    await context.showNotification(new pwa.Notification("pushed"));
  };
  worker.run(version: "v0.0.1");
}

매니페스트 추가

index.html

.
    <link rel="manifest" href="manifest.json" />

manifest.json

{
    "name": "hello",
    "short_name": "PWA Example",
    "start_url": "./index.html",
    "display": "standalone",
    "background_color": "#3E4EB8",
    "theme_color": "#2F3BA2"
}

Subscribe 요청을 발행하는 코드 추가

main.dart

.
pwa.Client client =  new pwa.Client(scriptUrl: './pwa.dart.js');
pwa.PushPermission p = await client.getPushPermission(applicationServerKey: "..PUBLIC KEY..");
await p.unsubscribe();
.
.

[3] 시도해보기

subscribe 한다.

[3-1] [2]에서 만든 앱 시작
[3-2] subscribe 버튼을 누른다
[3-3] info 버튼을 누른다

Subscription

{"endpoint":"https://fcm.googleapis.com/fcm/send/eWV1CqjHVU0:APA91bHzZrIZGOdOkvM9T51nFBlmOPr_MOGEkGAYYO-rVVwc626kQI_Dv5Giv3y14WTCWgASUlZmbZ4x2V7Mg2Oyv_oeEIITePnE6mixuRR2qOdarL3mQeCoiwUjUoSfHMN454Rxw1tK","keys":{"p256dh":"BFLh_-F0oT8fb5DhUee0g9U0zcgp2D4x9Anjs79WIGKdSfeKQjje_zPdi5Xl7I9LGAVE6nABc64rEitKYLfISeo","auth":"Fy1dqyQ0X-kjeJnYtDh1aA"}}

Push 알림 보내기

취득한 Subscription 을 ぇtps://우ぇb뿌 sh-코 b b. gぃtch. 메/
지정된 위치에 붙여넣고 보내기 버튼을 누르면,



안전한 알림이 표시됩니다.

ref

htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / 음 b / 푹신 푹신한 ls / 음 b- 아 p 마니 훗 st /
htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / 우에 b / 푹신 푹신한 ls / 아 p-in s t-l-bans rs /
htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m/우ぇb/푼다 멘타 ls/p 리메 rs/세 rゃぃ세를 r rs/ぃふぇcycぇ? hl = 그럼

2018년 12월 시점의, 움직이도록 개조한 것을, 이하에 일어났습니다.
htps : // 기주 b. 코 m / 코로 히로 / 메모 _p 와_2018
htps : // 기주 b. 코 m / 교로 히로 / p
htps : // 기주 b. 코 m / 코로 히로 / 세 r ゔ ぃ 세 _ r r

PS

htps : // 기주 b. 코 m / 이소오 s / p이 마스터 브랜치이고,
일부 움직이지 않았기 때문에 포크하고 수정하고 있습니다.
htps : // 기주 b. 코 m / 교로 히로 / p

이번에는 수정한 것을 사용하고 있습니다.

다음 번

Notification이라든지 ServiceWorker라든지,
Dart로 실현하는 방법을 소개하겠습니다.