{"_id":"57ffd85f755a2e1700c2bb21","parentDoc":null,"category":{"_id":"57ffd85f755a2e1700c2bb09","version":"57ffd85f755a2e1700c2bb05","project":"567083021dabd80d00b122ae","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-21T15:23:31.032Z","from_sync":false,"order":3,"slug":"progressive-web-app","title":"Progressive Web App"},"project":"567083021dabd80d00b122ae","version":{"_id":"57ffd85f755a2e1700c2bb05","project":"567083021dabd80d00b122ae","__v":1,"createdAt":"2016-10-13T18:54:23.018Z","releaseDate":"2016-10-13T18:54:23.018Z","categories":["57ffd85f755a2e1700c2bb06","57ffd85f755a2e1700c2bb07","57ffd85f755a2e1700c2bb08","57ffd85f755a2e1700c2bb09","57ffd85f755a2e1700c2bb0a","57ffd85f755a2e1700c2bb0b","57ffd85f755a2e1700c2bb0c","57ffd85f755a2e1700c2bb0d"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"3.4.0","version":"3.4"},"__v":0,"user":"567082433a32d20d00c45cab","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-07-21T15:32:29.064Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"The app's shell, is the minimal HTML, CSS, and JavaScript that is required to power the user interface of a progressive web app and is one of the the components that ensures reliably good performance. Its first load should be extremely quick, then immediately be cached. This means that the shell does not need to be loaded every time, but instead just gets the necessary content. - [Google Web Fundamentals](https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/step-01?hl=en)\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"App Shell in index.blade.php\"\n}\n[/block]\nThe app shell is already configured in your `resources/views/index.blade.php`.\nYou can see how the app shell looks like by temporarily commenting the scripts in your `index.blade.php`.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"critical.scss\"\n}\n[/block]\nCritical CSS will be served with your app shell. This should be the minimum amount of CSS your app shell needs in order to display. The file will be preprocessed with sass so that you can use the variables you have and it will be excluded from your `final.css` so that it doesn't get duplicated (and since it's only concerned with the app shell)","excerpt":"","slug":"app-shell","type":"basic","title":"App Shell"}
The app's shell, is the minimal HTML, CSS, and JavaScript that is required to power the user interface of a progressive web app and is one of the the components that ensures reliably good performance. Its first load should be extremely quick, then immediately be cached. This means that the shell does not need to be loaded every time, but instead just gets the necessary content. - [Google Web Fundamentals](https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/step-01?hl=en) [block:api-header] { "type": "basic", "title": "App Shell in index.blade.php" } [/block] The app shell is already configured in your `resources/views/index.blade.php`. You can see how the app shell looks like by temporarily commenting the scripts in your `index.blade.php`. [block:api-header] { "type": "basic", "title": "critical.scss" } [/block] Critical CSS will be served with your app shell. This should be the minimum amount of CSS your app shell needs in order to display. The file will be preprocessed with sass so that you can use the variables you have and it will be excluded from your `final.css` so that it doesn't get duplicated (and since it's only concerned with the app shell)