0에서 15 - 15분 이내에 아무것도 없는 PWA 구축

9081 단어 webpwanetlify

아무것도 아니야?



이 original version of the “Nothing” 안드로이드 앱은 키랑고 실험실에서 개발한 것으로 구글 플레이스토어에서 100만 건이 넘는 다운로드와 4.2%의 등급을 받았다🎉.
안드로이드 앱은 기본적으로 아무것도 하지 않는다. 앱 외에 아주 멋진 부활절 달걀이 있다.
그러나 안드로이드 앱 노팅의 APK 크기는 14MB로 설치 후 19.24MB의 휴대전화 저장 공간을 사용했다.이것은 나로 하여금 그것을 축소할 방법이 있는지 생각하게 한다.

(왼쪽) Nothing Android 응용 프로그램: 19.24MB(오른쪽) Nothing Progressive 웹 응용 프로그램: 205KB
해결 방법은 매우 간단하다.HTML, CSS 및 JavaScript를 사용하여 전체 프로세스를 재구성할 수 있습니다.한 층 더 올라가기 위해서 나는 그것을 aProgressive Web App (PWA)로 업그레이드할 수 있다. 그러면 사용자는 인터넷 연결이 없는 상황에서 그것을 실행할 수 있고 PWA를 그들의 메인 화면에 추가할 수 있다.

👩🏻‍🎨 아이콘 디자인


코드에 대한 토론을 시작하기 전에 Nothing PWA에 대한 아이콘을 설계합시다!응용 프로그램 아이콘을 만드는 데 사용되는 도구는 Launcher Icon Generator입니다.이것은 매우 놀라운 open source 도구로 개발된 것이다.

Launcher 아이콘 생성기를 사용하여 응용 프로그램 아이콘을 디자인하고 생성할 수 있습니다(재료 디자인을 사용하시겠습니까?)짧은 시간 내에 무물 PWA를 실현하기 위해생성기는 48px, 72px, 96px, 144px, 192px와 512px의 크기를 자동으로 생성합니다.

PWACompat


현재 프로그램 아이콘을 준비했습니다. 다음 단계는 Web App Manifest 을 만드는 것입니다.이렇게 하면 PWA를 로드할 때 Android 버전 Chrome에 시작 화면이 자동으로 표시됩니다.그러나, 나는 이 플래시 기능을 다른 오래된 브라우저에 가져다 줄 방법이 있습니까?
PWACompat은 웹 응용 프로그램 목록을 요구에 부합되지 않는 브라우저에 제공하여 더욱 좋은 점진적인 웹 응용 프로그램을 얻을 수 있는 라이브러리입니다.
이 라이브러리는 매우 간단합니다. 웹 응용 프로그램 목록 파일과 PWACompat 스크립트만 추가하면 됩니다!
<link rel="manifest" href="manifest.json" />
<script async src="https://cdn.jsdelivr.net/npm/[email protected]/pwacompat.min.js"
    integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA"
    crossorigin="anonymous"></script>
PWACompat
Safari(iOS)의 플래시
타다!이렇게 해서 나는 플래시를 더 오래된 브라우저에 성공적으로 적용했다.그러나 이것이 바로 PWACompat이 할 수 있는 일입니까?아니요!얘는 실제로 더 많이 할 수 있어!
PWACompat은 또한 목록에 있는 모든 아이콘(favicon 포함)에 원 아이콘 표시를 만들고 각종 브라우저에 예비 원 표시를 만들며 PWA를 어떻게 열어야 하는지 설명하고 웹 응용 프로그램 목록에 따라 테마 색을 설정합니다.

🏠 메인 화면에 추가


Progressive Web Apps에서 가장 좋아하는 기능 중 하나는 메인 화면(A2HS)에 추가하는 것입니다.그러나 Android의 Chrome 68 부터 시작합니다.
Chrome will show the A2HS mini-infobar instead of the big A2HS banner
😵 오래된 A2HS 배너를 분리(Chrome 67 및 이전)
그럼에도 불구하고 A2HS 미니 메시지 표시줄은 앞으로 어느 날 크롬에서 삭제될 임시 해결 방안이다.따라서 Nothing PWA에 더 나은 A2HS UX를 제공해야 합니다.

(왼쪽) 설치 버튼 - (중) 설치 버튼 + A2HS 미니 정보 표시줄 - (오른쪽)
A2HS 대화
이 경우 브라우저가 홈 화면에 추가 기능을 지원하는 경우 페이지 상단에 설치 버튼이 표시됩니다.사용자가 설치 버튼을 클릭하면 A2HS 대화 상자가 트리거됩니다.
var installPromptEvent;
var btnInstall = document.querySelector('#install');

window.addEventListener('beforeinstallprompt', function (event) {
    event.preventDefault();
    installPromptEvent = event;
    btnInstall.removeAttribute('disabled');
});

