{"id":17772615,"url":"https://github.com/jamesplease/pwa-notes","last_synced_at":"2026-01-12T06:27:11.352Z","repository":{"id":66133865,"uuid":"129158024","full_name":"jamesplease/pwa-notes","owner":"jamesplease","description":"Notes on building native-feeling Progressive Web Apps","archived":false,"fork":false,"pushed_at":"2018-04-12T01:09:24.000Z","size":8,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-07T09:41:58.442Z","etag":null,"topics":["pwa","pwa-apps"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jamesplease.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-11T21:47:32.000Z","updated_at":"2021-02-28T19:33:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"5dc53644-3677-41ae-bb42-6f357fef963d","html_url":"https://github.com/jamesplease/pwa-notes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fpwa-notes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fpwa-notes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fpwa-notes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fpwa-notes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamesplease","download_url":"https://codeload.github.com/jamesplease/pwa-notes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246660081,"owners_count":20813338,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pwa","pwa-apps"],"created_at":"2024-10-26T21:40:02.912Z","updated_at":"2026-01-12T06:27:06.334Z","avatar_url":"https://github.com/jamesplease.png","language":null,"readme":"# pwa-notes\n\n\u003e Last updated: 4/11/18\n\nProgressive Web Apps are applications that are built with web technologies that\nappear to the user to be native.\n\nThere are differences between native applications and web apps that are\nimportant to keep in mind when making PWAs to help with the illusion\nthat the app is native.\n\nThese notes list some of those differences and things to be mindful of.\n\n\u003e Heads up! PWAs are a rapidly evolving technology. This information may be outdated\n\u003e if you are reading this many months or years after the last update.\n\n## Environment\n\nI am in an environment that is very bad for PWAs: Apple's operating systems.\nThis can be seen as a good thing; I am testing the worst-case scenario.\n\nMore specifically:\n\n- **Desktop**:  macOS 10.13.4, Google Chrome Canary  \n- **Mobile**: iOS 11.3.0, Safari\n\n## Notes\n\n### All /General\n\n- Scrolling down when the page is at the top should not move the header. In\n  iOS, this can be fixed by avoiding position:sticky and using position:fixed.\n  However, macOS PWAs via Chrome always scroll the header, even with\n  position:fixed. This may(?) be an OS-level thing, as Safari on macOS also\n  scroll position:fixed.\n\n  The Twitter PWA appears to disable scrolling on desktop OS's when the\n  window's scrollTop is 0, which resolves the problem.\n  \n- Anything stuck to the bottom of the app, such as a nav, should also not\n  scroll when the user scrolls to the very bottom.\n  \n- The landing page for the website should likely be different than landing\n  page for a standalone app. Websites usually have an introductory\n  landing page with a large call-to-action, such as signing up. Apps\n  tend to either have an explore page (if the user is logged in or if\n  there are no accounts) or a log in page.\n\n- Hide the website footer. Websites usually have a footer with copyright\n  information, and possibly some links. Footers are not usually an element\n  of native apps.\n\n- Consider implementing a different top-level navigation system. Websites\n  tend to have menus in the header, iOS apps tend to have bottom menu\n  bars, even at large resolutions (see: Apple Music, App Store, Etsy,\n  Kickstarter)\n \n - Different OS should possibly have different layouts. Android/macOS/iOS.\n  iOS app on macOS can look weird. Perhaps\n  [platform.js](https://github.com/bestiejs/platform.js/) could help with this.\n\n### macOS (via Chrome Canary)\n\n- Consider enforcing the default cursor, even for links and buttons. Note\n  that Slack does not do this, and it does not feel weird to me. Use\n  your judgment!\n\n### iOS (via Safari)\n\n- The grey highlight on tap should be removed\n\n- Most text in the UI should not be selectable\n\n- Disable user scaling\n\n## Problems / Limitations\n\nThese are unresolved problems or current limitations related to making a PWA\nfeel native.\n\n### macOS\n\n- Links display the URL in the \"status bar\" in Chrome. This is the link preview\n  in the lower-left hand corner of the app. Although this feature is useful for\n  the web, it does not feel native. There is currently no way to disable this.\n\n- Apps cannot have a minimum width set. All PWAs can be resized to be 100px wide.\n\n- An HTTP application will display the URL bar\n\n## iOS\n\nI learned about a number of the items on this list from this\n[this excellent article](https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7)\non Medium by Maximiliano Firtman.\n\n- Controlling the appearance of the status bar is limited\n\n- Split View and Slide Over do not work\n\n- There is no screenshot of the app in the task switcher\n\n- PWAs frequently crash upon being opened (I was able to reproduce this behavior\n  on Pokedex, Twitter, and three side projects). This is easiest to replicate\n  by opening the app, returning to the home screen, opening the app, and so on,\n  until it crashes.\n\n- Discovery of PWAs is poor. The user must go to the share sheet and add\n  it to the home screen.\n\n- There is no way to lock the orientation of the PWA.\n\n- There is most likely no support for splash screens (I need to test this further).\n\n- PWAs do not keep state between sessions. Once the user navigates away,\n  the app will be shut down and reloaded.\n\n- There is no background processing in PWAs.\n\n- There is no API for knowing when the keyboard is open, so strange scrolling\n  situations can occur. To observe this, open the Twitter PWA and click the button\n  to compose a new tweet. Then, scroll down.\n\n## Things to Test\n\nThese are things that I still need to test on mobile and desktop.\n\n- A user clicking an external webpage link from within a PWA. Does it load the\n  webpage within the PWA, or does it open the browser? What about links that\n  attempt to open in a new tab?\n\n- Displaying a splash image on iOS\n  ([reference](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html))\n\n## Useful Tips\n\n- You can apply CSS to standalone apps using\n  [media queries](https://gist.github.com/jamesplease/06a3c7da1ebf3c6e8d7b0ecc7e3a7a0d)\n\n- You can also detect standalone mode\n  [with JavaScript](https://stackoverflow.com/questions/21125337/how-to-detect-if-web-app-running-standalone-on-chrome-mobile?utm_medium=organic\u0026utm_source=google_rich_qa\u0026utm_campaign=google_rich_qa).","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesplease%2Fpwa-notes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamesplease%2Fpwa-notes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesplease%2Fpwa-notes/lists"}