FE:PWA(progressive web app)

3472 ワード

PWA(progressive web app)

PWAは、HTML、CSS、JavaScriptなどのWebテクノロジーを使用して作成されたアプリケーションです.
スマートフォン時代の始まりに伴い、オリジナルアプリも台頭した.ただし,ネイティブアプリケーションの開発とメンテナンスが複雑な場合に利用できる方法はProgressive Webアプリケーション(Progressive Web app)である.

オリジナルアプリケーションとの違い

ネイティブアプリケーションは一般的にプラットフォームの専門言語で作成されています.(ex.アンドロイド-Java,ios-swift)
ただし、これは特定のプラットフォームでのみ利用可能であるため、PWAを用いて補足することができる.
PWAはいったんホームページに保存すると、ネイティブアプリケーションのようにブラウザで実行されます.
その利点は、反応的に動作し、製品の発売のために何の処理も必要ないことです.
ただしPWAの限界もあるので、ネイティブアプリも使用します.

PWAの使用

PWAは基本的にWebを中心としています.検索エンジンは簡単に見つかります.そのため、SSRが望ましい.

PWAの設定

보안 연결(HTTPS):PWAは信頼性の高い接続状態でのみ動作するため、安全な接続でサービスを提供する必要があります.

서비스 작업자(service worker):サービス担当者はバックグラウンドで実行されるスクリプトです.

매니페스트 파일(manifest file, 설정 파일):これはJSON(容量の小さいデータを交換するためのフォーマット)ファイルで、PWAの表示と機能に関する情報が含まれています.

Manifestファイルの簡単な例

{
   "short_name":"Weather",
   "name":"Weather: Do I need an umbrella?",
   "description":"Weather forecast information",
   "icons":[
      "src":"/images/icons-192.png",
      "type":"image/png",
      "sizes":"192x192""src":"/images/icons-512.png",
      "type":"image/png",
      "sizes":"512x512""start_url":"/?source=pwa",
      "background_color":"#336706",
      "display":"standalone",
      "scope":"/",
      "theme_color":"#336706"
   }

start-url: 앱이 시작되어야 하는 위치
display: 보여주고 싶은 브라우저 UI의 타입. 
fullscreen(전체 화면), standalone(스탠드얼론, 네트워크에 연결되지 않은 상태에서도 스스로 동작할 수 있는 것), minimal-ui(최소화된 UI), the standard browser interface(브라우저 표준 인터페이스)가 있다.