![Web Application Manifest
{
"lang": "en",
"dir": "ltr",
"name": "Super Racer 2000",
"description": "The ultimate futuristic racing game from the
future!",
"short_name": "Racer2K",
"icons": [{
"src": "icon/lowres.webp",
"sizes": "64x64",
"type": "image/webp"
},{
"src": "icon/lowres.png",
"sizes": "64x64"
}, {
"src": "icon/hd_hi",
"sizes": "128x128"
}],
"scope": "/racer/",
"start_url": "/racer/start.html",
"display": "fullscreen",
"orientation": "landscape",
"theme_color": "aliceblue",
"background_color": "red"
}](https://image.slidesharecdn.com/anintroductiontoprogressivewebapps-170406121005/85/An-introduction-to-Progressive-Web-Apps-13-320.jpg)
An introduction to Progressive Web Apps
- 1. An Introduction to Progressive Web Apps by Kevin Farrugia
- 2. Kevin Farrugia Co-founder at Incredible Web I am a software engineer with expertise in web technologies and a proud advocate of Progressive Web Applications. I am motivated to share my knowledge of PWAs with the aspiration to contribute in bringing the next 1 billion users online. Who am I? Author for Smashing Magazine https://www.smashingmagazine.com/2016/08/a-beginners- guide-to-progressive-web-apps/ Author of Building Progressive Web Apps (May 2017, Packt Publishing)
- 3. “Progressive web apps are ordinary mobile- friendly web applications that may be progressively enhanced into native-like applications through the modern browser.”
- 4. A Brief History “You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today” - Taken from Walter Isaacson’s biography of Steve Jobs iPhone June 2007 SDK (later to become the App Store) is announced Oct 2007 App Store July 2008 More than two million mobile apps on the AppStore June 2016
- 5. Mobile Friendly Applications At it’s core, a PWA is little more than an ordinary website; composed of HTML, CSS & JavaScript. Source: Stack Overflow Developer Survey 2017
- 6. Native App Funnel Source: http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html “In a consumer mobile app, every step you make a user perform before they get value out of your app will cost you 20% of users.
- 7. Poor User Experience Encouraging users to use the native app could seriously hinder the web user experience.
- 8. Progressive Enhancement // how not to use JavaScript... <a href="javascript:location.setUrl('/my-route')">My Route</a> // ...don't do this either <a href="#" onclick="location.setUrl('/my-route')">My Route</a> A website must be built in a structured-layered approach, with rock-solid HTML & content and enhancements added to improve the user’s experience.
- 9. Native Features The most exciting aspect of a PWA is definitely the native-like user experience and features. A progressive web app is able to work offline, receive push notifications and should be optimized to work flawlessly on mobile devices.
- 10. Properties of a PWA Progressive Responsive Connectivity-independent App-like Fresh Safe Installable Discoverable Re-engageable Linkable
- 11. App-Shell Model The “app-shell” could be compared to the code you would publish to the app store if you were building a native app. By correctly applying the app-shell architecture (together with service workers) you are able to achieve: Improved Performance Offline Support Reduced Data Usage
- 12. Service Workers A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. Requires HTTPS Web Worker
- 13. Web Application Manifest { "lang": "en", "dir": "ltr", "name": "Super Racer 2000", "description": "The ultimate futuristic racing game from the future!", "short_name": "Racer2K", "icons": [{ "src": "icon/lowres.webp", "sizes": "64x64", "type": "image/webp" },{ "src": "icon/lowres.png", "sizes": "64x64" }, { "src": "icon/hd_hi", "sizes": "128x128" }], "scope": "/racer/", "start_url": "/racer/start.html", "display": "fullscreen", "orientation": "landscape", "theme_color": "aliceblue", "background_color": "red" }
- 14. Let’s Code...
- 15. Conclusion So, should I build a PWA or a native app?
- 16. PWA First Build PWA First Progressive web apps aim to combine the advantages of both, providing both a low friction of distribution and a host of features that improve user-engagement; with FlipKart almost reaching native app engagement levels and tripling time-on-site with their progressive web app.
- 18. incredible-web.com Incredible Web Ltd. Kevin Farrugia [email protected] +356 99218499 Shaun Grech [email protected] +356 79886164