PWA 사용: 설치 가능한 웹 사이트로 웹 사이트 강화

21851 단어 webdevpwajavascriptux

PWA란?


Progressive Web Apps(PWA)는 오프라인 모드에서도 작동할 수 있고 설치할 수 있는 웹 응용 프로그램으로 설계되었다.이 세 가지 기둥은 그것들을 하나의 체험으로 전환시켜 마치 플랫폼에 특정한 응용 프로그램처럼 느낀다.

PWA를 사용해야 하는 이유


본질적으로 말하자면 점진적 네트워크 응용은 단지 네트워크 응용일 뿐이다.점진적인 강화를 사용하여 현대 브라우저에서 새로운 기능을 사용합니다.service workers와 web app manifest를 사용하면 웹 응용 프로그램을 PWA로 변환할 수 있습니다.새로운 기능을 사용할 수 없으면 사용자는 여전히 핵심 체험을 얻을 수 있다.

위의 그림에서 보듯이 PWA 사용자가 좋아하는 네트워크 체험을 제공함으로써 세계에서 가장 좋은 두 가지 기능을 제공하고 최신 네트워크 기능을 사용하여 강화된 기능과 신뢰성을 가져온다. 점진적인 네트워크 응용 프로그램은 누구든지, 어디서든지, 어느 장치에서든지 당신이 구축한 내용을 설치할 수 있고 하나의 코드 라이브러리만 있으면 된다.

개시하다


웹 사이트를 PWA로 전환하려면 다음이 필요합니다.
  • 웹 사이트 자체https 또는 localhost에서 전달)
  • manifest.json(웹 응용 프로그램에 대한 정보 제공)
  • service worker network requests와 asset caching를 웹 브라우저가 어떻게 처리하는지 차단하고 제어할 수 있는 스크립트
    • 여기서 우리는 웹 사이트를 만드는 데 중점을 두지 않고 기존의 웹 사이트를 설치할 수 있도록 한다.계속하려면 아래에 제시된 기본 사이트를 사용하기만 하면 된다.
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>PWA: Installable website</title>
    </head>
    <body>
        <h1>Test</h1>
    </body>
</html>
    주의: 사이트 스타일을 설정하거나 스크립트를 추가할 수 있지만 PWA 설치 기능을 추가하기 위해서라면 충분합니다.manifest.json의 정의
    {
  "name": "<name of the application>",
  "short_name": "<short name for the application> (can be same as name)",
  "start_url": "<start url for the website>",
  "display": "<display mode for the website>",
  "description": "<description of the application>",
  "background_color": "<color>",
  "theme_color": "<color>",
  "orientation": "<orientation>",
  "icons": [{
    "src": "<image source>",
    "sizes": "<widthxheight>",
    "type": "image/png"
  }]
}
    예제manifest.json는 다음과 같다.
    {
    "name": "PWA: Installable website",
    "short_name": "Installable PWA",
    "start_url": "index.html",
    "display": "standalone",
    "description": "App for testing PWA features",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "orientation": "portrait-primary",
    "icons": [
        {
            "src": "image/icon-24.png",
            "sizes": "24x24",
            "type": "image/png"
        },
        {
            "src": "image/icon-32.png",
            "sizes": "32x32",
            "type": "image/png"
        },
        {
            "src": "image/icon-48.png",
            "sizes": "48x48",
            "type": "image/png"
        },
        {
            "src": "image/icon-64.png",
            "sizes": "64x64",
            "type": "image/png"
        },
        {
            "src": "image/icon-128.png",
            "sizes": "128x128",
            "type": "image/png"
        },
        {
            "src": "image/icon-256.png",
            "sizes": "256x256",
            "type": "image/png"
        }
    ]
}
    명세서를 사이트에 추가하려면 head 부분에 다음과 같은 내용을 추가하십시오
    <link rel="manifest" href="manifest.json" />
    head 섹션에 iOS 지원을 추가하는 것이 좋습니다.
    <link rel="apple-touch-icon" href="image/icon-24.png" />
