모든 Meteor 응용 프로그램을 PWA로 변환

17535 단어 meteorpwajavascript
네, 그러면 Meteor 프로그램을 성공적으로 만들고 테스트했습니다.현재, 당신도 당신의 사용자가 pwa (점진적 웹 응용 프로그램) 의 장점을 누리기를 바랍니다.그렇게 어렵지 않아요!
Meteor는 모든 PWA 기능(yet!)을 제공하지 않지만 다음과 같은 몇 단계만 수행하면 됩니다.
  • 추가 서비스 종사자
  • 제공 명세서 파일
  • 데스크톱/모바일 어플리케이션에 최적화
    • 이것은 Meteor 응용 프로그램에 적용될 수 있지만, 이 강좌를 복제하기 쉽도록 처음부터 시작합니다.
    $ meteor create pwa-boilerplate
$ cd pwa-boilerplate && meteor npm install
$ meteor
    lighthouse을 사용하여 새 응용 프로그램을 테스트할 때 다음과 같은 결과를 얻을 수 있습니다.

    다행히도, 다음 두 단계 이후, 이 문제들 중 대다수는 이미 해결되었다🎉

    1단계 - 서비스 추가


    service worker은 pwa를 가능하게 하는 핵심 기능이다.링크된 글을 읽으면, Meteor에 대해 한동안 알고 있으면, HTTP 기반의 서비스 종사자가 Meteor의 웹소켓protcoll DDP와 어떻게 호환되는지 먼저 생각할 수 있습니다.
    다행히도 repository with a Meteor-specific service worker 솔루션을 사용할 수 있습니다.그러나 프로젝트의 공용 폴더에 sw.js 파일을 수동으로 통합해야 합니다.
    $ mkdir -p public
$ curl "https://raw.githubusercontent.com/NitroBAY/meteor-service-worker/master/sw.js" >> ./public/sw.js
$ # or: wget "https://raw.githubusercontent.com/NitroBAY/meteor-service-worker/master/sw.js" -O ./public/sw.js
    그리고 시작 코드에 서비스 종사자를 통합해야 합니다. 그렇지 않으면 불러오지 않습니다.시작 파일을 만듭니다.
    $ mkdir -p imports/startup/client
$ touch imports/startup/client/serviceWorker.js
    콘솔 메시지를 통해 서비스 워커가 설치되었거나 오류가 발생했을 때 실패했는지 확인하는 시작 기능을 추가합니다.
    // serviceWorker.js
import { Meteor } from 'meteor/meteor'

Meteor.startup(() => {
  navigator.serviceWorker
    .register('/sw.js')
    .then(() => console.info('service worker registered'))
    .catch(error => { 
      console.log('ServiceWorker registration failed: ', error)
    })
})
    마지막으로 serviceWorker.js 파일에서 client/main.js 파일을 가져오는 것을 잊지 마십시오.
    // client/main.js
