PWA

PWA

Progressive Web Apps are web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications. Progressive Web Apps are a useful design pattern, though they aren't a formalized standard. PWA can be thought of as similar to AJAX or other similar patterns that encompass a set of application attributes, including use of specific web technologies and techniques. 

 

조건

 

1. responsive web degisn: 컨텐츠가 보여주는 기기에 따라 유동적으로 그리고 반응적으로 보여줄 것.
2. service workers 를 이용할 것
3. app manifest 와 push notification 을 사용할 수 있을 것.
4. 사용자들이 app 를 사용하는 것처럼 느낄 수 있도록, 다양한 브라우저 api 를 이용해구현할 것.
5. 사용들의 device 에 설치가 가능하도록 만들 것.

  In order to call a Web App a PWA, technically speaking it should have the following features: 

• Secure contexts (HTTPS): The web application must be served over a secure network. Being a secure site is not only a best practice, but it also establishes your web application as a trusted site especially if users need to make secure transactions. Most of the features related to a PWA such as geolocation and even service workers are available only once the app has been loaded using HTTPS.
• one or more Service Workers:  a script that allows intercepting and control of how a web browser handles its network requests and asset caching. With service workers, web developers can create reliably fast web pages and offline experiences.
• manifest file: A JSON file that controls how your app appears to the user and ensures that progressive web apps are discoverable. It describes the name of the app, the start URL, icons, and all of the other details necessary to transform the website into an app-like format.

PWA advantages

PWAs should be discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, and safe. To find out more about what these mean, read Progressive web app advantages.

 

example on iphone

 

Let's make PWA:

: https://youtu.be/FEBkne7Nyu4?t=558

 

• PWA Builder: 웹 서비스가 PWA 적용이 가능한지 테스트 및 부족한 부분을 자동으로 채워주어 PWA 로 만들 수 있게 도와주는 오픈소스 
• Workbox: service worker 를 자동으로 만들어주는 라이브러리 
• ngrok: 로컬호스트 url 을 외부에서 접근이 가능한 url 로 만들 수 있다. (http, https)
• Maskable.app: PWA 아이콘 만들 수 있는 툴

참고

PWA (Progressive Web App) 개념과 따라만들기: https://www.youtube.com/watch?v=FEBkne7Nyu4