Содержание
- 2. Pavel Uvarov, Software Engineer at Epam Ryazan pavel_uvarov@epam.com spiderpoul poul_uvarov
- 3. Agenda What is PWA How Web Push works PWA example (Node.js, React) Restrictions and future of
- 5. What is PWA? Progressive Web Apps are web apps that use emerging web browser APIs and
- 6. Was Steve Jobs the first to introduce the concept of PWAs?
- 7. PWAs solve customer needs Installable - installed PWA run in a standalone window instead of a
- 8. One app, every platform
- 9. One app, every platform PWA are more affordable to develop and integrate than native mobile apps
- 10. Who is already using PWA? Twitter saw a 65% increase in pages per session, 75% more
- 11. PWAs leverage modern web capabilities
- 12. Progressive Web App checklist Use a secure connection (HTTPS) Registers a service worker Manifest file Cross
- 13. Push Notifications System level notifications, like native apps Fresh content that engages users Works even when
- 14. Request permission
- 16. How Web Push works Each browser manages push notifications through their own system, called a "push
- 17. How Web Push works On the client: Subscribe to the push service Send the subscription object
- 19. The subscription object
- 20. Send a push notification
- 21. Send a push from server
- 22. What is VAPID? Web Push Protocol not requiring strong authentication between your app and the push
- 24. What app should do Login/Sign in for new users Show notification for concrete user Should show
- 25. Tech Stack Serverless functions Node.js FaunaDB CRA TS Auth verified by JWT SWR Web push Deployed
- 26. CRA PWA https://create-react-app.dev/docs/making-a-progressive-web-app/
- 27. manifest.json
- 28. Demo https://hawkins-levels-tracker.now.sh/ Show on mobile Notifications on both platforms Show project, what makes it PWA, CRA
- 36. PWA limitations Still a new technology – all browsers don't support it fully yet More limited
- 37. Links https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures https://web-push-book.gauntface.com/ https://medium.com/progressivewebapps/history-of-progressive-web-apps-4c912533a531 https://serviceworke.rs/push-simple.html https://web.dev/progressive-web-apps/
- 39. Скачать презентацию