UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Upload
Sign in
IS
Uploaded byImran Sayed
PPTX, PDF830 views

Why Progressive Apps For WordPress?

The document discusses the evolution of software distribution, emphasizing the advantages of Progressive Web Apps (PWAs) over native apps, such as a single codebase, offline capabilities, and discoverability. It outlines the features and benefits of PWAs, including the ability to function like native apps while being accessible via web browsers. Additionally, it provides instructions on building a PWA, including the creation of a web app manifest and the use of service workers.

Softwareâ—¦
Download to read offline
1 / 72
2 / 72
3 / 72
4 / 72
5 / 72
6 / 72
7 / 72
8 / 72
9 / 72
10 / 72
11 / 72
12 / 72
13 / 72
14 / 72
15 / 72
16 / 72
17 / 72
18 / 72
19 / 72
20 / 72
WHY PROGRESSIVE APPS FOR WORDPRESS? #WCMUMBAI2019 Imran Sayed @imranhsayed
DINOSAUR GAME #WCMUMBAI2019
#WCMUMBAI2019 Hardest problem with the software is the distribution.
History of Software distribution #WCMUMBAI2019
#WCMUMBAI2019 19th Century : The first known computer algorithm was written by Charles Babbage Difference Engine
#WCMUMBAI2019 1980s : Spread of cartridges and cassette tapes for distribution of commercial software. CARTRIDGES & CASSETTES
#WCMUMBAI2019 When the programmes started to become large , floppy discs, cds and dvds were used FLOPPY DISCS, CDS & DVDS
#WCMUMBAI2019 Web application model has completely revolutionized software distribution.
#WCMUMBAI2019
USAGE TREND ON MOBILE WEB VS. MOBILE APP #WCMUMBAI2019
#WCMUMBAI2019 â—Ź 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?
#WCMUMBAI2019 80% Of the time is spent on user’s top 3 apps. According to commScore Mobile Metrix
#WCMUMBAI2019 Capability Reach Approx. 100 visits/ month for an avg user. Mobile Apps have better capability, while Mobile Web has better reach.
#WCMUMBAI2019 HOW CAN WE GET BOTH?
#WCMUMBAI2019 Capability Reach PWA Combine the best of both world: Mobile App + Mobile Web = PWA
#WCMUMBAI2019 â—Ź 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?
#WCMUMBAI2019 Flipkart Lite
#WCMUMBAI2019 EngagingReliable Fast
#WCMUMBAI2019 ● 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 your App?
Need for PWA? #WCMUMBAI2019
NATIVE APPS VS. PWA #WCMUMBAI2019
#WCMUMBAI2019 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.
#WCMUMBAI2019 Native Apps PWA ● Not bookmarkable ● Update the app through playstore ● High data usage. ● Many features require user’s permission. E.g. contacts, calendar, alarms etc. ● Bookmarkable ● Always fresh ● Large data savings.
#WCMUMBAI2019 Progressive Responsive Works Offline Works Offline Fresh Safe Discoverable Re- engageable Durable Linkable FEATURES OF PWA
BUILDING A PWA #WCMUMBAI2019
STEP 1: Create a Web App Manifest #WCMUMBAI2019
#WCMUMBAI2019 â—Ź 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?
#WCMUMBAI2019 Valid Manifest â—Ź Chrome - manifest.json â—Ź Opera - manifest.json â—Ź Mozilla - manifest.webmanifest â—Ź Microsoft - manifest.webmanifest WHAT IS A WEB APP MANIFEST?
#WCMUMBAI2019 { "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
#WCMUMBAI2019 …. "start_url": "/index.html", "theme_color": "#ffc40d", "background_color": "#3367d6", "display": "standalone", "scope": "/maps/", }
#WCMUMBAI2019 Tell the browser about your manifest <link rel="manifest" href="/manifest.json">
Browser Support
Service Workers #WCMUMBAI2019
#WCMUMBAI2019 A service worker is a script that your browser runs in the background, separate from a web page. WHAT ARE SERVICE WORKERS?
#WCMUMBAI2019 SERVICE WORKERS Web Browser Service Workers Remote Server Middleware Intercepts http request
Service Worker Lifecycle #WCMUMBAI2019
#WCMUMBAI2019 1. register 2. install 3. activate Register a Service Worker Add files to Cache Cache Delete Previous Cache 3 phases of Service Worker Lifecycle
STEP 2: REGISTER A SERVICE WORKER( register ) #WCMUMBAI2019
Step 1: Registering Service Worker
STEP 3: ADD FILES TO CACHE ( install ) #WCMUMBAI2019
Create cache version and path for files to be cached ( sw.js )
STEP 4: Delete previous cache ( activate ) #WCMUMBAI2019
Service Worker Lifecycle
Service Worker, Manifest and Cache
Once the SW is active, it Has full control over pages. #WCMUMBAI2019
It can now handle events such as: 1. Fetch 2. Push 3. Sync #WCMUMBAI2019
Web Browser Service Workers Intercepts http request Server / Makes http request Is Request URL In Cache?
STEP 5: FETCH DATA FROM CACHE ( fetch ) #WCMUMBAI2019
Fetch event
Fetch event
STEP 6: ADD A CUSTOM ADD TO HOME SCREEN #WCMUMBAI2019
Lighthouse Score - Performance
Lighthouse Score - Performance
PWA Plugins for WordPress #WCMUMBAI2019
#WCMUMBAI2019 1. Super PWA 2. WordPress Mobile Pack 3. PWA 4. PWA for WP & AMP 5. Progressive WordPress
Super PWA
Browser Compatibility #WCMUMBAI2019
#WCMUMBAI2019 1. Google Chrome for Android 2. Mozilla Firefox for Android 3. Edge for Android 4. Brave for Android 5. Samsung Internet Browser Compatibility
#WCMUMBAI2019 1. iOS just started supporting PWA from version 11.3 2. Only some features supported upon 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
Popular PWAs #WCMUMBAI2019
#WCMUMBAI2019 1. Flipkart Lite 2. Twitter Lite 3. Pinterest 4. Tinder 5. OLX 6. Trivago Popular PWAs
wp-decoupled
#WCMUMBAI2019 https://developers.google.com/web/funda mentals https://github.com/imranhsayed/pwa- concepts https://github.com/rtcamp/wp-decoupled References
WordCamp Mumbai Organizers & volunteers #WCMUMBAI2019 Mahvash Fatima - Ppt Design Credits
#WCMUMBAI2019 learn.rtcamp.com
#WCMUMBAI2019
#WCMUMBAI2019 Imran Sayed @imranhsayed