PWA - App Shell
Desember @2016
https://dyangalih.com
Who Am I?
A Simple Person Who Love Code,
Share Knowledge and
Always Learning about Java,
PHP, Linux sysadmin,
Android, Javascript.
Mr. G
PWA?
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.
What are we going to be building?
- Progressive
- Responsive
- Connectivity independent
- App-like
- Fresh
- Safe
- Discoverable and installable
- Linkable
My Implementation
- https://dyangalih.com
- https://webappid.com/gtfw
- https://www.youtube.com/watch?v=7kkI_gV3X2A
- https://www.youtube.com/watch?v=6YbPaINKnYA
Application Shell
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
Application Shell
Source
We’ve written a fully working sample using the application shell architecture, vanilla ES2015 JavaScript for the client, and Express.js for the server. There is of course nothing stopping you from using your own stack for either the client or the server portions (e.g PHP, Ruby, Python).
Source
I’ve written a fully working sample using the application shell architecture, Boostrap Framework and Hogan Js for the client, and PHP for the server.
Boostrap
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Hogan JS
Hogan.js is a 3.4k JS templating engine developed at Twitter
Link
- https://codelabs.developers.google.com/codelabs/your-first-pwapp/
- https://webappid.blogspot.co.id/2016/06/progressive-web-app-instant-loading.html
- https://webappid.blogspot.co.id/2016/11/cara-mudah-add-to-home-screen-webapps.html
- https://webappid.blogspot.co.id/2016/11/audit-webappsmu-dengan-lighthouse.html