btnInstall.addEventListener('click', function () {
    btnInstall.setAttribute('disabled', '');
    installPromptEvent.prompt();
    installPromptEvent.userChoice.then((choice) => {
        if (choice.outcome === 'accepted') {
            console.log('User accepted the A2HS prompt');
        } else {
            console.log('User dismissed the A2HS prompt');
        }
        installPromptEvent = null;
    });
});
웹 사이트가 메인 화면에 추가된 표준에 부합되면 브라우저는 "beforeinstallprompt" 이벤트를 터치합니다

🥚 부활절 달걀



스포일러 경보!!!
아무것도 없는 부활절 달걀 PWA:Konami Code+입니다.

⬆️⬆️⬇️️⬇️⬅️➡️⬅️➡️👆🏻👆🏻
사용자가 Konami 코드를 성공적으로 완료하면 Nothing PWA는 사용자를 a로 리디렉션합니다.
Konami 코드에 대해 다음 라이브러리를 사용합니다: YouTube video.그것은 무게가 가볍고 실현하기 쉽다.이 라이브러리는 모바일 기기에도 적용됩니다!유일한 단점은 Konami 코드가'위, 위, 아래, 아래, 왼쪽, 오른쪽, 왼쪽, 오른쪽, 클릭, 클릭'으로 바뀐다는 것이다.

코나미 JS 새로 고침 해제


하지만 작은 문제가 하나 있다.사용자가 휴대전화에서 페이지를 아래로 미끄러뜨리려 할 때, '리셋' 동작을 촉발할 것이다.

좋은 소식은, 우리는pull to refresh 조작을 사용하지 않을 수 있다는 것이다. overscroll-behavior-y: contain

CSS 한 줄 사용 ☁️ 군중 혹은 부대의 집합


Nothing PWA는 Netlify에서 호스팅됩니다.Netlify는 현대 네트워크 프로젝트를 자동화하는 데 사용되는 일체화 플랫폼이다.
Netlify에서 Nothing PWA를 진행하도록 선택한 이유는 설정하기 쉽기 때문입니다.Netlify는 말할 것도 없이 무료로 사용합니다!

Netlify 대시보드
사이트 배치에 있어 명령행 도구, 수동 배치 또는 연속 배치를 통해 선택할 수 있는 세 가지 방법이 있다.
명령줄 도구
이것은 기본적으로 사이트를 배치하는 가장 고전적인 방식이다.설치, Netlify 계정에 로그인하여 프로젝트를 초기화하면 사이트를 Netlify에 배치할 수 있습니다.
> brew tap netlify/netlifyctl 
> brew install netlifyctl
> netlifyctl login
> netlifyctl init
> netlifyctl deploy
수동 배포
사이트를 배치하고 싶은 모든 사람에게 이런 방법은 기본적으로 가장 쉬운 방법이다. 드래그 앤 드롭이다.
Netlify CLI
이 기능은 너무 멋있어서Firebase가 그것을 실현할 수 있기를 바랍니다.프로젝트 폴더를 드래그하기만 하면 시작할 수 있습니다.
지속적인 배포
이것은 내가 현재 이 프로젝트에서 사용하고 있는 방법이다.내 GitHub 메모리 라이브러리가Netlify에 연결되면, 코드를 git 메모리 라이브러리로 전송할 때마다Netlify는magic처럼 자동으로 사이트를 구축하고 배치합니다🧙🏻‍.

🔒 HTTPS！


점진적인 네트워크 응용 프로그램은 반드시 안전한 출처에서 제공해야 하기 때문에, 나는 이 사이트가 HTTPS를 사용했는지 확인해야 한다.좋은 소식은 Netlify가 사용자 정의 영역을 포함한 모든 사람에게 무료 HTTPS를 제공한다는 것이다.

또한 Netlify 대시보드에서 강제 HTTPS, HST)를 활성화할 수 있습니다.이렇게 하면 웹 사이트가 항상 HTTPS로 보호됩니다.

HTTP의 엄격한 전송 보안 💡등대


는 웹 페이지의 질을 향상시키는 데 사용되는 자동화 도구이다.공공 페이지든 인증이 필요한 페이지든, 모든 웹 페이지에서 그것을 실행할 수 있습니다.그것은 성능, 접근성, 점진적 웹 응용 등에 대해 심사한다.
Lighthouse
괜찮죠?성능은 97점, PWA, 접근성, 모범 사례, SEO는 100점을 받았다.🔥
여기서 전체 등대 보고서를 볼 수 있습니다.

https://builder-dot-lighthouse-ci.appspot.com/report.1533954675085.html 🎉 지금 바로 해볼게요.



🚀 당신은 이곳에서 아무것도 필요 없는 PWA를 시도할 수 있습니다:
GitHub에서도 소스 코드: nothing.limhenry.xyz
iOS에서 어셈블리 언어 사용 방법
[깃&깃허브 정리] 1. Git 시작하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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