progressive web app3 - smart lunwei lun huang 2 introduction of progressive web app because the...
TRANSCRIPT
WEILUNHUANG 1
p1
WebDevelopment-ProgressiveWebApp
WEILUNHUANG
WEI LUN HUANG 2
IntroductionofProgressiveWebApp
BecausetheearlyWebAppisstillnotabletorunoffline,receivepush
notificationsorlinksintohardware0,GoogleofferedChromeAppservicesince2013.
However,bycontinuingoperatewithwebstandardorganization,Googleannounceda
newapproachfordevelopingwebappsforAndroidinthe2015WebSummit
Conference.TheinnovativetechnologyprovidesServiceWorkerandWebPushand
advancedAPItobuildthemutil-browsercrossingapplicationcalled“ProgressiveWeb
App(PWA)”.PWAwillbeabletousein-devicehardwarelikepushnotifications,and
offlinework.Inaddition,therewillbeotherfeaturesdirectlyinstallintouserdesktop,
suchasaddinganicontothehomescreen,launchinginfull-screenwithURLbarand
displayingasplashscreeneffectthatusesadvancedwebcapabilitiesfordeliveringan
app-like(actasNativeApp)userexperience.
Bylookingbacktheevolutionofwebprograms,“XMLHTTPRequest”was
availablewidelysinceIE5andintheGecko-basedbrowser(qwebbrowserengine
usedinapplicationsdevelopedbytheMozillaFoundation1)fromasearlyas2000.
Later,AJAX(themethodofexchangingdatawithaserverandupdatingpartsofaweb
pagewithoutreloadingtheentirepage2)happenedinthenext5years.Recently,PWA
hastakenoverandseemstohavebecomethemainstreamapplication,these
WEILUNHUANG 3
principlesofwebdevelopmenthavecertainrulestofollow:UsingURLsandlinksas
thecoreorganizingsystem,havingaccessibilityinmarkupandstylingtohumansand
searchengines,providingadditionaluserinterfaceandsystemcapabilities,and
implementingwithoutpermissionorpaymentinstandards-based3.Brillianttoolsthat
haveattemptedtogainaccesstoallowdeveloperstobuildwithclient-sidetechnology
formobilewebapplications,suchasAdobeAIRApplications,WindowsStoreApps,
Cordova,PhoneGapandotheronlineplatforms.Comparatively,PWAprovidedmore
technologypossibilityandexpansibility.FunctionslikeaccesssystemAPIs,asetof
toolsforbuildingsoftwareandapplications,createblocksforprogrammerstomake
programmingeasiertodevelop4.Usersusedtodownloadentirelypackagednative
apps,butnowPWAprovidesabetterexperiencetoenhancetheimprovementofweb.
FeaturesofProgressiveWebApp
UnlikeNativeAppneedstobedownloadedinGooglePlayorAppleStore,
ProgressiveWebApppresentsanapp-likewebthroughbrowser.Inaddition,PWAis
anexistingappthatcouldbuildwithJavaScriptFramework.Asaresult,thedevelopers
caneasilyimplementwithprogressivewebprogramming.Inthiscase,“progressive”
WEI LUN HUANG 4
meansthatthemorefeaturesbrowsersupports,themoreprogressivelyenhancedin
datarenderingcouldbe.Theperformancedependsclient-sidedevices,soifthe
environmentwerenotallowed,PWAwouldevolvefrompagesinbrowsertabstohave
immersive,top-levelapps,andmaintainingtheweb'slowfrictionateverymomentin
ordertoachieveapp-likeexperience5.
ProgressiveWebApplicationsfeaturestakeadvantagetobringthebestofmobile
sitesandnativeapplicationstousers.Thesefeaturesincluded:ResponsiveWebDesign
(RWD),ServiceWorkers,WebAppManifest,andApplicationShell.
-ResponsiveWebDesign(RWD)
ProgressiveWebAppappliedthefoundationofResponsiveWebDesign,whichmeans
thecontextsaresensitiveandcross-platformforbuildinguser-friendlyinterface6.In
otherwords,PWAnotonlybeanAppbutalsoberegardedascomputersoftware.The
datastoresinCloud,andthecontentindifferentdevicesappropriatelyadaptforuser.
-ServiceWorkers
Aserviceworkerisascriptthatyourbrowserrunsinthebackground,separatefroma
WEILUNHUANG 5
webpage,openingthedoortofeaturesthatdonotrequireawebpageoruser
interaction.7ServiceWorkersaretoprogressivewebappsasXMLHTTPRequestwasto
AJAX.Forexample,itactsasaclientsideproxywritteninJavaScriptinPWA,soyou
cancache(filesareloadedonceoverthenetworkandthensavedtothelocaldevice)
assetslocally.Nomatterwhatrathernetworktheuserisconnectedto,appsloadnear
instantly.Appscanevenworkofflinebecausetheserviceworkerwillrespondto
networkrequests7.Moreover,serverworkercandefinewhateventhastowakeitup,
suchaspushmessagescanwakeupaserverworker.
Anoverlysimplifiedversionoftheserviceworkerlifecycleonitsfirstinstallation.p2
WEI LUN HUANG 6
-WebAppManifestfile
Webappmanifestsstoremetadataforaprogressivewebapp.ItprovidesMetadatato
tellthebrowserhowitshouldlookwheninstalled.Icons,description,colors,and
relatedinfoconvertinJSONformat7thatletsbrowserscreatehigh-qualityexperiences
forthelaunchericon,taskswitcher,andsplashscreen.Smoothanimations,scrolling
andnavigationskeeptheprocesssilky.“Addtohomescreen”functioninbrowserput
thePWAondevices’desktophelpusersre-engages.Inorderfortheappinstall
promptstodisplayinappmustcontainvalidserviceworkerregisteredandWebApp
manifest,beservedoverHTTPS(thesecureversionofHTTP,meansall
communicationsbetweenbrowserandwebsiteareencrypted.8)andbevisitedtwice,
withatleast5minutesbetweenvisits.
-ApplicationShell(AppShell)
AppShellistheminimalwebprogrammingthatisrequiredtopowertheuser
interfaceofPWAandisoneofthecomponentsthatensurereliablyforgood
performance.IntheApplicationShellmodel,server-siderenderingshouldbeusedas
muchaspossibleandclient-sideprogressiverenderingshouldbeusedasan
enhancementinthesamewaywhenserviceworkerissupported.5Itsfirstloadshould
WEILUNHUANG 7
beextremelyquickandimmediatelycached.Everyconsecutivetimethatuseropens
theapp;theshellfilesareloadedfromthelocaldevice'scache,whichresultsinrapid
startuptimes.
Manysitesorappsassemblethepageandallofitscontentasonebeforesending
itdowntothebrowser.PWAchangesthismodelbyseparatingthepartsthatchange
oftenessentiallythecontentfromthepartsthatdonotchangeoften.Theappshellcan
supportthecontenttodownloadanddisplayandmayevenstorethecontentinalocal
databasesothatitcanoperatenexttimeonopenonslownetwork.
SpeedIndexinPWAUniversalRenderPerformance.p3
WEI LUN HUANG 8
BusinessesinProgressiveWebApp
Theaverageuservisitsmorethan100websitesontheirmobiledeviceevery
month,andexpectationsforspeedandqualityhigherthanever.InContrast,the
averageNativeAppsuseronlyvisits25appspermonthbymobile.
MobileAppusercomparewithMobileWebUserP4
ProgressiveWebAppisaweb-basedapplication,whichcanlightlyinstallintouser
desktop,withoutactuallysearchinganddownloadingintheappstore.Accordingthe
EveryStepCostsYou20%ofUsers(2012),whichwaswrittenbyGaborCselle9,workas
ProductManagerinGoogle,describedthateverystepyoumakeauserperformbefore
theygetvalueoutofyourappwillcost20%ofpotentialusersinaconsumermobile
app.Asaresult,lettinguserexperiencedalongprocessinmobiledeviceswillbe
confusingandlosingofcustomerprofits.
WEILUNHUANG 9
Percentageoftypicalconsumerappfunnelp5
Furthermore,theresearchfoundthatitwasexpensivetogetusertoactuallyusetheir
nativeapp.Fiksuisacompanythatkeepstrackingnativeapplicationecosystems.
BelowindexshowsthatthecosttogettingausertotryoutaNativeAppbyusing
applicationadsrangesfrom$1-$2upanddownbefore,andthatnumberhasincreased
from$2ayearagotoover$4today.
TheCPMindex,measuringthecostperthousandadimpressionsacrossawiderangeofexchangesand
adformats,revealstherelativecompetitionformobileadimpressions.p6
WEI LUN HUANG 10
Flipkart,India’slargeste-commercesite,decidedtocombinetheirwebpresence
andnativeappintoaProgressiveWebApplication.Afterthat,ittriplesthetimeonits
websitewithefficiencyandhasresultedina70%increaseinconversions.
AnotherexampleisAliExpress,partoftheAlibabaGroupwaslookingforawayto
providetheirwebuserswiththebenefitsoftheirapp,suchastheabilitytowork
offline,performance,andre-engageusers.Finally,theyuseProgressiveWebApp
reachtheincreasingconversationby104%thanbefore.10
BusinessInsider,MostAmericansDownloadZeroAppsEveryMonth,Steven
Tweedie(2014)evenwrote“65.5%ofUSsmartphoneusersdon'tdownloadanynew
appseachmonth.”Thestaticsshowedthatdespiteofpeopleareusingtheappsthey
havemorethanever,onlyapproximatelyathirdofU.S.smartphoneuserschooseto
tryanewapp11.
SmartphoneUser’sNumberofAppDownloadsPerMonthp7
WEILUNHUANG 11
ProgressiveWebAppsV.SNativeApps
ThemajoradvantagesofProgressiveWebAppsofferfeaturesthatnativeapps
lackisitcanreplaceallthefunctionsofnativeappsandwebsitesatonce.Inthe
beginning,PWAcanbereliable,loadquicklyandeasilydiscoverthecontentbysearch
engines.Ontheotherhand,thecontent-centricmethodnativeappwillnotshow
amongappstoresearchresultsforcontentcannotexposeitscommunitieswidelytothe
appstoreasindividual.Next,forthereasonthatanypageorscreenhasabookmarkor
directlink,itwillbeeasilytosaveorshareinformationinsocialmedia.Furthermore,PWA
alwayssynchronizefreshdata,thereisnoneedtogothroughtheappstorestopush
updatesanymore.Moreover,PWAhasuniversalaccess(basedonweb),butappstores
havesomerestrictionsandpoliciesincontrol.Finally,PWAcanbeextremelyimportantin
largedatasavinglikeemergingmarketswithslowInternetaccess.Forexample,
e-commercewebsiteKongacutdatausageby92%forthefirstloadbymigratingtoa
PWA.12
However,thedisadvantageofPWAtoNativeAppisitlacksofprivacypermission,
suchasusercontacts,calendar,alarmsandotherfeatures.Usercannotgetaphonecallor
usedevice’sflashlight.Itdoesnotallowaccessingsystemliketaskmanagement,oreven
WEI LUN HUANG 12
modifyingsystemsettings.Inthewebsite,Isserviceworkerready13,showsthatnotallthe
browserscansupportserviceworkerrunning.Inaddition,inanotherwebsite,WhatWeb
CanDoToday14,hasseveralpostingsthatlistfeaturesstillnotavailableforweb.Moreover,
PWAisnotfeasibleforSafaritohaveapop-up“addtohomescreen”function.Iwouldsay
thatthegapbetweenWebandAppstillexist.
ProgressiveWebAppFinalThought
ForthenewPWAs’developingstrategy,Googleannouncedthattheydecidedto
terminateChromeappintwoyearsafterduetoWindows,MacandLinuxonly1%user
frequentlyuseit.ThePWAcanbeforecastinginfuturewebfiery-trend.AlthoughPWA
usedtoleavesomeproblemsforcompatibilityiniOSplatform,theprompttoinstall
thewebappiscurrentlyshownundervaryingconditionsacrossOpera,Chromeand
theSamsungbrowser.ApplehasindicatedinterestinprogressivewebappsforiOS,
butatthetimeofwriting,itstillreliesonMetatagsforwebappconfigurationandthe
applicationcacheforofflineuse.Bypayingattentionatnewreleasingproducts,Apple
seemstointegrateappintotheirownsystem.Onthecontrary,Googlewillcontinue
promotingProgressiveWebApptodevelopthewebmore“App-like”.
WEILUNHUANG 13
Reference
0RahulRoy-Chowdhury,ProductMangersfromGoogleDevelopmentteam
1Wikipedia,Listofwebbrowsers,Gecko-basedbrowserdefinition,
https://en.wikipedia.org/wiki/List_of_web_browsers
2SegueTechnologies(2013),WhatisAjax,http://www.seguetech.com/ajax-technology/
3InfrequentlyNote(2015),ProgressiveWebApps:EscapingTabsWithoutLosingOurSoul(2015),
https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
4MuleSoftVideos(2015),WhatisanAPI?,https://www.youtube.com/watch?v=s7wmiS2mSXY
5AddyOsmani,GettingstartedwithProgressiveWebApps(2015),
https://addyosmani.com/blog/getting-started-with-progressive-web-apps/
6JayBryantandMikeJones,ProHTML5Performance(2012Published),Chapter4-Responsive
WebDesign
7W3Cschool.com,JSON–Introduction,http://www.w3schools.com/js/js_json_intro.asp
8InstantSSLbyCOMODO,WhatisHTTPS,HTTPVSHTTPS,
https://www.instantssl.com/ssl-certificate-products/https.html
9GaborCselle(2012),EveryStepCostsYou20%ofUsers,
http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
10GoogledevelopersWebsite,https://developers.google.com/web
11StevenTweedie(2014),BusinessInsider,MostAmericansDownloadZeroAppsEveryMonth,
http://www.businessinsider.com/how-many-apps-people-download-per-month-2014-8
12Googledevelopers,CaseStudy,https://developers.google.com/web/showcase/2016/konga
13IsServiceWorkerReady?,https://jakearchibald.github.io/isserviceworkerready/
14WhatWebCanDoToday?,https://whatwebcando.today
WEI LUN HUANG 14
p1Max(2016),IONIC,WhatareProgressiveWebApps?,
http://blog.ionic.io/what-is-a-progressive-web-app/
P2MattGaunt,ServiceWorkers:anIntroduction,
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
p3AddyOsmani,SpeakDeck,ProgressiveWebAppsAcrossAllFrameworks,
https://speakerdeck.com/addyosmani/progressive-web-apps-across-all-frameworks
p4ProgressiveWebApps-ChromeDevSummit(2015)Video,
https://www.youtube.com/watch?v=MyQ8mtR9WxI
P5GaborCselle(2012),EveryStepCostsYou20%ofUsers,
http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
p6Fiksu,CPMIndex:September2016,https://fiksu.com/fiksu-dsp-indexes/#analysis
p7ComScore’sU.S.MobileAppReport(2014),Insights,
https://www.comscore.com/Insights/Press-Releases/2014/8/comScore-s-US-Mobile-App-Report-Avai
lable-for-Download?_ga=1.27795452.1596473589.1407244908