Why Progressive Web Apps For WordPress - WordCamp Finland
- 1. WHY PROGRESSIVE APPS FOR WORDPRESS? Imran Sayed @imranhsayed WordCamp Finland 2020
- 7. Software
- 8. Hardest problem with the software is the distribution.
- 10. 19th Century : The first known computer algorithm was written by Charles Babbage Difference Engine
- 11. 1980s : Spread of cartridges and cassette tapes for distribution of commercial software. CARTRIDGES & CASSETTES
- 12. When the programmes started to become large , floppy discs, cds and dvds were used FLOPPY DISCS, CDS & DVDS
- 16. USAGE TREND ON MOBILE WEB VS. MOBILE APP
- 17. ● Easy access on home screen ● Work offline ● Push notifications bring user back ● Access to mobile features and sensors 13% on Mobile Web 87% on Mobile Apps According to commScore Mobile Metrix Why users spend more time on native Apps?
- 18. 80% Of the time is spent on user’s top 3 apps. According to commScore Mobile Metrix
- 19. Capability Reach Approx. 100 visits/ month for an avg user. Mobile Apps have better capability, while Mobile Web has better reach.
- 20. HOW CAN WE GET BOTH?
- 21. Capability Reach PWA Combine the best of both world: Mobile App + Mobile Web = PWA
- 22. ● Progressively enhance Web Applications look and feel like native apps ● PWAs are web applications, looks and behaves as if it is a mobile app. WHAT ARE PROGRESSIVE WEB APPS?
- 25. ● We use app by clicking on the App icon on home screen. ● If our web can earn a place in user’s home screen, we can increase the users engagement. How do you use native apps?
- 26. Need for PWA?
- 28. Native Apps PWA ● Develop and maintain 3 separate codebase ● High friction of distribution ● Less discoverable ● Only the app download link can be shared ● Only one codebase ● Accessible on android, IOS and web. Variety of browsers. ● Content is discoverable and indexed by search engines. ● Direct link of any page/screen can be shared.
- 29. Native Apps PWA ● Not bookmarkable ● Update the app through playstore ● High data usage. ● Bookmarkable ● Always fresh ● Large data savings.
- 30. Progressive Responsive Works Offline Works Offline Fresh Safe Discoverable Re- engageable Durable Linkable FEATURES OF PWA
- 31. BUILDING A PWA
- 32. STEP 1: Create a Web App Manifest
- 33. ● A JSON file that contains metadata. ● Tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop. WHAT IS A WEB APP MANIFEST?
- 34. Valid Manifest ● Chrome - manifest.json ● Opera - manifest.json ● Mozilla - manifest.webmanifest ● Microsoft - manifest.webmanifest WHAT IS A WEB APP MANIFEST?
- 35. { "short_name": "Codeytek", Home screen, launcher etc "name": "Codeytek Academy", App install prompt "icons": [ { "src": "/android-chrome-192x192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/images/icons-512.png", "type": "image/png", "sizes": "512x512" } Icons used for: Home screen, App launcher, Task Switcher, Splash Screen
- 36. …. "start_url": "/index.html", "theme_color": "#ffc40d", "background_color": "#3367d6", "display": "standalone", "scope": "/maps/", }
- 37. Tell the browser about your manifest <link rel="manifest" href="/manifest.json">
- 38. Browser Support
- 39. Service Workers
- 40. A service worker is a script that your browser runs in the background, separate from a web page. WHAT ARE SERVICE WORKERS?
- 41. Web Browser Service Workers Remote Server Middleware Intercepts http request SERVICE WORKERS
- 43. 1. register 2. install 3. activate Register a Service Worker Add files to Cache Cache Delete Previous Cache 3 phases of Service Worker Lifecycle
- 44. STEP 2: REGISTER A SERVICE WORKER( register )
- 45. Step 1: Registering Service Worker
- 46. STEP 3: ADD FILES TO CACHE ( install )
- 47. Create cache version and path for files to be cached ( sw.js )
- 49. STEP 4: Delete previous cache ( activate )
- 52. Service Worker, Manifest and Cache
- 53. Once the SW is active, it Has full control over pages.
- 54. It can now handle events such as: 1. Fetch 2. Push 3. Sync
- 55. Web Browser Service Workers Intercepts http request Server / Makes http request Is Request URL In Cache?
- 56. STEP 5: FETCH DATA FROM CACHE ( fetch )
- 58. Fetch event
- 59. Fetch event
- 60. STEP 6: ADD A CUSTOM ADD TO HOME SCREEN
- 63. Lighthouse Score - Performance
- 65. 1. PWA 2. Super PWA 3. WordPress Mobile Pack 4. PWA for WP & AMP 5. Progressive WordPress
- 66. Super PWA
- 68. One Signal
- 69. One Signal
- 71. Publish post
- 73. 1. Google Chrome for Android 2. Mozilla Firefox for Android 3. Edge for Android 4. Brave for Android 5. Samsung Internet Browser Compatibility
- 74. 1. iOS just started supporting PWA from version 11.3 2. Only some features supported on iOS 3. Background Sync and Web Push Notifications are not supported 4. Manually press the Share icon and then “Add to Home Screen.” Browser Compatibility
- 75. PWA Examples
- 76. WordSesh2020 Flipkart lite Twitter lite m.uber Codeytek
- 77. wp-decoupled
- 79. learn.rtcamp.com
- 80. codeytek.com