Progressive Web Apps - Tips
•Download as PPTX, PDF•
0 likes•30 views
Progressive Web Apps (PWAs) provide an app-like user experience through features like push notifications, offline use, and platform integration. They are built using service workers, web app manifests, and responsive design. Service workers allow PWAs to work offline by handling fetch events, caching app resources like HTML and CSS. Web app manifests define how the app should behave when installed on the home screen. Notifications and other features make PWAs feel like native mobile applications to users.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Progressive Web Apps - Tips
Similar to Progressive Web Apps - Tips (20)
More from Rainmaker Ho
Recently uploaded
Recently uploaded (20)
Progressive Web Apps - Tips
- 3. 3
- 4. Progressive Web Apps ✗ Website ✗ 提供跟 App 類似的功能 ✗ 離線 ✗ 通知 ✗ 寫 App 的另一個選擇 4
- 8. 開始前，先註冊 serviceWorker ✗ navigator.serviceWorker.register('sw.js’) ✗ 透過 Browser 要求權限 ✗ sw.js (serviceWorker) ✗ 負責處理 serviceWorker Events ✗ 常駐在 Browser 8
- 10. Html Head <head> … <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="manifest" href="manifest.json"> <link rel="apple-touch-icon" href="assets/apple-icon-180.jpg"> @*Sets whether a web application runs in full-screen mode*@ <meta name="apple-mobile-web-app-capable" content="yes"> @*bring Web App Manifest contents to non-compliant browsers*@ <script async src="https://cdn.jsdelivr.net/npm/pwacompat" crossorigin="anonymous"></script> </head> 10
- 11. serviceWorker (sw.js) ✗ 要 Listen fetch event self.addEventListener('fetch', () => { // … }); 11
- 12. manifest.json 12
- 13. Browser 安裝方式 13
- 14. UI Button 開啟 安裝 14
- 17. Notification navigator.serviceWorker.getRegistration() .showNotification('Client Notification'); 17
- 18. Notification 2 const options = { body: 'This is an important body!', icon: 'assets/apple-icon-180x180.png', actions: [ { action: 'search', title: 'try searching!' }, { action: 'close', title: 'do nothing' }, ], data: { notificationTime: Date.now(), user: 'rainmaker' } } navigator.serviceWorker.getRegistration() .showNotification('customized Notification', options); 18
- 21. 建立 VAPID ✗ Voluntary Application Server Identification (VAPID) for web Push 21
- 25. Server Push 25
- 26. Client 接收 Push Notification 26
- 27. Web Push Limits ✗ Browser 一定要開啟才收得到 27
- 28. Video 拍張照片 4
- 29. video, canvas 29
- 33. Demo 33
- 36. Cache App Shell Cache 畫面 6
- 37. 設定 Pre Cache 檔案 37
- 39. 設定 Fetch 的策略 39
- 41. Demo 41
- 42. activate 時，將舊的 Cache 刪除 42
- 43. 手動調整權限 43
- 44. 參考資源 ✗ web-push-libs ✗ The Offline Cookbook ✗ Web App Manifest Generator ✗ Love2dev-PWA ✗ Demo Project: https://github.com/rainmakerho/PWASample 44
- 45. Thanks! Any questions? You can find me at: ✗ rainmaker_ho@gss.com.tw 45
Editor's Notes
- https://developers.google.com/web/fundamentals/architecture/app-shell
- https://pwa-workshop.js.org/1-manifest/#manifest-fields https://app-manifest.firebaseapp.com/
- { "name": "GSS PWA Sample", "short_name": "GSSPwaSample", "description": "GSS Progressive Web Apps - Sample", "start_url": "/", "display": "standalone", "orientation": "portrait", "theme_color": "#417505", "background_color": "#7ed321", "icons": [ { "src": "assets/manifest-icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable any" }, { "src": "assets/manifest-icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable any" } ] }
- 要求權限要小心，因為 user 按下 block ，就不能再問 user 了。
- https://blog.mozilla.org/services/2016/04/04/using-vapid-with-webpush/