Dart Advent Calendar 2018의 4일째 기사입니다.

처음에는 "Flutter Engine에서 사용되는 빌드 시스템 GN & Ninja에 대해"를 작성하려고했지만 그만두었습니다.

틈새 시장이 너무 많아서 정보가 없을 것이라고 생각했습니다.

pwa package와 service_worker package에 대해 소개합니다.

색인
(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

PWA란?

Progressive Web Apps are user experiences that have the reach of the web, and are:

Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
Engaging - Feel like a natural app on the device, with an immersive user experience.
This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.

라는 것이므로, 네이티브 앱과 같은 감각으로 취급할 수 있는 Web 페이지로 말하는 느낌이군요.

[1] 오프라인에서도 표시 가능

네트워크에 연결되지 않은 상태에서도 웹 페이지를 표시하면 조작하거나 할 수 있게 됩니다. !!

이것은 편리합니다.
앱처럼 불필요한 통신을 하지 않는다는 의미도 됩니다.
서버 운영비도 저렴하게 누를 수 있습니다.

[2] Home 화면에서 시작 가능

앱처럼 홈 화면에서 시작할 수 있습니다. ,
htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / 우에 b / 푹신 푹신한 ls / 아 p-in s ta l-ban rs /

바로 네이티브 앱처럼

[3] 통지 가능

등록한 사용자, 알림을 보낼 수 있습니다.
htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / 우에 b / 푼다 멘타 ls / 푸 sh의 치후 카치 온 s /

그리고 기본적인 기능은 대체로 갖추어져 있습니다. 대체로 앱을 대체할 수 있습니다.
또한 Play Store, AppStore를 통과할 필요 없이 앱을 설치할 수 있습니다.

Dart에서 PWA를 사용해 보자.

이번 샘플은
htps : // 기주 b. 코 m / 쵸로히로 / 메모 _ p wa_ 2018 / t ree / m s r / 00_ pu b_run_p wa_u th_da rt
입니다.

초로 오프라인화해 보기

PWA 대상 Angular Page 만들기

PWA없이 페이지 만들기

> stagehand web-angular
> pub get
> webdev serve

Angular의 Template가 표시됩니다.



이런 느낌.

오프라인 앱화

pubspec.yaml

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

pubspec.yaml에 추가

commandline

> pub get
> pub run pwa

pwa용 코드를 자동화합니다.

main.dart

import 'package:angular/angular.dart';
import 'package:demo/app_component.template.dart' as ng;
import 'package:pwa/client.dart' as pwa;

void main() {
  runApp(ng.AppComponentNgFactory);
  pwa.Client client = new pwa.Client(scriptUrl: './pwa.dart.js');
}

pwa 코드를 호출하는 기능을 추가합니다.
'new pwa.Client'를 추가하면,
이제 오프라인 앱으로 작동합니다!

확인해 본다. Chrome에서

commandline

> webdev serve

일단 부팅하면 오프라인으로 작동합니다.
삭제하고 싶을 때는

chrom://inspect

어쨌든 작동합니다. ServiceWorker를 삭제합니다.

REF

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로 실현하는 방법을 소개하겠습니다.