How do I make my own website able to be installed?

octa_yt00

How do I make a website installable like this here? I'm making an open-source song creator, and thought this may be helpful for those who want to use this offline!

aimuhire

You can get this by following the steps outlined here

Summary:

  1. The web app is not already installed
  2. Meets a user engagement heuristic
  3. Be served over HTTPS
  4. Includes a web app manifest that includes:
    • short_name or name
    • icons - must include a 192px and a 512px icon
    • start_url
    • display - must be one of fullscreen, standalone, or minimal-ui
    • prefer_related_applications must not be present or be false
  5. Registers a service worker with a fetch handler(read about service workers here)

As you can see, the interesting file to include on your website is a web app manifest JSON file.

Below is an example of a manifest file and how you can include it in your website HTML file.

{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "icons": [
    {
      "src": "/images/icons-vector.svg",
      "type": "image/svg+xml",
      "sizes": "512x512"
    },
    {
      "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": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "shortcuts": [
    {
      "name": "How's weather today?",
      "short_name": "Today",
      "description": "View weather information for today",
      "url": "/today?source=pwa",
      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
    },
    {
      "name": "How's weather tomorrow?",
      "short_name": "Tomorrow",
      "description": "View weather information for tomorrow",
      "url": "/tomorrow?source=pwa",
      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
    }
  ],
  "description": "Weather forecast information",
  "screenshots": [
    {
      "src": "/images/screenshot1.png",
      "type": "image/png",
      "sizes": "540x720"
    },
    {
      "src": "/images/screenshot2.jpg",
      "type": "image/jpg",
      "sizes": "540x720"
    }
  ]
}

To include it in your web application add this tag in the head of all your pages of the website. Read more here.

<link rel="manifest" href="/manifest.json">

I hope this was helpful.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

TOP 리스트

  1. 1

    셀레늄의 모델 대화 상자에서 텍스트를 추출하는 방법은 무엇입니까?

  2. 2

    Webpack 4가 분할 모듈로 취급하는 원시 JSON 파일을 배포하는 방법은 무엇입니까?

  3. 3

    Windows에서 Apache Kafka 오류-주 클래스 QuorumPeerMain을 찾거나로드 할 수 없습니다.

  4. 4

    Zookeeper Cluster를 시작합니다. 오류 : 주 클래스 org.apache.zookeeper.server.quorum.QuorumPeerMain을 찾거나로드 할 수 없습니다.

  5. 5

    어떻게 reslove: InvalidArgumentError: 그래프 실행 오류가 발생합니까?

  6. 6

    PyCharm에서 프로젝트를 제거하는 방법은 무엇입니까?

  7. 7

    Python : 특정 범위를 초과하면 플롯의 선 색상을 변경할 수 있습니까?

  8. 8

    동적 링크 작동 방식, 사용법 및 dylib를 만드는 방법과 이유

  9. 9

    화살표와 테두리가있는 CSS 전용 툴팁

  10. 10

    웹 사이트 로딩 속도를 높이는 방법을 알려주세요.

  11. 11

    응답에 대한 JMESPath 필터링

  12. 12

    D3 JS에서 하프 도넛 원형 차트 값 표시

  13. 13

    Joomla 3의 단일 기사에서 소셜 미디어 아이콘을 게시 취소하는 방법은 무엇입니까?

  14. 14

    scipy.misc 이미지 함수의 AttributeError, ImportError (예 : imread, imresize, imsave, imshow 등)

  15. 15

    Xcode 6 Beta 4 Broke stringWithContentsOfURL : encoding : error :

  16. 16

    Java에서 HSSFCell의 최대 길이 늘리기

  17. 17

    Mac에서 python import nltk 오류

  18. 18

    오류 CS0019 : '<'연산자를 'string'및 'int'유형의 피연산자에 적용 할 수 없습니다.

  19. 19

    Libavformat은 RTP 스트림을 너무 빠르게 기록합니다(너무 높은 FPS).

  20. 20

    Linux 시스템에 대해 OPEN_MAX는 어디에 정의되어 있습니까?

  21. 21

    스프링 부트에서 application.properties 값을 동적으로 변경

뜨겁다태그

보관