Dart에서 PWA (2) Home에 등록

11209 단어 ServiceWorkerPWADartFlutter
지난번의 계속입니다!!

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

앱과 브라우저 중 어느 것이 패권을 취하는지에 대한 문제는 과거부터있었습니다.
옛날이라면 "Windows, Macromedia Flush, Java, Browser (AJAX)"라고 할까요?

iOS가 등장하여 구도가 일변했지만 앞으로 어떻게 될지 모르겠습니다.

Dart 세계에서이 흐름을 취한다면,
Flutter vs PWA 
Flutter vs Anguar Dart

그렇죠?

글쎄, Flutter는 웹을 캡처하는 것입니다.



□ 홈 화면에서 시작 가능(Chrome)


次の情報が記述されたウェブアプリ マニフェスト ファイルが存在する。
short_name（ホーム画面で使用）
name（バナーで使用）
192x192 の png アイコン（アイコンの宣言には MIME タイプ image/png の指定が必要）
読み込み先の start_url
サイトに Service Worker が登録されている。
HTTPS 経由で配信されている（Service Worker を使用するための要件）。
2 回以上のアクセスがあり、そのアクセスに 5 分以上の間隔がある。

ref add to home screen prompt

그렇기 때문에 시도해 봅시다.

[H-1] manifest.json 만들기



manifest.json
{
  "name": "demo",
  "short_name": "demo",
  "description": "A web app that uses AngularDart Components",
  "lang": "en-US",
  "start_url": "index.html?launcher=true",
  "scope": "/",
  "display": "standalone",
  "orientation": "any",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "launcher-icon-1x.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

[H-2] index.html에서 Manifest를로드하도록 설정



index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="manifest" href="manifest.json" />
    <link rel="apple-touch-icon" sizes="48x48" href="launcher-icon-1x.png">
    <link rel="apple-touch-icon" sizes="96x96" href="launcher-icon-2x.png">
    <link rel="apple-touch-icon" sizes="192x192" href="launcher-icon-4x.png">
    <meta name="theme-color" content="#ffffff" />
    <title>00_zero_pwa_with_dart</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" type="image/png" href="favicon.png">
    <script defer src="main.dart.js"></script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

[H-3] Icon 이미지 준비





[H-4] 동작 확인해보기



1 서버 시작
webdev serve --release

2 열기
localhost:8080 にアクセス



※ 오래된 ServiceWorker를 삭제하고 싶은 경우
右クリック->検証->Application->ServiceWroker より、古いのを削除

※5분 기다리지 않는 경우
右クリック->検証->Application->Manifest.json より、インストール

ref



htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / 음 b / 푹신 푹신한 ls / 음 b- 아 p 마니 훗 st /
htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / 우에 b / 푹신 푹신한 ls / 아 p-in s t-l-bans rs /

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로 실현하는 방법을 소개하겠습니다.
Dart에서 PWA (1) 오프라인 앱
Dart의 PWA (3) Push 알림

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage