or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Do you want to remove this version name and description?
Syncing
xxxxxxxxxx
PWA 開發血淚史 / Ko Ko(柯克)
歡迎來到 Modern Web 2020 共筆
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →共筆入口:https://hackmd.io/@ModernWeb/2020
手機版請點選上方 按鈕展開議程列表。
簡報下載
tags:
MW20
框架與應用
PWA
認識PWA
PWA 是甚麼
PWA的優劣
優勢
劣勢
PWA 和 Hybrid APP的差異
PWA
Hybrid APP (Cordova)
PWA 成功案例
PWA的兩大核心
Service Worker
sw.jS
Manifiest.json
好用的開發工具
Workbox
Lighthouse
PWA Sample: https://magic-panda-engineer.github.io/
踩坑血淚史
第一坑:https:
第二坑:storage要記得清掉
第三坑:善用ES6之後的小特性
第四坑:定義好要離線工作的範圍
第五坑:善用 sync 避免斷線
第六坑:iOS要使用者手動加到主畫面
第七坑:iOS不支援notification。
第八坑:Service worker 的更新問題
第九坑:手機硬體功能要注意