Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/leegeunhyeok/paper

πŸŽ‰ SNS μ•± 예제둜 λ°°μš°λŠ” ν”„λ‘œκ·Έλ ˆμ‹œλΈŒ μ›Ή μ•± μ‹€μŠ΅μ½”λ“œ
https://github.com/leegeunhyeok/paper

progressive-web-app pwa pwa-example

Last synced: about 2 months ago
JSON representation

πŸŽ‰ SNS μ•± 예제둜 λ°°μš°λŠ” ν”„λ‘œκ·Έλ ˆμ‹œλΈŒ μ›Ή μ•± μ‹€μŠ΅μ½”λ“œ

Awesome Lists containing this project

README 

        



  



  # Paper

  🌐 PWA Example | Paper






## 원고 였λ₯˜μ‚¬ν•­



발견된 λ‚΄μš© 였λ₯˜ 사항듀을 μ •λ¦¬ν•œ λ§ν¬μž…λ‹ˆλ‹€. ν™•μ‹€ν•˜κ²Œ κ²€ν† ν•˜μ§€ λͺ»ν•œ 점 λŒ€λ‹¨νžˆ μ£„μ†‘ν•©λ‹ˆλ‹€ πŸ˜₯



- [8μž₯] λ°±κ·ΈλΌμš΄λ“œ 동기화 return λˆ„λ½, [ν™•μΈν•˜κΈ°](https://github.com/leegeunhyeok/paper/issues/3)



## μ£Όμš” κΈ°λŠ₯






기본적으둜 κ΅¬ν˜„λ˜μ–΄μžˆλŠ” μ£Όμš” κΈ°λŠ₯μž…λ‹ˆλ‹€.



- κ²Œμ‹œλ¬Ό 쑰회

- κ²Œμ‹œλ¬Ό μž‘μ„±

- κ²Œμ‹œλ¬Ό μ‚­μ œ

- κ²Œμ‹œλ¬Ό μ’‹μ•„μš” ν‘œμ‹œ



μ‹€μŠ΅μ„ μ§„ν–‰ν•˜λ©° κ΅¬ν˜„ν•΄λ‚˜κ°ˆ μ£Όμš” κΈ°λŠ₯μž…λ‹ˆλ‹€.



- μ„€μΉ˜ κ°€λŠ₯ν•œ Paper

- μ˜€ν”„λΌμΈ 지원

  - μ˜€ν”„λΌμΈ κ²Œμ‹œλ¬Ό 쑰회

  - μ˜€ν”„λΌμΈ κ²Œμ‹œλ¬Ό μž‘μ„±

  - μ˜€ν”„λΌμΈ κ²Œμ‹œλ¬Ό μ‚­μ œ

  - μ˜€ν”„λΌμΈ μ’‹μ•„μš” ν‘œμ‹œ

- λ°±κ·ΈλΌμš΄λ“œ 동기화

  - μ˜€ν”„λΌμΈ μƒνƒœμ—μ„œ μˆ˜ν–‰ν•œ μž‘μ—… 동기화

- μ’‹μ•„μš” ν‘Έμ‹œ μ•Œλ¦Ό

- 이 μ™Έμ˜ λ‹€μ–‘ν•œ λΆ€κ°€ κΈ°λŠ₯



[Paper 미리보기](./PREVIEW.md)



## 챕터



각 챕터별 κ΅¬ν˜„λœ μ½”λ“œμž…λ‹ˆλ‹€.  

μ‹€μŠ΅ 진행 μ‹œ μ°Έκ³ ν•˜κ±°λ‚˜, λΉ λ₯΄κ²Œ μ§„ν–‰ν•˜κΈ° μœ„ν•΄ μ œκ³΅ν•©λ‹ˆλ‹€.



- 챕터 1 - μ‹œμž‘ν•˜κΈ°

- 챕터 2 - μ‹€μŠ΅μ„ μœ„ν•œ κ°œλ°œν™˜κ²½ μ€€λΉ„ν•˜κΈ°

- 챕터 3 - ν”„λ‘œκ·Έλ ˆμ‹œλΈŒ μ›Ή 앱이 되기 μœ„ν•œ μ€€λΉ„

- [챕터 4](https://github.com/leegeunhyeok/paper/tree/ch4) - PWA의 핡심, μ„œλΉ„μŠ€ μ›Œμ»€

- [챕터 5](https://github.com/leegeunhyeok/paper/tree/ch5) - μ˜€ν”„λΌμΈμ„ μœ„ν•œ μΊμ‹œ μŠ€ν† λ¦¬μ§€ API

- [챕터 6](https://github.com/leegeunhyeok/paper/tree/ch6) - IndexedDB μ‚¬μš©ν•˜κΈ°

- [챕터 7](https://github.com/leegeunhyeok/paper/tree/ch7) - μ›Ή μ•± λ§€λ‹ˆνŽ˜μŠ€νŠΈ (Web App Manifest)

- [챕터 8](https://github.com/leegeunhyeok/paper/tree/ch8) - Sync, λ°±κ·ΈλΌμš΄λ“œ 동기화

- [챕터 9](https://github.com/leegeunhyeok/paper/tree/ch9) - μ„œλΉ„μŠ€ μ›Œμ»€μ™€ ν΄λΌμ΄μ–ΈνŠΈκ°„ λ©”μ‹œμ§€ μ£Όκ³ λ°›κΈ°

- [챕터 10](https://github.com/leegeunhyeok/paper/tree/ch10) - Push, μ‚¬μš©μžμ—κ²Œ μ•Œλ¦Ό 보내기



## ν”„λ‘œμ νŠΈ ꡬ쑰



μ£Όμš” μ½”λ“œλŠ” μ•„λž˜μ™€ 같이 κ΅¬μ„±λ˜μ–΄μžˆμœΌλ©°, μ‹€μŠ΅ μ‹œ `(* κ°•μ‘°)`된 μ†ŒμŠ€μ½”λ“œμ— κΈ°λŠ₯을 κ΅¬ν˜„ν•©λ‹ˆλ‹€.



```

.

β”œβ”€β”€ (* app.js) : Paper μ„œλ²„ 메인 μ½”λ“œ

β”œβ”€β”€ config

β”‚Β Β  └── (* default.json) : Paper μ„œλ²„ μ„€μ • 파일

β”œβ”€β”€ package.json

β”œβ”€β”€ (* push.js) : Paper ν‘Έμ‹œ μ•Œλ¦Ό 전솑 λͺ¨λ“ˆ

β”œβ”€β”€ sample

β”‚Β Β  └── (* IndexedDB.html) : IndexedDB 기초 μ‹€μŠ΅ 파일 

β”œβ”€β”€ server

β”‚Β Β  └── Paper μ„œλ²„ μ½”λ“œ

β”œβ”€β”€ upload : κ²Œμ‹œλ¬Ό 이미지 μ €μž₯ 경둜

└── workspace

    β”œβ”€β”€ css

    β”‚Β Β  └── CSS 파일

    β”œβ”€β”€ fonts

    β”‚Β Β  └── μ›Ή 폰트 파일

    β”œβ”€β”€ icons

    β”‚Β Β  └── Paper μ•„μ΄μ½˜ (μ•± μ•„μ΄μ½˜, ν‘Έμ‹œ μ•„μ΄μ½˜, 뱃지 λ“±)

    β”œβ”€β”€ images

    β”‚Β Β  └── Paper UI 이미지

    β”œβ”€β”€ js

    β”‚Β Β  β”œβ”€β”€ app.js : Paper κΈ°λ³Έ κΈ°λŠ₯ κ΅¬ν˜„ μ½”λ“œ

    β”‚Β Β  β”œβ”€β”€ axios.min.js : axios 라이브러리

    β”‚Β Β  β”œβ”€β”€ (* common.js) : Paper 곡톡 μ½”λ“œ (메인/둜그인)

    β”‚Β Β  β”œβ”€β”€ (* index.js) : Paper 메인 νŽ˜μ΄μ§€ μ½”λ“œ

    β”‚Β Β  β”œβ”€β”€ login.js : Paper 둜그인 νŽ˜μ΄μ§€ μ½”λ“œ

    β”‚Β Β  β”œβ”€β”€ (* paper-store.js) : Paper IndexedDB κΈ°λŠ₯ μ½”λ“œ

    β”‚Β Β  β”œβ”€β”€ polyfill.min.js : ES6 ν”„λ‘œλ―ΈμŠ€ 폴리필

    β”‚Β Β  └── util.js : Paper μœ ν‹Έ μ½”λ“œ

    β”œβ”€β”€ (* index.html) : Paper 메인 νŽ˜μ΄μ§€

    β”œβ”€β”€ login.html : Paper 둜그인 νŽ˜μ΄μ§€

    β”œβ”€β”€ (* manifest.json) : μ›Ή μ•± λ§€λ‹ˆνŽ˜μŠ€νŠΈ

    β”œβ”€β”€ (* service-worker.js) : μ„œλΉ„μŠ€ μ›Œμ»€

    └── splash

        └── iOS/iPad μŠ€ν”Œλž˜μ‹œ 이미지

```



## μ½”λ“œ 쑰각



μ‹€μŠ΅ 쀑 직접 μž‘μ„±ν•΄μ•Όν•˜λŠ” λ‹¨μˆœν•œ 타이핑 μž‘μ—…μ„ μ΅œμ†Œν™”ν•  수 μžˆλ„λ‘ μ½”λ“œ 쑰각을 μ œκ³΅ν•©λ‹ˆλ‹€.



### 캐싱 리슀트



5. μ˜€ν”„λΌμΈμ„ μœ„ν•œ μΊμ‹œ μŠ€ν† λ¦¬μ§€



```javascript

const IMMUTABLE_APPSHELL = [

  '/favicon.ico',

  '/favicon-16x16.png',

  '/favicon-32x32.png',

  '/manifest.json',

  '/images/no_image.png',

  '/images/add_photo.svg',

  '/images/clear.svg',

  '/images/delete.svg',

  '/images/favorite_active.svg',

  '/images/favorite.svg',

  '/images/menu.svg',

  '/images/notification.svg',

  '/images/notification_disabled.svg',

  '/images/notification_enabled.svg'

];

```



```javascript

const MUTABLE_APPSHELL = [

  '/',

  '/login',

  '/js/app.js',

  '/js/util.js',

  '/js/common.js',

  '/js/axios.min.js',

  '/js/index.js',

  '/js/login.js',

  '/js/paper-store.js',

  '/css/index.css',

  '/css/login.css'

];

```



### μ›Ή μ•± λ§€λ‹ˆνŽ˜μŠ€νŠΈ



7. μ›Ή μ•± λ§€λ‹ˆνŽ˜μŠ€νŠΈ (Web App Menifest)



```json

{

  "name": "",

  "short_name": "",

  "icons": [

    {

      "src": "",

      "sizes": "",

      "type": ""

    }

  ],

  "theme_color": "",

  "background_color": "",

  "orientation": "",

  "display": "",

  "start_url": ""

}

```



```html



```



```html



```



## κ³ κΈ‰



```bash

# SCSS 파일 μˆ˜μ • μ‹œ κ°μ§€ν•˜μ—¬ CSS둜 μ¦‰μ‹œ λ³€ν™˜

npm run sass



# SCSS 파일 λΉŒλ“œν•˜μ—¬ CSS 파일둜 λ³€ν™˜

npm run build-style

```



`node-sass` λͺ¨λ“ˆ μ„€μΉ˜ ν•„μš” (package.json μ°Έκ³ )



## 이미지 좜처



- App Icon: [import_contacts](https://www.material.io/resources/icons/?icon=import_contacts) icon edited by `Geunhyeok LEE`

- Icon images: [Material icons](https://www.material.io/resources/icons)

- Sample images: [Pexels](https://www.pexels.com) - CC0 Images

  - cat_1.jpg

  - cat_2.jpg

  - puppy.jpg