<link rel="apple-touch-icon" href="image/icon-32.png" />
<link rel="apple-touch-icon" href="image/icon-48.png" />
<link rel="apple-touch-icon" href="image/icon-64.png" />
<link rel="apple-touch-icon" href="image/icon-72.png" />
<link rel="apple-touch-icon" href="image/icon-96.png" />
<link rel="apple-touch-icon" href="image/icon-128.png" />
<link rel="apple-touch-icon" href="image/icon-256.png" />
<meta name="apple-mobile-web-app-status-bar" content="#db4938" />
<meta name="theme-color" content="#db4938" />
    이제 처리해야 할 문제service worker개만 남았다.service-worker.js
    const STATIC_CACHE = "static-cache-v1"
const static_assets = [
    "/",
    "/index.html",
    "/script.js",
    "/image/icon-24.png",
    "/image/icon-32.png",
    "/image/icon-48.png",
    "/image/icon-64.png",
    "/image/icon-72.png",
    "/image/icon-96.png",
    "/image/icon-128.png",
    "/image/icon-256.png",
]

// storing static assets in cache on service worker install
self.addEventListener("install", event => {
    event.waitUntil(
        caches.open(STATIC_CACHE).then(cache => {
            cache.addAll(static_assets)
        })
    )
})

// returning static assets from cache
self.addEventListener("fetch", event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            return response || fetch(event.request);
        })
    )
});
    설치를 사용하려면 fetch 이벤트를 처리해야 합니다.
    웹 사이트에 다음 스크립트를 추가하여 사용service worker
    <script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/service-worker.js');
    } else {
        console.log("Service worker is not supported");
    }
</script>
    지금은 수수께끼의 마지막 부분으로 localhost에서 사이트를 위해 서비스하고 있다.VS 코드를 사용한다면 live server 확장을 사용할 수 있습니다. (초보자가 사용하기를 권장합니다.)

    url란 오른쪽 상단에 있는 설치 아이콘은 현재 설치할 수 있음을 표시합니다.디바이스에 설치하려면 을(를) 클릭하십시오pwa.
    주의: 이것은 단지 간단한 개술일 뿐입니다.생산성pwa에서 더 바람직한 방법은 정기적으로 정적 자산을 갱신하여 사용자가 유행이 지난 내용에 접근하지 않도록 하는 것이다.

    구현된 프로젝트 사용


    Smartsapp
    네트워크 애플리케이션: https://smartsapp-ba40f.firebaseapp.com

    루피수비 / SmartsApp


    💬📱 크로스플랫폼 messenger 응용 프로그램


    Smartsapp



    전체 플랫폼에 걸쳐 있는messenger 응용 프로그램으로 끝에서 끝까지 암호화(E2EE)를 갖추고 있다.

    데모



    참고: 프레젠테이션에 표시된 기능은 상세하지 않습니다.데모에서는 핵심 기능만 보여 주었다.

    지원되는 플랫폼


  • 데스크탑: Windows, Linux, MacOS

  • 휴대폰: 안드로이드, iOS

  • 웹 사이트: 브라우저가 있는 모든 장치

    • 백엔드 설정


    응용 프로그램의 백엔드는 Firebase에서 처리됩니다.

    기본 설정

  • Firebase 컨트롤러로 이동하여 Smartsapp라는 새 프로젝트를 만듭니다.
  • 활성화Google Analylitics

    • 응용 프로그램 설정

  • 개요 페이지
    • 에서 프로젝트용으로 작성App
  • 구성을 복사하여 원하는 위치에 붙여넣습니다
    • .

    설정 확인

  • 항목Authentication 섹션으로 이동
  • 선택Sign-in method 탭
  • 활성화Email/Password 및 Google 로그인

    • Firestore 설정

  • 항목Firestore 섹션으로 이동
  • 프로젝트를 위한 Firestore 공급자
    • 만들기
  • 이동 Rules...
    • View on GitHub

    참고 문헌

  • web.dev/what-are-pwas
  • MDN Docs

    • 읽어주셔서 감사합니다.


    연락 주세요.
  • GitHub

  • Portfolio(프리랜서 프로젝트의 경우 연락처로 문의)
    • 추상화 in Python 2
    RACCOON에서 계정 형식의 Excel 파일에서 CSV 형식의 소환장 파일을 제작하다

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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