import '../imports/startup/client/serviceWorker.js'
    이때 서비스 직원은 이미 통합되었지만 여전히 정상적인 업무에 필요한 중요한 정보가 부족하다.이 파일은 manifest.json 파일로 제공되며, 다음 단계에서 이 파일을 통합할 것입니다.이후, 당신의 응용 프로그램은 기본적인 pwa 지원을 받을 것입니다.

    단계 2 - 목록 파일 제공

    package.json 파일과 유사하며 manifest file은 pwa의 속성을 설명합니다.응용 프로그램은 파일을 public 폴더에 놓고 html 헤더에 적당한 link 태그를 포함하여 브라우저에 이 목록을 불러오도록 알릴 수 있습니다.
    단점이 하나 있습니다. - pwa를 설치하려면 최소한 192x192px 아이콘을 제공해야 합니다.사용 가능한 아이콘이 없으면 다음 아이콘을 사용할 수 있습니다.



    2.1. 목록 파일 만들기
    $ echo "{}" >> public/manifest.json

    2.2. 필요한 최소 컨텐츠 추가
    {
  "short_name": "mypwa",
  "name": "My Cool PWA",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

    2.3. 이미지 추가
    $ mkdir -p public/images
$ cp /path/to/icons-192.png public/images/icons-192.png
$ cp /path/to/icons-512.png public/images/icons-512.png

    2.4. 헤드에 연결된 파일
    <head>
    <title>pwa-boilerplate</title>
    <link rel="manifest" href="/manifest.json">
</head>
    이제 새로운 라이트하우스 감사를 사용하여 pwa 호환성을 검사합시다.보시다시피 우리는 현재 응용 프로그램을 pwa로 설치하는 데 필요한 모든 것을 지원합니다.

    설치 단추가 보이지 않고, 설치할 수 있다는 것을 회계 감사가 명확하게 표시한다면, 다른 포트를 선택할 수 있습니다.응용 프로그램이 url:port 조합에 설치되면 브라우저는 이 응용 프로그램이 이미 설치되었다고 생각합니다.
    이제 응용 프로그램 pwa를 최적화하기 위해 마지막 조정을 추가합시다.

    3단계 - 데스크톱/모바일 사용 최적화


    먼저 부족한 속성을 manifest.json 파일에 추가합니다.manifest guide을 읽고 속성이 무엇을 설정할 수 있는지 알아보세요.
    그런 다음 뷰포트, 아이콘 등을 최적화하기 위해 noscript 폴백 및 중요한 head 항목을 추가해야 합니다.
    마지막으로, 데이터가 https로 다시 연결되도록 확보해야 합니다.이것은 zero-ConfigMeteor 패키지 force-ssl을 추가하여 실현할 수 있습니다.

    3.1. 목록 파일 완성
    비록 pwa는 이러한 기능이 없어도 정상적으로 작동할 수 있지만, 일부 주제를 추가하여 더욱 삽입적인 체험을 제공하는 것이 유익할 수 있다.또한 scope을 정의할 수 있습니다. 이것은 당신의 pwa가 제한될 (자) 노선입니다.예를 들어 구글은 지도 응용 프로그램의 pwa를 /maps으로 제한했다.
    {
  "short_name": "mypwa",
  "name": "My Cool PWA",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "background_color": "#000000",
  "scope": "/",
  "theme_color": "#FFFFFF"
}

    3.2. 헤드 태그 최적화
    다음 머리 속성은 목록 파일의 항목과 중복될 수 있으므로 업데이트를 확인하십시오.
    <head>
    <meta charset="utf-8">
    <meta name="application-name" content="my cool pwa">
    <meta name="viewport" content="initial-scale=1, maximum-scale=5, minimum-scale=-5"/>
    <meta name="theme-color" content="#FF00AA">
    <link rel="manifest" href="/manifest.json">
    <link rel="shortcut icon" type="image/png" href="/images/icons-192?v1" sizes="192x192">
    <link rel="apple-touch-icon" sizes="192x192" href="/images/icons-192.png">
    <link rel="fluid-icon" href="/images/icons-192.png?v1" title="app icon">
    <title>pwa-boilerplate</title>
        <noscript>
        <style>
            body:before { content: "Sorry, your browser does not support JavaScript!"; }
        </style>
    </noscript>
</head>
    하나의 특례는 noscript tag이다.페이지가 불러올 때 완전히 덮어씌워질 수 있도록 그것을 머리에 두어야 한다.본문에 놓으면 렌더링 엔진에 따라 초기 본문 내용이 동적으로 불러올 수 있기 때문에 Javascript를 사용하지 않을 때 감지할 수 없습니다.
    그 밖에 html 표준은 link style 또는 meta 원소 but not flow content을 방치할 수 없습니다.이러한 해결 방법에 대해 우리는 css:before 선택기와 content 속성을 사용하여 텍스트를 기본 본문에 나타낼 수 있습니다.

    3.3. 강제 SSL
    이것은 마지막이자 가장 간단한 부분이다.force-ssl포만 추가하면 등대 감사를 만족시킬 수 있습니다🎉 🎉 🎉
    $ meteor add force-ssl
    마지막으로 응용 프로그램에서 완전한 pwa 최적화 지원을 통합할 수 있어야 합니다.

    만약 과정 중에 어떤 문제가 발생하거나 개선할 공간이 있다면 언제든지 의견을 발표하십시오.만약 유성 주제에 관한 더 많은 글을 보고 싶으면 저에게 알려주세요.
    원형 상속 JavaScript의 원형 상속 이해
    Android Studio를 사용하여 Android용 적응형 아이콘을 만드는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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