‘Progressive App design offers us a way to build better experiences across devices and contexts within a single codebase’ (Russel 2015). Progressive Web Applications involves using web development technology to create applications that can run smoothly on multiple platforms and devices without having to make a specific application for each individual platform.
‘Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience.’ (Your First Progressive Web App. n.d.) They way we use mobile devices compared to desktop devices is quite different, apps are at the center of mobile activity as opposed to on desktop where a large component of our activities take place online.
An example used by Alex Russell, a google chrome engineer, at the 2016 Progressive Web App Summit, was google maps. After a show of hands he observed , not to his surprise, that most people navigated to google maps through the web on their desktop computers, but when asked the same question about mobile, most people put their hands down. If you were to get to google maps on your phone you would more than likely do it via their app. “We don’t really use the web on mobile the way we do on desktop, but remember we started with native apps on desktop too.” (Russell 2016).
People gravitate towards native apps because of their speed, reliability and immersive experience. However in the last few years web technology has developed so that we can achieve a similar speed, reliability and experience as native technology. PWA’s encompass mobile(or desktop) websites that can act and react like native apps, providing offline service, fast interactions and immersive full screen experiences.
“Progressive Web Apps are user experiences that have the reach of the web, and are:
- Reliable – Load instantly and never show the downasaur, even in uncertain network conditions.
- Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling.
- Engaging – Feel like a natural app on the device, with an immersive user experience.
This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.” (Progressive Web Apps, n.d.)
Unlike native applications, which require downloading via that app store, Progressive Web Applications “While a PWA can be treated like a standard application on a device, the ability for it to be run from a uniform resource locator (URL) makes it easy to use the application on any device with a browser.”
App Shell Model
“An application shell is the minimal HTML, CSS, and JavaScript powering a user interface. The application shell should:
- load fast
- be cached
- dynamically display content
An application shell is the secret to reliably good performance. Think of your app’s shell like the bundle of code you’d publish to an app store if you were building a native app. It’s the load needed to get off the ground, but might not be the whole story. It keeps your UI local and pulls in content dynamically through an API.”(Gaunt, M. Osmai, A. 2019)
The App Shell Model is different for every Progressive Web Application. Google developer provides a codelab on Progressive Web Apps (Progressive Web Apps, n.d.), this lab provides a guideline set of questions one should ask themselves when designing their app shell model.
- What needs to be on the screen immediately ?
On screen immediately, we need the login screen, after this, we will need to go to the “What is Puberty ?” page after which the character will be selected and the diary page can be shown. If they are logging back in it will them straight to the diary page
- What other UI elements are key to our app ?
The forward and back arrows to navigate through the pages.A loading gif for content that is downloading or has not yet been downloaded.
- What supporting resources are needed for the app shell ?
The background images, button images and a loading gif.
Service Workers
Service workers are Progressive Web Applications solution to offline functionality, they cache previous loads of the application shell and use this when the network isn’t available. Normally if connection fails on a web page, you don’t see any content or you get the offline dino game on screen. Progressive web apps show you shell of the web application even if the content on the page will not be loaded until the connection is established again. This provides users with an experience that more closely emulates that of a native application. “A service worker is a script that runs in the background, separate from your web page. It responds to events, including network requests made from pages it serves and push notices from your server. A service worker has an intentionally short lifetime. It wakes up when it gets an event and runs only as long as it needs to process it.” (Gaunt, M. Osmai, A. 2019) Essentially, once a user loads the application once the application shell is cached. Once the user reopens the same application, the service worker grabs the application shell from the cache which is stored locally on the device. This not only allows for the application shell to be accessed when the device is offline, it allows for faster loading times than if the application shell was to be downloaded from the network on every single load.
“With offline first we assume of line, and do as much as we can with local content, the try and get content from the network, and the more we get to render without a connection, the better. So you should think of the network as a piece of progressive enhancement, an enhancement that may not be there” (Archibald, J. 2016) Service workers are made using Javascript, and the act as a buffer between the page and the network. Usually page request go straight to the network and the network send things back to the page directly. A service worker is placed between the network and the page so requests from the page must first go through the service worker before they reach the network.
The Application Shell will always be cached locally, because no matter how fast your connection, it will be much faster to retrieve the application shell from the devices cache. This is done using an install event which is triggered when the browser reads the service worker initially. This will not happen by default, and so you must add it to the fetch event, this will then check that if the url is the homepage and if the statement rings true, the application shell will be added to the cache. We then set up the network as a fallback for this request, so that if the data required isn’t available in the cache the page then requests it from the network. “The network only matters to fetch new data, and that’s the offline first goal” (Archibald, J. 2016)
Bibliography
Archbald, Jake 2016 Instant Loading Offline First (Progressive Web App Summit), Google Chrome Developers, viewed on 22/03/2019
Bob Frankston, March 2018, Progressive Web Applications, IEEE Consumer Electronics Magazine, accessed on 21/03/2019 via https://ieeexplore-ieee-org.cit.idm.oclc.org/stamp/stamp.jsp?tp=&arnumber=8287006
Gaunt, M. Osmai, A. February 2019, Instant Loading Web Apps with an Application Shell Architecture, Google Developer, accessed on 22/03/2019 via https://developers.google.com/web/updates/2015/11/app-shell
Progressive Web Apps, n.d. Google Developer, accessed on 21/03/2019 : https://developers.google.com/web/progressive-web-apps/
Russel, Alex June 15th 2015, “Progressive Web Apps, Escaping Tabs Without Losing Our Souls”, ‘Infrequently Noted’, blog post. Viewed on 21/03/2019 at URL : https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
Russell, Alex 2016, Opening Keynote (Progressive Web App Summit 2016), Google Chrome Developers, viewed on 21/03/2019 https://www.youtube.com/watch?v=9Jef9IluQw0&index=3&list=PLNYkxOF6rcIAWWNR_Q6eLPhsyx6VvYjVb
Your First Progressive Web App, n.d., Google Developer – Code Lab accessed on 21/03/2019 via https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0
Let's Talk - Project Blog 