PWA(3)

• Progress Loading bar for PWAs (프로그레스 로딩바)

  PWA (프로그레시브 웹 앱, Progressive Web Apps) 를 더욱 네이티브 앱처럼 보이기 위한 것으로 여러가지 방법 중 오늘은 페이지 최상단 영역에 프로그레스 로딩바를 설치해 보려합니다. 목차(차례) Progress Loading bar for PWAs (프로그레스 로딩바) 먼저, 유튜브 웹사이트를 방문해 보시면, 첫 화면에 최상단 빨간색으로 로딩바가 지나가는 것을 볼 수 있습니다. 유튜브뿐만 아니라 보여줘야 할것이 많은 최대수의 메이저 플랫폼에서는 많이 적용하고 있는 것중에 하나이기도 하지요. 오늘 우리가 할 일이 바로 이것입니다. 페이지 상단에 로딩 상태만큼 좌에서 우측으로 흘러가는 Progress Loading bar (프로그레스 로딩바) Progress Loading bar 설치요소 ..

  2023.08.15

• PWA를 위한 4가지 스텝

  PWA를 위한 4가지 스텝 1. 모바일 웹 어플리케이션 - HTML, CSS, JavaScript 2. HTTPs 3. App Manifest / JSON 4. Serivce Worker / js PWA로 iOS에서 푸시알림 보내기 https://www.youtube.com/watch?v=eSj25owrmTM PWA관련 유용한 사이트 1. PWA빌더 https://www.pwabuilder.com/ PWABuilder www.pwabuilder.com 2. 워크박스 https://developer.chrome.com/docs/workbox/ Workbox - Chrome Developers Production-ready service worker libraries and tooling. developer..

  2023.08.15

• PWA(프로그레시브 웹 앱, Progressive Web Apps) 적응기

  오늘은 PWA(프로그레시브 웹 앱, Progressive Web Apps)에 대해 알아보고, 오프너스 창업플랫폼에서 운영하는 모바일 웹 플랫폼에 해당 PWA기술을 도입 적용하는 중입니다. 관련하여 PWA에 대한 인식이 너무 낮고 설치에 어려움이 있는지라 PWA가 무엇인지에 대한 간단히 알려보고 계속적인 오프너스 PWA 적응기에 대한 리뷰를 해보려 합니다. 목차(차례) 기술 용어 1. SPA : Single Page Application 하나의 페이지로 구성된 앱 필요한 부분만 갈아 끼운다 2. MPA : Multi Page Application 여러개의 페이지로 구성된 앱 페이지별로 html, css, js를 받아와서 화면을 그린다. 페이지의 이동 3. NA : Native App / Native App..

  2023.08.14